Question

I am creating a “fill in the blanks” client side application using JS/JQUERY that will read in an XML file retrieved from AJAX call.

Inside the XML is a node that contains a string with tags that identify where fields will go.

To try and improve the UI experience I am formatting the display of this form on the webpage using divs as follows

<div id="prologue"></div>
<div id="message"></div>
<div id="epilogue"></div>

I want to read through the string and use control statements to check where that part should go in those divs mentioned above.

Here is a sample string from the text node

${Prologue} – Dear ${Title} ${Surname}. This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}. Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. ${Epilogue}

Assumptions are quite simple, anything that is not ${Prologue} or ${Epilogue} goes in the “message” div

I have the pseudo code here

for loop through the string
if ${prologue} put inside prologue div tags
if !=$prologue and !=$epilogue then place in message div tag
if ${epilogue} then put inside epilogue div tags

There will be some other rules I will create in the loop e.g. when a “.” character then insert a line break tag

The output should come to something like this

<div id="prologue">
${prologue}
</div>
<div id="message">
Dear ${Title} ${Surname}. <br/>
This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}. <br/>

Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

</div>
<div id="epilogue">
${epilogue}
</div>

Could someone identify what features in javascript or jquery I could use for this implementation. I was thinking of using the .map() jquery function however I am not sure if this will work for my situation.

No full code solutions please! Just teasers so I can figure it out on my own!

EDIT

Here is a screenshot of my unformatted display

Thanks

Answer 1

Since the prologue and epilogue are at the beginning and end, you don’t really need to have them in your template. So in your template engine, replace ${prologue} and ${epilogue)} with "", as you don’t need them (assuming you have no control over the xml), and insert your input elements directly into the divs.

$('#prologue').append('<input type="text" id="prologueText"/>');
$('#epilogue').append('<input type="text" id="epilogueText"/>');

If you are dynamically creating the divs, you can prepend the prologue div with the prologue input, and append the epilogue div and epilogue input to a container div. You didn’t want to specific info, so I’ll stop there.

So your output would be:

<div id="prologue">
<input type="text" id="prologueText"/>
</div>
<div id="message">
Dear ${Title} ${Surname}. <br/>
This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}. <br/>

Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

</div>
<div id="epilogue">
<input type="text" id="epilogueText"/>
</div>