English 中文(简体)
Append dynamic HTML elements through function call in jquery-tmpl
原标题:

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!!

最佳回答

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.

问题回答

暂无回答




相关问题
Check session from a view in CodeIgniter

What is the best way to check session from a view in CodeIgniter, it shows no way in their user guide, otherwise I will have to make two views on everything, which is kinda weird...still a newbie to ...

How to create a submit button template in Oracle APEX?

I m trying to create a template for a button in Oracle APEX but I don t seem to have access to the appropriate substitution strings to make it work. For non-templated buttons APEX seems to insert a ...

list of controls with templates in silverlight

Does anyone know where to find a list of controls that you can set the template on in Silverlight? I ve wasted several hours now trying to create control templates only to find that the control doesn ...

Template Classes in C++ ... a required skill set?

I m new to C++ and am wondering how much time I should invest in learning how to implement template classes. Are they widely used in industry, or is this something I should move through quickly?

Load ruby on rails template from database

I wonder if there is a way for me to store ruby on rails view files into database store and have that fetched directly from there. The reason is I want to create a CMS with all the user data stored in ...

Templated HTML Editor

I m looking for a HTML editor that kinda supports templated editing or live snippets or something like that. Background: I m working on a website for a friend. As there are no specifications what the ...

Dreamweaver changing path to site s reference instead of local

I have noticed recently, when I apply a template to a new HTML website, all the relative paths are pointed to my local files, example: file:///C|/webstuff/files but I cannot set them to relative paths ...

WPF ListView : Header styling

I want to have a ListView with columns and a particular style: The background for ALL column headers should be transparent except when the mouse is over in one of them. When this happends, the ...

热门标签