getting data from MySQL on jquerymobile only when I refresh the page

Question

ok so I'm trying to load data and move to another page once I'm clicking on a search button in my index.html

this is my search button

 <a href="results.html" data-role="button" data-icon="search"
 data-iconpos="notext">search</a>

and while it's loading I want the page to run this function and get data

      $(function () { $.getJSON("API.php", {
         command: "getBusiness",
         orig_lat: myPos.lat,
         orig_long: myPos.lon, 
         distance: 0.05 },

      function (result) { 
         $("#locations").html("");
         for (var i = 0; i < result.length; i++) {
            $("<a href='business.html?ID=" + result[i].id + "&bsnName=" + "'>
            <div>" + result[i].bsnName + " " + (parseInt(result[i].distance * 1000))
            "</div></a>").appendTo("#locations");}});});

The page is loading without the DB only when I hit refresh it's showing me the result

I'm not sure what's wrong here, should I not use getJSON?? I have seen people talking about .Ajax() is it the same as getJSON() ?

is there a better idea on how to move to another page and simultaneously grab data from DB to the page your going to load on jquerymobile?

I tried to use the same function using onclick it worked when I gave it a div

the rest of the head

 <link rel="stylesheet" href="styles/jquery.mobile.structure-1.1.0.min.css" />
    <link rel="stylesheet" href="styles/jquery.mobile.theme-1.1.0.min.css" />
    <link rel="stylesheet" href="styles/my.css" />
    <script src="scripts/jquery-1.7.2.min.js"></script>
    <script src="scripts/jquery.mobile-1.1.0.min.js"></script>
    <script src="scripts/cordova-1.8.1.js"></script>

        <script>

            // Wait for Cordova to load
            //
            document.addEventListener("deviceready", onDeviceReady, false);

            var watchID = null;
            var myPos = { lat: 32.0791, lon: 34.8156 };

            // Cordova is ready
            //
            function onDeviceReady() {
                // Throw an error if no update is received every 30 seconds
                var options = { timeout: 10000 };
                watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
            }

            // onSuccess Geolocation
            //
            function onSuccess(position) {
                var element = document.getElementById('geolocation');
                //myPos.lat=position.coords.latitude;
                //myPos.lon=position.coords.longitude;     

                element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
                            'Longitude: ' + position.coords.longitude + '<br />' +
                            '<hr />' + element.innerHTML;
            }

            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
            }

Answer 1

Basically when jQuery mobile loads first or index page it load whole head section (Javascript, CSS etc) and body section. but When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load).When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element.

There can be multiple solutions to this problem e.g.

• The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page.

• Linking without Ajax by using an attribute data-ajax="false" in your link this attribute will load the next page without ajax and animation so both head and body section would load.

• If you need to load in specific scripts or styles for a particular page, It is recommended binding logic to the pageInit e.g. "#aboutPage" is id="aboutPage" attribute .

   $( document ).delegate("#aboutPage", "pageinit", function() {
     //you can place your getJson script here. that will execute when page loads 
     alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
   });
  

So in your case better solution is to bind your ajax call or other particuler script with pageinit event.

You can get help from these pages of jQuery Mobile documentation.

http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html

http://jquerymobile.com/demos/1.1.0/docs/pages/page-scripting.html