jquery - Refresh static page with dynamic contents on load -

i have static page loads , its' background-image changes dynamically using ajax , json. background changes when user swipe left/right or use next/previous buttons.

everything fine except photos don't appear when page initiated unless refresh page (f5). tried many ways including .trigger('refersh') , .page('refresh') failed.

i have below code load same page whenever user swipe left or right or use navigation buttons.

function animation() { $.mobile.changepage( "#gallery", { // #galley static page id. allowsamepagetransition: true, changehash: false, transition: "flow" }); } 

and 1 show loading ajax.

function showmsg() { $.mobile.showpageloadingmsg() settimeout(function() {   $.mobile.hidepageloadingmsg()   }, 500);  } 

html

<div data-role="page" class="demo-page" id="gallery">  <div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">     <h1>photos gallery</h1> </div><!-- /header -->  <div data-role="content">    </div><!-- /content -->  <div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">     <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">         <a href="#" class="prev" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="d">previous</a>         <a href="#" class="next" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="d">next</a>     </div> </div><!-- /footer --> </div><!-- /page --> 

ajax , jqm

var id = $('#displayid').val(); $.ajax({ type: "get", url: 'photos.php', data: { display: id }, datatype: "json", contenttype: "application/json", success: function(data) {   var first = "url('" + data.items[0] + "')";   $('[data-role="page"]').css({'background-image': first });   var count = data.count - 1;   var last = "url('" + data.items[count] + "')";   console.log("last img " +data.items[0]);   console.log("last img " +data.items[count]);   console.log("number of photos " + count);   var img = 0;   var page = $(this);    // swipe events   $('body').on('swiperight swipeleft', page, function (event){       if (event.type == "swipeleft") {           if (img == count) { $('[data-role="page"]').css({'background-image': first }); img = 0; }           else { img++; }           if (img >= 0 && img <= count) {       var bg = "url('" + data.items[img] + "')";         animation();         showmsg();       $('[data-role="page"]').css({'background-image': bg });          } //if img       } //if left       if (event.type == "swiperight") {           if (img == 0) { $('[data-role="page"]').css({'background-image': last }); img = 9; }           else { img--; }           if (img >= 0 && img <= count) {        var bg = "url('" + data.items[img] + "')";         animation();         showmsg();       $('[data-role="page"]').css({'background-image': bg });          } //if img          else { $('[data-role="page"]').css({'background-image': first }); img = 1; }       } //if right    });// swipe event    // .next & .prev  events $('.next').on('click', page, function (){     $(page).addclass("slidedown");     if (img == count) { $('[data-role="page"]').css({'background-image': first }); img = 0; }           else { img++; }           if (img >= 0 && img <= count) {       var bg = "url('" + data.items[img] + "')";         animation();         showmsg();       $('[data-role="page"]').css({'background-image': bg });  } }); // .next $('.prev').on('click', page, function (){           if (img == 0) { $('[data-role="page"]').css({'background-image': last }); img = 9; }           else { img--; }           if (img >= 0 && img <= count) {        var bg = "url('" + data.items[img] + "')";         animation();         showmsg();       $('[data-role="page"]').css({'background-image': bg });          } //if img          else { $('[data-role="page"]').css({'background-image': first }); img = 1; }  }); // .prev  } // success }); //ajax 

how refresh page on initial load in order show images, or shall change static page system generated one?

live demo here.

this problem.

because ajax call not triggered during correct page loading event, during first page loading swipe events not bound because page not loaded dom.

during refresh (secon page loading) page in dom , working fine.

to fix problem wrap ajax call this:

$(document).on('pagebeforeshow', '#gallery', function(){           //your ajax call should go here });