Question

I am using the jquery-tmpl template library to build a dynamic <select> list. In my template I have a function call that returns all <option> elements from an existing <select> element on the page.

In my template the function call executes successfully and returns the .html() from the existing <select> list but renders it as text in the DOM rather than appending the HTML to the <select> list.

I understand that my function is only returning a string and looks to be treated as such, but I don’t know how to actually get a reference to the <select> element in the template to execute any jQuery functionality on.

How do I append the <option> list to the template HTML element, or get a reference to the template element?

Here is my template:

<script id="searchTemplate" type="text/x-jquery-tmpl">
    <select id="destinations" class="destinations">
        ${getDestinationList()}
    </select>
</script>

And my function to return the <option> collection as a string:

function getDestinationList(){
    return $("#tabs-0 select[id$='destinations']").html(); //returns HTML list as string successfully
}

Thanks in advance!!

Answer 1

Okay, got it sorry all. Spent a few hours trying to figure this out and found the solution a few minutes after posting (face slap).

The solution I found was in using the compiled template functionality of the plugin. I had tried this earlier using $.template( "#destinationList", getDestinationList() ); and was getting script errors in the browser. Turns out I was using an older version of the plugin and the function actually had the signature $.templates(name, tmpl). I then checked to see if I had the latest version and saw that the signature has since been changed to $.template(name, tmpl) which goes along with the current documentation. Not sure when that changed, but…

After figuring that out I was able to properly use the compiled template functionality properly as such:

<script id="searchTemplate" type="text/x-jquery-tmpl">
   <select id="destinations" class="destinations">
      {{tmpl "#destinationList"}}
   </select>
</script>

And in the page load defining the compiled template like so:

$(function(){
    $.template( "#destinationList", getDestinationList() );
});

With my unchanged function:

function getDestinationList(){
    return $("#tabs-0 select[id$='destinations']").html();
}

Apologies to anyone that looked into this, but hopefully this will help someone else down the road.