Chuck Conway
Chuck Conway

Reputation: 16435

jQuery, finding controls within HTML template

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

Answers (2)

Ian Patrick Hughes
Ian Patrick Hughes

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

goffrie
goffrie

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

Related Questions