CODEWITHSUNDEEP
phpjqueryjquery-mobilerefreshpage-init
RetardVeverca
RetardVeverca

Reputation: 23

jQuery Mobile loads content only after I hit refresh

My jQuery Mobile page does not load content via $.get which is bind into pageinit event, but does so when I hit refresh (F5), why is that so?

My HTML page igra.html:

<!DOCTYPE html> 
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <!-- stili za custom temo, jquery, jquery mobile, phonegap-->
 <link rel="stylesheet" href="themes/what.min.css" />
 <link rel="stylesheet" href="jquerymobile.css" />
 <script src="jquery191.js"></script>
 <script src="jquerymobile.js"></script>
 <script src="phonegap.js"></script>
 <script src="main.js"></script>
 <link rel="stylesheet" href="stil.css" />

</head>

<body>
 <div data-role="page" id="igra">

  <div data-theme="a" data-role="header">
   <a href="index.html" data-role="button" data-theme="a" data-icon="coins" data-   inline="true" class="vibra">347 coins</a>
   <h3>WHAT?</h3>
   <a href="index.html" data-icon="domov" data-theme="a" data-inline="true" data-transition="slide" data-direction="reverse">Home</a>
  </div>

  <div data-role="content" class="igracontent"> </div>

 </div>

</body>
</html>

My main.js with jQuery Mobile code:

$( document ).delegate("#igra", "pageinit", function() {

 var par = qs["battlefield"]; 

 $.get('igra.php?battlefield='+par, function(data2) {
  $('div.igracontent').append(data2).trigger('create');
 });

});

//parse url parameter
var qs = (function(a) {
 if (a == "") return {};
 var b = {};
 for (var i = 0; i < a.length; ++i)
  {
    var p=a[i].split('=');
    if (p.length != 2) continue;
    b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
  }
return b;
})(window.location.search.substr(1).split('&'));

In igra.php I make SQL query and retrieve some data which I format in jQuery Mobile style and echo it back.

I know jQuery Mobile does not load head into DOM in subsequent pages, so main.js is also included in index.html head which is landing page of my app. All transitions to new pages are by normal ajax querying (I do not prevent default behaviour).

So what happens? When I navigate to igra.html?battlefield=3 the pageinit event does happen but content which I load via $.get from php page does not get inserted! If I hit F5(refresh) the content does get loaded into page. Can anybody explain and help? :) Thank you!

Upvotes: 0

Views: 388

Answers (0)

Related Questions