Home/ Questions/Q 9265619
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T14:06:57+00:00

I am creating a templating system which can be interpreted at client side with

  • 0

I am creating a templating system which can be interpreted at client side with Javascript to construct a fill in the blanks form e.g. for a letter to a customer etc.

I have the template constructed and the logic set out in pseudo code, however my unfamiliarity with jQuery I could use some direction to get me started.

The basic idea is there is a markup in my text node that denotes a field e.g. ${prologue} this is then added to an array called “fields” which will then be used to search for corresponding node names in the xml.

XML

    <?xml version="1.0" encoding="UTF-8"?>
<message>

    <text>${Prologue} - Dear ${Title} ${Surname}. This is a message from FUBAR. An engineer 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 fubar.com or call 124125121515 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} - Free text field for advisor input<
</text>

    <inputTypes>
        <textBox type="text" fixed="n" size="100" alt="Enter a value">
            <Prologue size="200" value="BT ENG Appt Reschedule 254159" alt="Prologue field"></Prologue>
            <Surname value="Hoskins"></Surname>
            <ProductName value=""></ProductName>
            <VOLNumber size="8" value="" ></VOLNumber>
            <Epilogue value=""></Epilogue>  
        </textBox>
        <date type="datePicker" fixed="n" size="8" alt="Select a suitable appointment date">
            <AppointmentDate></AppointmentDate>
        </date>
        <select type="select" >
            <Title alt="Select the customers title">
                <values>
                    <Mr selected="true">Mr</Mr>
                    <Miss>Miss</Miss>
                    <Mrs>Mrs</Mrs>
                    <Dr>Dr</Dr>
                    <Sir>Sir</Sir>                  
                </values>
            </Title>
            <AppointmentSlot alt="Select the appointment slot">
                <values>
                    <Morning>9:30am - 12:00pm</Morning>
                    <Afternoon>1:00pm - 5:00pm</Afternoon>
                    <Evening>6:00pm - 9:00pm</Evening>
                </values>
            </AppointmentSlot>
        </select>
    </inputTypes>
</message>

Pseudocode

Get list of tags from text node and build array called "fields"
For each item in "fields" array:
Find node in xml that equals array item's name
Get attributes of that node
Jump to parent node
Get attributes of parent node
If attributes of parent node != child node then ignore
Else add the parent attributes to the result
Build html for field using all the data gathered from above

Addendums

Is this logic ok, is it possible to start at the parent of the node and navigate downwards instead?

Also with regards to inheritence could we get the parent attributes and if the child attributes are different then add them to the result? What about if the number of attributes in the parent does not equal the number in the child?

Please do not provide fully coded solutions, just a little teasers to get me started.

Here is what I have so far which is extracting the tags from text node

//get value of node "text" in xml
    var start = $(xml).find("text").text().indexOf('$');
    var end = $(xml).find("text").text().indexOf('}');
    var tag = "";
    var inputType;

    // find all tags and add them to a tag array
    while (start >= 0)
    {
        //console.log("Reach In Loop " + start)
        tag = theLetter.slice(start + 2, end);
        tagArray.push(tag);
        tagReplaceArray.push(theLetter.slice(start, end + 1));
        start = theLetter.indexOf('$', start + 1);
        end = theLetter.indexOf('}', end + 1);
    }

Any other recommendations or links to similar problems would be welcome.

Thankyou!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Get list of tags from text node and build array called “fields”

    To create the array I would rather user regular expression, this is one of the best use for it (in my opinion) because we are indeed searching for a pattern :

    var reg = /\$\{(\w+)\}/gm;
var i = 0;
var fields = new Array();

while (  (m = reg.exec(txt)) !== null)
{
    fields[i++] = m[1];
}

    For each item in “fields” array

    jQuery offers some utility functions :

    To iterate through your fields you could do this : $.each(fields, function(index, value){});

    Navigating through the nodes and retrieving the values

    Just use the jQuery function like you are already doing.

    Building the HTML

    I would create templates objects for each types you would take in charge (in this example : Text, Select)

    Then using said templates you could replace the tokens with the HTML of your templates.

    Displaying the HTML

    Last step would be to parse the result string and append it at the right place:

    var ResultForm = $.parseHTML(txt); 

$("#DisplayDiv").append(ResultForm);

    Conclusion

    Like you asked, I did not prepare anything that works right out of the box, I hope it will help you prepare your own answer. (And then I hope you will share it with the community)

    • 0