I want to do something every time a page loads. It's something that fixes the way the mobile site looks on different devices so it needs to happen on AJAX loads too.
At the moment, I've tried the traditional $(function(){ /*...*/ }); approach but that only works on the first load, and not subsequent AJAX loads.
I've been looking for the right event to bind to but I'm failing pretty hard.
You can use JQuery to bind to each "page" (div's set with the data-role=page attribute) and use the pageshow event (there are some others as well: pagebeforeshow, pagehide, pagebeforehide).
$(document).delegate('.ui-page', 'pageshow', function () {
//Your code for each page load here
});
http://api.jquerymobile.com/pageshow/
Note: this answer was written for jQuery Mobile 1.0.1, see the documentation link above for more information.
You can listen to the pageshow or pagecreate event and do your work there.
http://jquerymobile.com/test/docs/api/events.html
Related
I load jQuery Mobile on my site when I am only on a mobile touchscreen device. When I do though. It messes up everything. For example, select menus don't work quite right, as well, the words "loading, loading, undefined" appear at the bottom of the page. I know I am missing something but do not know what.
Any ideas on what I could be missing?
Thanks
EDIT: Okay, So I took out all scripts that I am running except for jQuery and jQuery Mobile. I call jQuery first, then jQuery Mobile. It still breaks aspects of the site.
What it breaks:
- I cannot navigate to any other page via the navbar, if I click on a nav item, and look in the url, the correct url appears (with a # in it) like: /#/about-us/ Then, it just redirects to the home page and the page goes white
Select menus have weird results. It prints out whatever is in the select right beside it. And if you in landscape mode on the ipad and you click on the select, it sends you to the bottom of the page (weird).
it prints out 'loading' twice and 'undefined' once at the bottom of the page
All I have for scripts are jQuery and jQuery Mobile. I should also mention that I am using wordpress so it might have enqueued some other scripts (I have deregistered Wordpress' version of jquery and enqueued my own)
Anyone else experiencing these problems?
jQueryMobile replace your normal links with Ajax one, so every page can be loaded by the ajax, text on docs page:
(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
If you want to disable single link to be loaded by the ajax you should write something like this:
<a href="/some_page" data-ajax="false" >link</a>
or do it globally:
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
jm also does replacement on other elements so you should try using data-role attribute, for example:
<select id="test" data-role="none">
to disable replacing this element.
For those like me where
$.mobile.ajaxEnabled = false;
did not work and the whole page layout seems still broken:
For me this one works (- set it inline before loading the jquery mobile file):
<script>
// Preload configuration
$( document ).on( "mobileinit", function() {
$.mobile.autoInitializePage = false; // This one does the job
});
</script>
Furthermore if you want to disable jQuery mobile automatic link and form handling via ajax, set (as dvk3 said) ajaxEnabled to false and pushStateEnabled to false as recommended:
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled
For further information see: http://api.jquerymobile.com/global-config/
I'm using v1.4.5
Same happened to me by mixing mobile with other frameworks. Fixed issue but getting custom build of jQuery.mobile. My case was that I needed swipe for touch devices only so used custom min file and nothing was broken after that.
It really depends if you need jQuery.mobile or you need just a certain functionality, Widgets, events? Use custom version that you can build yourself.
You can make and download yours here : http://jquerymobile.com/download-builder/
I hope it worked for you too guys!
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>
I'm trying to get a getJSON result to update an HTML element on page load, within a jquery mobile loaded website.
Now, I've read I should not rely on ready(), but bind to pageInit. So I tried, but it just won't work. I've tried many other events that could be logical to try within the API event documentation, without any success.
The closest I come to success is after the page is loaded, via ajax, if I refresh the page manually (with the browser's refresh button), getJSON does update the corresponding HTML element. And you guess, it's not what I want to achieve. Here is what the code looks like now, and where it is placed...
<div data-role="page">
<script>
$( '#pageContainer' ).live( 'pageinit',function(event){
//an alert() here does fire right before the page is shown in the browser
//here is the getJSON code.
});
</script>
Now, I need help to try to figure how to make it work. I only want an element X in the page to update with the text returned from a jSON when the page appears in the browser! Like a normal ready() function would have done !
(Maybe it is relevant to specify I'm running RC2 ?)
If you can't use JSONP here, have you tried setting a setTimeout()? You have to trigger a callback after the json object is loaded so timing is essential.
I am using a master page on a JQuery-Mobile app that have few controller , and I want to set up a Javascript call to an initialize function on every page even when it loads through Ajax,
Iam sure there are few ways to do that, but whats the best approach and what would be the alternative to $(document).ready when the page is called through ajax instead of being directly loaded without that.
takepara's answer is correct, but...
If you want to modify the content of the page you will have to bind earlier.
Take a look at beforepagecreate event.
If your handler for this event returns false, then no JQM widgets and styles will be applied and you can work with it manually.
jQuery Mobile Docs - Events
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
or
$(document).bind("pageshow".function(){
// initialize code here
});
How can I call a JavaScript function while using jQuery Mobile?
Just like you would any other JavaScript function (considering jQuery IS JavaScript):
var myFunction = function(param1, param2){
// Do some work
}
myFunction(myValue, myOtherValue);
The same way you call a Javascript function without jQuery mobile.
This is not an answer to the question, but it adresses the OP needs.
When a page is loaded by jquery mobile, it is fetched with AJAX, so there is no DOMready anymore. Also - the contents of the page's head are not loaded. You have to put your code in a file and link it to all the pages. Then write pageshow event handlers.
Pages that jquery mobile loads in are always tagged with a data-url atribute. To get something done when the page is being displayed (just like it used to be with DOMready) you can:
$("div:jqmData(url='thatone.html')").live('pageshow',function(e){
//stuff
});
And this definition can be anywhere in the main page or in external scripts. It requires jQuery to be loaded. Thanks to the live method it doesn't require the page to exist before the event happens, or even at all.