Search jQuery

jQuery Forum

Firing a callback on changePage only in certain circumstances

in jQuery Mobile • 1 year ago

I am trying to find a way to fire a callback on a programatically called changePage,

I cant use onPageCreate etc as I don't want it to happen all the time- only if the function I am writing calls the changePage.

Basically I am creating a menu item with ajax and redirecting to the new item once the request succeeds using changePage. Obviously the menu on the new page reflects the changes. But if I click the back button I go to the cached page which does not have the new menu item in it so it looks like the menu creation did not work properly- to the average user.

So I need it to be that when I changePage from my ajax success function, once the transition is complete, all non active pages in the dom are removed.

I tried putting the changePage in an if but that doesn't fire- I don't want to use pageCreate or init or whatever since I don't want this to happen normally, only as a resuly of the menu item creation function...

Any ideas?

Replies(5)

drmike01

Re: Firing a callback on changePage only in certain circumstances

1 year ago

There's a new callbacks-related set of functions in 1.7, you can read about it here: http://api.jquery.com/category/callbacks-object/ I'm wondering if you might be making it more complicated than it needs to be, though?

Are you using changePage() to go to the same page, and forcing it to reload? Or is this a separate page, but a page that shares the same menu as the originating page, and you want the originating page to have the menu changes reflected in it?

If it's the same page, in my opinion you're probably better off making the changes using jQuery, and then calling the refresh() function (or something similar) to make it all appear. Otherwise, you may get into issues with caching and hitting the back button, although I'm not entirely sure on that. Regardless, I think it would be easier than creating a callback and changePage() function setup.

If it's a different page, I would use a global variable that the changePage() function sets to true to signify that this is coming from a menu creation event, check to see if it's true in the receiving page's pagebeforeshow event, and if so then when it's handled and you modify the menu you set the variable back to false (or something like that). The challenge with that, though, is that the originating menu will not be altered. You can remove() that originating page and cause it to be reloaded, but that would depend on where it's being reloaded from having the new menu item included (this is also a problem with your "remove all the divs" approach you mention above). The other approach is that you could change the menu items across all of the pages by selecting both the visible and invisible menus in the DOM and modifying them, e.g., by using the same classes on them and selecting that class in the selector.

Anyway, you can probably do it with callbacks too, just wanted to offer some other suggestions.

thedavido..

Re: Firing a callback on changePage only in certain circumstances

1 year ago

Fantastic response there! Thanks so much :)

I'll try those suggestions out and post up what I did...

thedavido..

Re: Firing a callback on changePage only in certain circumstances

1 year ago

Great heres what I did.

First of all on document ready I set up a global variable empty dom with window.emptyDOM = false

I also added this to the page hide function of jQm

jQuery(document).on( 'pagehide',function(event,ui){

if(window.emptyDOM == true)

{

var oldPages = jQuery('div[data-role="page"]');

oldPages.each(function(index, item) {

if(jQuery(item).css('display')=='none')

{

jQuery(item).remove();

}

});

window.emptyDOM = false;

}

});

Then in my ajax response before calling pageChange I just set the window.emptyDOM variable to true.

Just like you suggested really- thanks for the tip!

drmike01

Re: Firing a callback on changePage only in certain circumstances

1 year ago

Great, glad to help.

rulldemol..

Re: Firing a callback on changePage only in certain circumstances

3 months ago

Hi,

I'm developing an app using JQM + Phonegap.

In order to avoid device slowdown and crash application, I'm using the JQM single page navigation model because it allows auto DOM size management.

I'm dynamically injecting pages using href="page.html" into the DOM as the user navigates and manually using changePage('page.html') to handle user interactions.

So, as far as I'm conerned, on those pages that use server-data I need to:

      1) Load (inject) new page into the DOM to access target divs/containers
      2) dinamically place new data (append)

Please, take a look into this example for illustrative purposes:

function loadData (myJSONObject){

// inject page
$.mobile.changePage('page2.html');

//load data
for(var i=0; i<myJSONObject.data.length;i++){
name = myJSONObject.data[i].name;
link = myJSONObject.data[i].description;

// #listData is the target container from page2.html
$("<a />",{
    text: name,
    href: link
    }).appendTo(
        $("<li />",{
        id: name,
        }).appendTo('#listData'));
}

This code results in an empty list because the JQM injection function(s) takes longer than loading data due to javascript asynchronous behaviour

**Note that:
- using multipage model and changePage('#target') works
- testing with setTimeOut() and forcing the data loading loop to wait also works but I assume that is not optimal neither a good practise

QUESTION: Is there a callback or way to start loading data only when new page is fully injected so does target availability?

Top Reply

Response title

Attachments

jQuery Forum

Firing a callback on changePage only in certain circumstances

Replies(5)

Re: Firing a callback on changePage only in certain circumstances

Re: Firing a callback on changePage only in certain circumstances

Re: Firing a callback on changePage only in certain circumstances

Re: Firing a callback on changePage only in certain circumstances

Re: Firing a callback on changePage only in certain circumstances

Statistics

Tags

Actions

Related Posts