When I change page using:
$.mobile.changePage('#newPage');
the browser's url changes correctly, but I see blank page, and I have to refresh the page (F5) to see it.
I use PHP to place all pages in one HTML (tiny app, of 3 pages), and tried also:
$.mobile.changePage('#newPage', { allowSamePageTransition:true });
It looks like it starts the animation and then stops for some reason.
More than that: if I go back and forward using the browser's buttons, all pages are displayed blank, unless I refresh.
Any suggestion ?
Related
My scenario is this: I am using WL.NativePage.show(nativePageClassName, backFromNativePage, params) to navigate to an activity. Once returning back to the WebView, I need to navigate directly to other page(Div) in html, rather from the page I originally navigated from to the activity, which is developed using jQuery-Mobile.
See the below example code.
WL.NativePage.show("com.example.SignatureActivity", function(data) {
if(data.goToPage == "example2"){
$.mobile.changePage('#example2-page',{transition: 'none'});
}else{
$.mobile.changePage('#example1-page',{transition: 'none'});
}
});
Here I am using WL.NativePage.show() In example1-page, I have two buttons in activity, one is save and one is back, while saving I need to navigate to example2 and while back, its example1.
I am able to navigate to example2, but example1-page is executing and displaying first and then displaying example2-page.
Please give me suggestions on how to navigate directly to example2-page without displaying example1-page.
You can't navigate directly from the activity to a different place in the DOM which is in the WebView from which you navigated to the activity.
What you could do, is open displaying the activity, also hide the current content in the WebView. I assume it is a DIV essentially - so you could do something with display:none or any other standard method.
That way when the user returns back to the WebView from the activity and the code to change page is executed, you could then play again with the visibility of the DIV to display it when needed.
This way what you don't want to be seen will not be shown.
Please see this jsbin test page that illustrates the issue
I have a simple jqm page with two page divs. The only initialization is being done inside a $(document).on('pageshow', function(){}); block. Inside the block, I initialize a fullcalendar.js calendar.
If I load the page as an external page (the first link in the menu) it loads without a hitch (but it's not using ajax, so the page flickers and there's no transition).
If I load the page using the jqm convention of linking to the id of the second page div with an anchor tag, it loads the calendar div as a page with no data.
If I then refresh the page, the data is displayed. Subsequent use of the menu displays both page divs as pages without issue.
I've seen a lot of discussion about which event of the pagecontainer widget to use, and I'm aware that document.ready() is not the way to go. I've tried all the possibilities, I think (pagebeforeshow, pageshow, pageinit, etc.) There's more detail in the demo, where you can see all the code. If I need to post it here, too, I can do that, but it's easier to see the issue if you load the test at jsbin. I suggest running it in a separate window, so you can refresh the page.
If anyone else has solved this or has an idea what I'm doing wrong, I'd really appreciate the help and / or suggestions.
I put all of the pagecontainer events into my test jsbin code and stepped through them. (Thanks to Gajotres for providing useful documentation on the various pagecontainer hooks). It turns out that the one I needed was 'pagecontainerhide' instead of pageshow, pageinit, or any of the others. Once I modified the code to use that event, the calendar displayed properly on the page div, with transition, and I no longer had to click on refresh to see load the "page".
Since I have all the events there, perhaps others with page change issues can benefit from the test page....
I have a Windows Phone Store app (XAML) with a Page (MainPage.xaml) that has a webview that loads content and URLs. At certain point i have to navigate to a different windows phone page (Page2.xaml), once the data there is submitted i navigate back to MainPage.xaml, but the webview control always reloads the content and user has to reenter the data again.
Is there any way to make a snapshot of the webview and load it when Navigating back to MainPage.xaml?
I have tried the NavigationHelper, but in the onNavigatingFrom event from MainPage when i try to save the Frame.Content, its the Page2 the one being passed in the NavigationEventArgs.
Any ideas?
One way to do it is to never leave the page. To do this, create two grids. One for the webview and one for the other view. When the page loads, show the first grid and hide the second grid. When you want to show the second view hide the first grid and show the second.
I have used this method in several apps on the phone and windows store and you can simulate popups this way as well.
I have a page which displays a calendar/diary and lets you navigate back and forth using a form so the URL often looks like:
calendar.php?&month=6&year=2014
The popup works fine initially before there is any string after the .php. However, once the "&month=" etc is there the popup doesn't work. I note as soon as the popup loads it shows up #&ui-state=dialog in the url.
Is there a simple solution for this? (Other than changing the form to method=post, which I haven't yet tried).
Many thanks.
The simplest solution is to add:
data-history="false"
to your popup <div>. That will avoid URL modification when the popup is open.
sometimes, It will show, sometimes, not, so, how to ensure the ajax loading indicator show in jquery mobile?
Unless there's a major problem in your app, what you have described is a normal situation.
While page transition can take a lot of time (usual page loading/transition time on desktop browsers is 670 ms), page loading into the DOM takes only few miliseconds (usually 3-5 ms). AJAX loader will show only if page loading (into the DOM) takes more then 10ms. Other page transition actions don't count into AJAX call so animation will not be shown after page has been loaded into the DOM.
Actions during page loading/transition:
Page load and processing: 3ms (AJAX loader will show only during this action, if it takes more then 10ms)
Page enhance: 45ms
Transition: 604ms
To read more about this take a look at my other ARTICLE, or find it HERE, search for the chapter called: Page Change Times
One more thing, unless you are using normal page loading AJAX loader will not be show (if your link has an attribute rel="external" or data-ajax="false").
In order to ensure that ajax navigation is done by default Jquery Mobile will add ajax navigation to pages loaded into the DOM so long as you do NOT add the data-ajax="false" attribute to your links and buttons. Otherwise chances are you may have added a global modification that has disabled ajax navigation on certain pages.
OR you could have rel="external" as an attribute in some of your links and buttons, which disables ajax navigation.
If you could be more specific, ie post a jsfiddle example of your problem, I could give you a better explanation. Also please mention what version of Jquery Mobile you are using.
when you do this:
$.mobile.changePage( "#page-home", { transition: "none"} );
add this:
$.mobile.showPageLoadingMsg();
don't forget to add
$.mobile.hidePageLoadingMsg();
at the end of the pageLoad function