Question

For a custom requirement to display dynamically generated records with client-side paging, I’m using Microsoft’s jQuery Templates plugin alongwith G Birke’s jQuery Pagination plugin. I could have managed with just the Pagination plugin but now definitely need the Template plugin to conserve on server side processing involved in generating records with formatting.

I’ve shared my code sample on JSBin (see source). This sample is an adaption of Stephen Walther’s Templates plugin example & a Pagination plugin example by StackOverflow member brianpeiris

$("#flickr").live("click", function() {
    var url = "http://api.flickr.com/services/feeds/groups_pool.gne?id=44124373027@N01&lang=en-us&format=json&jsoncallback=?";
        // Grab some flickr images of cats
        $.getJSON(url, function (data) {
            // Format the data using the catTemplate template
            $("#catTemplate").tmpl(data.items).appendTo("#hiddenresult");
        });
    alert("Total flickr records fetched =" + $('#hiddenresult div.result').length);
    initPagination();

 });

The problems are:

1. The records show up with paging in Firefox & IE8 only if the alert in the code above is present. The alert probably introduces a delay. How to fix the code so that it works without that alert?
2. Even if the alert is present, the sample doesn’t work in Chrome, Safari & Opera. How to make the solution cross-browser?

I’ll appreciate if anyone can help me fix these issues

Answer 1

I thoink you need to move your initPagination() function call into the callback function of the getjson function right underneath where you append the template to the dom.