Reputation: 16435
I'm using an html template:
<script id="locationTemplate" type="application/template" >
<p>
<input id="searchText" type="text" />
<input id="searchlocation" type="submit" value="Search" />
</p>
<p>
<label>Location Name</label>
<input id="locationName" type="text" />
</p>
<div id="map"></div>
</script>
I can load the template ok, but when I try to find the controls within the template, I can not.
this.template = $('#locationTemplate');
this.searchText = $(this.template.html()).find('input#searchText');
this.locationName = this.template.find('p input#locationName');
What am I missing here? I've tried two different approaches.
Update:
I got this code to work:
this.template = $('#locationTemplate');
this.searchText = $(this.template.html()).find('input#searchText');
this.locationName = $(this.template.html()).find('input#locationName');
But I am confused why I have to dump the html into another instance of jQuery. Why can't I just use the template.find method since template is already wrapped in jQuery...
Upvotes: 1
Views: 1177
Reputation: 10426
I just encountered this. The only way to get to the object is to start out by selecting a DOM item that existed outside of the template and drill into it. So, for a template of list items that were appended inside of an existing UL I could do this:
//Click Handler for the Line Items
$("#current-list").delegate("li", "click", function() {
var id = $(this).children(".line-item").children(".command-button-item").attr("id");
alert(id); //this alerts a correct value
alert($(id).attr("id")); //this alerts undefined? when selecting by id
});
Upvotes: 1
Reputation: 471
You can't put your template in a <script> tag. It stops the parser from parsing the stuff inside, so it won't show up in the DOM, so selectors won't work on it.
Upvotes: 5