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...

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.

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?