CODEWITHSUNDEEP
jquery-mobile
Mustard_Jedi
Mustard_Jedi

Reputation: 25

jquery mobile changePage not working if called from an ajax loaded page

situation:
form1.html has a button
clicking that button calls $.mobile.changePage('../site3/form2.html');
no problem here. all is as expected and the page is loaded. let's call that form2.html

form2.html has 2 sections:
(1) #SiteForm and
(2) #SiteSearched

clicking a button on #SiteForm should call
$.mobile.changePage('../site3/form2.html#SiteSearched');

now here's the weird part. if I load the page form2.html directly and press the button, it works and I see #SiteSearched JQM page.

but, if I start from form1.html, click the button to get to form2.html#SiteForm, then click the button, everything in the attached function executes, except the line calling $.mobile.changePage('../site3/form2.html#SiteSearched');

I know that part is loaded by AJAX by wouldn't the changePage command work?

(note: Form1 may have data filled into the form that I don't want to lose. Form2.html was meant to do a search and throw back the result to Form1 somehow, which is why I am doing things this way.)

Upvotes: 2

Views: 311

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You should read official jQuery Mobile documentation before posting here, everything is explained there, but let me give you a short explanation.

jQuery Mobile has two template solutions, one is multi page and second one is multi html. You already know that because you are mixing them. But, what you don't know is (from the perspective of AJAX page handling):

  • Only first HTML page is fully loaded into the DOM, everything is loaded, including the HEAD content. So if initial HTML page has several data-role="page" <div> containers, every one will load into the DOM.

  • But, every subsequent page is loaded only partially. Basically if you second, third ... page has more then one data-role="page" div containers only first one will load into the <DOM>. jQuery Mobile will discard everything else.

So in your case, if form2.html has:

(1) #SiteForm and (2) #SiteSearched

jQuery Mobile will load only #SiteForm, #SiteSearched will get discarded.

Basically this line will not work:

$.mobile.changePage('../site3/form2.html#SiteSearched');

You can't nit pick specific pages in subsequent pages, as I told you. You can only use this:

$.mobile.changePage('../site3/form2.html');

And jQuery Mobile will show you first data-role="page" occurrence inside form2.html page.

Read more about this here and here.

Upvotes: 1

Related Questions