In my jQuery Mobile I have 2 pages, index.html and test.html. There is a <p> tag in the index page which has a class, so when the <p> tag is clicked on my javascript, it wants to load test.html.
But with jQuery Mobile when the index page loads the test page, it is not in the DOM. So in order to go to the test page and replace the contents of a div in test.html it must first be loaded into the DOM. So here is what I am doing:
When try2 is clicked, I do a load page to get it into the DOM, then I replace the div with the new html, and then I change to the page. The html of the div never changes.
$('.try2')
.click(function(){
$.mobile.loadPage( 'test.html', { showLoadMsg: false } );
$('#mytest').html('i am here now').fadeIn('slow');
$.mobile.changePage( "test.html", { transition: "slideup"} );
});
Pre-fetch the page by using the data-prefetch attribute on a link that points to the second page. Docs: http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html
Then bind to either the pageinit or pageshow event to update the div before the second page is transitioned into view.
Your current code won't work because the first two lines in your event handler are asynchronous, so to use them you would have to utilize the callback functions for the asynchronous functions.
Update
If you want to pre-cache a page but don't have a direct link to the page, you can always create a dummy link and hide it from view:
<a data-precache href="page2.html" style="display:none;"></a>
Related
I've got a two page jQuery mobile app, and within the init function, the following code..
Call to the init function
$(document).on('pageinit', function(){
MyPages.init();
});
init: function() {
$('td[id$="drops"]').each(function() {
console.log("Element: " + $(this).attr('id'));
}),
};
I have elements in page one that match the above, such as '#early_drops', '#late_drops', etc. These elements do not exist on page 2, but when page 2 loads, the elements are displayed in the console just like when page 1 is loaded. What am I missing here?
Thanks very much,
-Adam vonNieda
By default jQuery loads pages using AJAX into the existing page in order to allow the animated transitions. If you don't want this you just need to 'turn off' the AJAX loading.
See description here: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/links/
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with AJAX. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via AJAX.
You can also disable AJAX across the entire app by default using global configuration: http://api.jquerymobile.com/global-config/
I have a parent page call.jsp
on this page i have div tag and i want load this div tag with a page (veh.jsp) that already has jquery ui tabs and all the contents .
Means I just want that page with tab to be loaded in the parent page without writing the code for the jquery tabs on call.jsp.
I got the solution Guys.
As I had said earlier I am having a page Veh.jsp which is having this jquery ui tabs and the contents.
I am having another page call.jsp
On this page i have an tag with id="call" and another tag with id="veh_tabs".
Now I wanted onclick of the tag ,the of the page call.jsp.
But the jquery tabs were coming as normal links not tabs .
i found the solution after carefully going through the jQuery AJAX Methods .load().
The load() method loads data from a server and puts the returned data into the selected element.
$(selector).load(url,data,function(response,status,xhr))
Here,
url: the URL you wish to load(manadatory)
data: data to send to the server along with the request(optional)
Function(): callback function that is executed when the request completes.
the code is as follows:
$("#veh_tabs").load('../veh.jsp>veh_id='+veh_id+'#tabs',(function(){
$("#tabs".tabs({
event:"mouseover"
})
}));
here veh.jsp is the url from which data is loaded
function() is the jquery tabs function which should run after loading the content .
And the id :#tabs specified with a space says that parse the whole document and load the contents only from the element whose id is specified .
For more details on .Load() check this link
http://api.jquery.com/load/
I am trying to execute a snippet of JS only once, after the page has completely loaded and JQM has taken care of all the ui modifications (i.e. listviews, buttons, etc.). I do want it to execute only on that page, and not on subsequent pages.
What I tried first, was pageshow
<script>
$('[data-role=page]').live("pageshow", function() {
alert("Ready!");
});
</script>
This has the problem that the function is now attached to the page div and gets executed every time any subsequent page gets shown. However, I only want this to be executed once, and only for the page that contains that JS snippet.
Is there a way to listen to the pageshow event, without actually attaching the function to it.
The only way I was able to do it was by binding and unbinding like this:
<script>
$('[data-role=page]').bind("pageshow.test", testfun);
function testfun() {
alert("Ready!");
$('[data-role=page]').unbind("pageshow.test", testfun);
}
</script>
But is there a more elegant way to do so?
jQuery has a one function to bind an event handler to be executed only once. Check the reference.
The pageinit event fires once per page just after the jQuery Mobile framework initializes its widgets; I think it may be what you're looking for.
pageinit
Triggered on the page being initialized, after initialization occurs.
We recommend binding to this event instead of DOM ready() because this
will work regardless of whether the page is loaded directly or if the
content is pulled into another page as part of the Ajax navigation
system.
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html
If you want to bind to a specific page and not the rest, then select only the page you want to alter... Here's an example:
<script>
$(document).delegate('#my-page-id', 'pageinit', function() {
alert("PageInit!");
});
</script>
This whole jQuery mobile dynamic data (pulling data from the server) is driving me nuts. Why should it be this difficult to manipulate the DOM and the refresh the page?
I have my page:
<div data-role="page" id="intranet-holidays" data-title="HOLIDAYS" data-add-back-btn="true"></div>
In document.ready I have the following:
$( document ).delegate( "#intranet-holidays", "pagebeforecreate", function() {
$('body').addClass('ui-loading');
$.mobile.loadingMessage = "Loading Holidays...";
$.mobile.showPageLoadingMsg();
// calls getJSON to retrieve data from the web server
loadHolidays();
});
When my data returns back from the server I add collapsible DIVs into my page (intranet-holidays).
Inside of the collapsible DIVs I have some ULs.
I know my syntax is correct because I can grab the generated HTML, save it to a file, then display that file and it all shows correctly. Here is a screen shot:
Here is what my dynamically loaded page looks like (not what I want):
I know that I can refresh a listview with the following:
$('#list').listview('refresh');
That works great for a list.
How do I refresh the page (that contains collapsible DIVs and those collapsible DIVs contains ULs)?
Yes, I want all the data in the page to be dynamic.
In the success handler method of the AJAX call that fetches the JSON data,add $('#intranet-holidays').trigger('create'); after you create the lists.
Try:
$('#page').trigger('create');
Or read:
http://www.elijahmanor.com/2011/02/dynamically-appending-elements-to.html
I'm trying to navigate to a different .html page using
$.mobile.changePage( "PlayGame.html", { transition: "slideup"}, true, true)
PlayGame.html is being transitioned to, however, none of the following are firing:
$(document).bind("mobileinit", function()
{
alert(1);
});
$('#gamePage').live('pageinit',function(event, ui)
{
alert('pageinit');
});
$('#gamePage').live('pagebeforeshow',function(event, ui)
{
alert('booooo');
});
However, if I do window.location.href = "PlayGame.html" then everything fires accordingly.
What am I missing?
Thanks
Tom
If the code in your example is in the <head> of the PlayGame.html document then it will not be included when the jQuery Mobile framework grabs the page via AJAX. That is why your custom code runs when you load the whole page but not when clicking on a link from another page.
You will want to either put your custom JavaScript in a single file and include it on every page (so it will be available no matter what page the user enters your site from) or you will want to move the custom JavaScript for each page into the <div data-role="page"> element for each page (so it will be included when the page is pulled into the DOM).
The reason is that when you click on a link to an external file, jQuery Mobile uses AJAX to pull out the first instance of a <div data-role="page"> element and places that element in the current DOM, everything else in the document is discarded.
Here is some suggested reading about how jQuery Mobile navigation works: http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html