Question

I have a little jQuery mobile website where I want to visualize some data (I did that with D3). The website has multiple pages (made with <div data-role="page" id="...">...</div>). As I have quite a lot of data to load (json from server), I only want to load what the user currently sees. I.e. if he clicks on page 2 (via Button), I only want to load the data necessary for the page 2 (and not all the data for the other 10 pages). I found a couple of jQuery events (pageshow, etc.) – but all of them are only catched when the mainpage is created the first time. I also thought about just loading it, when the use clicks a button (link), but what if he directly navigates to the page2?

Any suggestions would be really much appreciated. Thank you!

Answer 1

I found it out:

$('#pageTag').bind('pageshow', function() {
   $.ajax({
  url: "getData.php"
   }).done(function( data ) {
  alert( "response from server: " + data);
   });
}

The problem here is, that it get’s called every time the page is loaded. So, if the user navigates back and fourth, it loads every time… I found some hints here, but not the solution for my second problem…

Any hints will be appreciated very much. thanks.