jQuery, finding controls within HTML template

Question

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

goffrie · Accepted Answer · 2010-07-19 03:41:58Z

5

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.

answered Jul 19, 2010 at 3:41

goffrie

4712 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ian Patrick Hughes · Accepted Answer · 2011-12-09 02:57:59Z

1

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
});

answered Dec 9, 2011 at 2:57

Ian Patrick Hughes

10.4k3 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery, finding controls within HTML template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related