Refresh static page with dynamic contents on load

Question

I have a Static page that loads normally and then its' background-image changes Dynamically using AJAX and JSON. The background changes when the user swipe left/right or use next/previous buttons.

Everything is fine except that the photos don't appear when the page is initiated unless I refresh the page (F5). i tried many ways including .trigger('refersh') and .page('refresh') but all failed.

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

function animation() {
$.mobile.changePage( "#gallery", { // #galley is the static page ID.
allowSamePageTransition: true,
changehash: false,
transition: "flow"
});
}

and this one to 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 and 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 could I refresh the page on initial load in order to show the images, or shall I change the Static page with a system generated one?

Answer 1

This is a problem.

Because ajax call was not triggered during the correct page loading event, during the first page loading swipe events were not bound because page was not loaded into the DOM.

During the refresh (secon page loading) page was already in DOM and everything is working just fine.

To fix this problem wrap your ajax call into this:

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