Search jQuery

jQuery Forum

jQuery Mobile

moob.me

jQuery + jQueryMobile = $(document).ready() called twice

in jQuery Mobile • 11 years ago

jQuery in combination with jQuery Mobile causes document ready functions to be called twice. See this example:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body style="background:#ccc;">
<h1>jQuery Loaded Twice!</h1>
<tt><script>$(document).ready(function(){alert("init");})&lt/script></tt>
<script>
$(document).ready(function(){
alert("init");
})
</script>
</body>
</html>

Live at: http://dl.dropbox.com/u/1025963/jqtest.html

Any ideas? There are other users reporting similar issues but none are a simplified as this. Surely I'm doing something wrong...

Replies(9)

moob.me

Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

Nobody? Really? I'd have thought this is a pretty fundamental issue.

watusiware

Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

It IS a pretty fundamental issue: that's the reason for the Big Yellow Box at the top of this page:

http://jquerymobile.com/demos/1.0/docs/api/events.html

AND the fact that perhaps 25% of the posts here ask the same question you just asked...

moob.me

Re: Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

Oops, I guess I should have RTFM! Thanks for the info. I had assumed that pageInit() was required for jQuery Mobile events only. I.E: that I could still use $(document).ready() for my regular jQuery events.

EDIT: There doesn't appear to be any documentation stating how to use pageInit().

$("html").live('pageinit',function() {alert("init");})

still triggers twice.

ollibruen..

Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

i guess it has nothing to do with jquery mobile this time. the problem seems to be that document ready is bound twice. but i might be wrong.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).ready(function() {
alert('1')
});
$(document).ready(function() {
alert('2')
});
</script>
</head>
<body>
test
</body>
</html>

ollibruen..

Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

no, i'm wrong, misinterpreted the html, sorry.

onimusya

Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

Hi,

If you move your <script> within <head> section, it will solve the issue. I believe that jQuery Mobile did execute again certain parts of DOM objects after <head> tag.

Thanks.

Regards,

Francis Hor

csteph9

Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

had the same issue - came across thread. Found the solution after a little digging, might be helpful to some coders.

browser / computer style jquery treats the entire HTML page loaded as the DOM. But JQM treats an individual divs defined as pages, and so the interaction is built around those divs, not the entire page.

so <div id=my_main_page></div> would be a page within your mobile app. And you'll load all your pages in the same single HTML page load. thus creating the issue with the .ready() function noted.

if you turning your old JQ app into an JQM app, just put a "master div" around the entire document (after body and close div before </body>).

something like this:

<html>

<!--

all your head / link stuff here

--/>

<body>

$('#my_main_page').live('pagecreate',function(event)

{

console.log('page created');

}); // not sure if this is required, I put it just so I could see the pagecreate firing.

$('#my_main_page').live('pageinit',function(event)

{

console.log('page init');

//all your original JS can be called from here ...

//and fires once!!!!!!

//this area is like the original $(document).ready() function,

//so do everything here like you did in your old ready() func.

});

</script>

<!--

this is your entire html DOM from before.

--/>

</div>

</body>

</html>

hopefully folks find that helpful!

zSprawl

Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

Use pageinit. :)

---
http://zsprawl.com

pvmjcaboo..

Re: Re: jQuery + jQueryMobile = $(document).ready() called twice

11 years ago

@zSprawl Please do try to read the thread and previous comments before you attempt to answer.

@csteph9 Both .pageinit and .ready are useful here but you have to be careful what order you load the script files. Pageinit will fire every time a page needs to be initialized. For a multipage template site the first time you call .changePage the page is initialized. For normal ajax page calls the page is initializedin the first call.

For .ready to effectivly fire only once, make sure you are loading jquery, then your custom code then JQM.

Example:

<script type="text/javascript" src="./lib/jQuery/jquery-1.7.1.js" ></script>
<script type="text/javascript" src="Main.js" ></script>
... other js files ...
<script type="text/javascript" src="./lib/jQueryMobile/jquery.mobile-1.1.0-rc.1.js"></script>

Another option is to check what page is being loaded in the .pageinit function and run appropriate code for each individual page.

Top Reply

Response title

Attachments

jQuery Forum

jQuery + jQueryMobile = $(document).ready() called twice

Replies(9)

Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: jQuery + jQueryMobile = $(document).ready() called twice

Re: Re: jQuery + jQueryMobile = $(document).ready() called twice

Statistics

Tags

Actions