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");
});
});
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://