Javascript Working Only On Page Refresh In Jquery Mobile

I am currently working with jquery mobile with JSP along with Struts. The problem is the javascript function gets called only after the page is refreshed once. The script is placed

Solution 1:

You need to put all of your javascript in the head section AFTER you include jQuery, but BEFORE you call jQuery mobile.

Your head file should look similar to this (custom JS in second file):

<scriptsrc="http://code.jquery.com/jquery-1.7.1.min.js"type="text/javascript"></script><scripttype="text/javascript"src="http://www.example.com/path-to-file/custom-javascript.js"></script><scriptsrc="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

UPDATE

On the link to the page, add the attribute data-ajax="false". If you'd like to disable Ajax navigation site-wide, put the following code in your Custom JS file:

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
    ajaxEnabled: false
  });
});

Here's a link to the docs: http://jquerymobile.com/demos/1.1.1/docs/api/globalconfig.html

Solution 2:

For me worked put data-ajax="false" on all the links to the page that contains the script.