Question

Step 1: Load a web page with a div “foo” and jqote2 template “tmpl_foo” (jqote2 is a jQuery-based templating system).

<div id="foo"></div>

<script type="text/x-jqote-template" id="tmpl_foo">
    <![CDATA[
    <% for (i in this.bar) { %>
            <h3><%= this.bar[i].title %></h3>
            <div class="pane"><%= this.bar[i].desc %></div>
    <% } %>
    ]]>
</script>

Step 2: Fire an ajax query via jQuery to retrieve data from the server, fill the div “foo” using jqote2, and init the jQuery UI accordion on “foo”.

var get_foo : function () {
    $.ajax({
        url     : url,
        type    : "GET",
        data    : "",
        dataType: "json",
        error   : function() { alert("Error loading html document"); },
        success : function(res) {
            $("#foo").empty().append(
                $('#tmpl_foo').jqote({
                'bar': res.bar
                }) 
            ).accordion();
        }
    });
}

$(document).ready(function() {
    get_foo();
});

It works beautifully.

On the web page I also have other links, such as “previous page” and “next page” (standard pager functionality) that also fire get_foo(). These actions also result in getting new data correctly, and the new results are inserted into “foo” correctly as well. However, for some reason the accordion doesn’t get initialized. I am stumped. What could the reason be?

Answer 1

You have to reset the accordion first:

        $("#foo").empty().append(
            $('#tmpl_foo').jqote({
            'bar': res.bar
            }) 
        ).accordion('destroy').accordion();

You may need to calculate the current accordion item, if you want to keep that state.