Question

This is a user login screen, when login successful I want to show another page, this “kinda” works but after successful login I get a mixture of both pages! it is all overlayed. So only when I refresh the page I can see it properly. I also tried to use jQuery version 1.6.4 but didn’t help.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<script>
   $.ajax({
   ...
   success: function (data){ 

      $.mobile.changePage('account.html'); 
 },
    });
</script>

Also apart from overlay issue on the next page there is a JavaScript code which does not work until I refresh the page.

  $(document).ready(function() {

    $(".infoBasic").click(function() {
     $(this).next('.infoDetails').slideToggle("50");
 });

}); 

Answer 1

A couple of issues here:

jQuery Mobile 1.1 only work with core jQuery verysions 1.6.4 and 1.7.1 while Mobile 1.2 works with core 1.7.0 and 1.8.2

$(document).ready() is not supported. Use $(document).bind('pageinit') instead. http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Your script references should not start with // but http://