jquery mobile changepage ajax,JQuery Mobile changePage

问题

I am designing a JQuery Mobile application and facing one problem there,

I have two pages, page1.aspx and page2.aspx, I have to redirect from page1 to page2. Currently I am using window.location.href for redirection, but it is show loading also in address bar.

In order to avoid this I want to use $.mobile.changePage.

Problem:

Now before redirection I am setting one value in localStorage variable, based on this value on load event of page2.aspx I have to bind the page. It's working fine with window.location.href, but while using $.mobile.changePage it is redirecting but load event is not firing after coming to page2.aspx if I am refreshing the page it is loading.

So my problem is while displaying page2.aspx load event has to fire.

Can anyone tell me why page2.aspx is not loading while using $.mobile.changePage?

If anyone knows the solution, please reply ASAP, its very urgent.

Thanks in advance.

Page1.aspx:

localStorage.setItem("pageCode", "NULLException");

//$.mobile.changePage("../MessageDialog.aspx", "slide", true, true);

$.mobile.changePage("../MessageDialog.aspx", { transition: "slide", changeHash: true, reverse: false });

Page2.aspx:

$('div').live("pageshow", function () {

if (localStorage.getItem("pageCode") != null) {

if (localStorage.getItem("pageCode") == "NullException") {

$('#lblDialogHeader').text("Error");

$('#lblDialogMessage').text("Sorry");

document.getElementById("btnOK").setAttribute("onclick", 'Test()');

}

}

}

HTML

Status

OK

Cancel

回答1:

It seems that when you call changepage specifying a transition, the second page appears to be "injected" into the first one. You can check it easily because $(document).ready(function(){}) does not work in the second page.

I am using Cordova in a Windows Phone 7 application, I changed my script location.href to use $.mobile.changepage() and there was this problem: I wanted that the second page to fire any load event, but none worked (pageshow, pagechange, pagebeforechange, body onload, $(document).ready, etc).

Here are my findings so far that might help you and other people:

the index.html is my start page as follows

function callSecondPage() {

//save my scroll position in index page

var top = $(window).scrollTop();

window.sessionStorage.setItem('top', top);

//go to the second page

$.mobile.changePage("secondpage.html", { transition: "slide", changeHash: true, reloadPage :true });

some stuff here

Call second page

Now the working secondpage.html. Understanding that is not possible to use pagechange or $(document).ready, we notice we can use pageinit to simulate a "page load".

function onLoad() {

//LOL! this does not work using $.mobile.changepage as caller

document.addEventListener("deviceready", onDeviceReady, false);

}

// Cordova is loaded and it is now safe to make calls Cordova methods

//

function onDeviceReady() {

//LOL! this will never run using $.mobile.changepage as caller

// Now safe to use the Cordova API

var top = sessionStorage.getItem('top');

}

$(".my-second-page").live('pageinit', function () {

//LOL! Hey this WORKS! I can see an output in Visual Studio!

console.log('************************* pageinit');

console.log('************************* '+ sessionStorage.getItem('top'));

});

$(".my-second-page").live('pagechange', function () {

//LOL! Again, this is not going to work, well, it does not print an output in Visual Studio!

console.log('************************* pagechange');

console.log('************************* ' + sessionStorage.getItem('top'));

});

App title

your stuff here for second page

Back

My footer

This is a true working sample, if anyone needs I can share a sample project.

回答2:

The events are not the same with changePage, because that method makes an Ajax call to the new url, that's different from the direct call in window.location.href

Did you tried with this method:

$('div').live("pageshow", function()

{

//your code

});

EDIT: Looking at the JQuery Mobile page, I saw that there's and event triggered after the page change.

http://jquerymobile.com/test/docs/api/events.html

来源：https://stackoverflow.com/questions/8153236/jquery-mobile-changepage