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

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