Can't call refresh on listview prior to initialization
I'm stepping through the examples in Pro JQuery. The content appears to be good, although there are numerous listings with small syntax errors. I've gotten to one that has more than a syntax problem.
The following is a small excerpt from the example:
<script type="text/javascript"> $(document).ready(function() { $.getJSON("data.json", function(data) { $('#flowerTmpl').tmpl(data).appendTo("body"); $('ul').append($('#liTmpl').tmpl(data)).listview("refresh") }) }) </script>
If you have the book, or can access it online, perhaps through Books24x7, this is listing 32-3, titled "Adding pages dynamically". In the text after the listing, the author states this:
I deferred execution of this code until jQuery triggers the
ready event, rather than waiting for the jQuery Mobile
pageinit event. I want to load my JSON data only once, and the
pageinit event is triggered too often to make it a sensible choice. When I obtain the data, I call the
tmpl method to add the dynamically generated pages to the
body element in the document.
From my point of view, this seems like a reasonable statement. When I load this page, Firefox says this:
uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'
Curiously, Chrome doesn't appear to complain.
Can someone provide some background on this? This is a JQuery error, not strictly a browser error. Why does Chrome appear to have no problem with this, but Firefox complains?
From what I've seen, I would think that it would make more sense to have a "ready" handler that processes the template, but put the refresh call into a pageinit handler? Assuming that's true, in the context of this example, would the body of the pageinit handler be the following?
$('ul').listview("refresh")
I tried doing this, removing the "refresh" call from the "ready" handler and moving it into the "pageinit" handler, like this (I see the "insert code" function in this forum doesn't deal with line numbers properly):
- $(document).ready(function() {
$.getJSON("data.json", function(data) {
$('#flowerTmpl').tmpl(data).appendTo("body");
$('ul').append($('#liTmpl').tmpl(data));
})
})
$(document).bind("pageinit", function() {
$('ul').listview("refresh")
});
However, it made no difference. I set a breakpoint on the "refresh" line, and after it stepped over it, it gave that error again.