My jQuery mobile applications consists of multiple pages.
Whenever I reload a page, no matter which page in the application, $(document).ready() function is executed. I expect it only to execute for the main page of the application.
What is going on? I would like it only to run on the main page only.
Please read
http://jquerymobile.com/demos/1.0/docs/api/events.html
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, 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.
Also for jQM page information please read
http://jquerymobile.com/demos/1.0/docs/pages/index.html
Related
I am working on a web application and have pages which gets data asynchronously using ajax call during the page load. These calls does not block the user. When we inspect the page using developer tools (IE and Chrome) it seems that the timing to load the entire page takes more than 26s. Please see the image attached which shows the details of default.aspx. But even before loading the entire page, the user can interact with page.
I need to find a way to identify at which point, the user can interact with page, using some java script event api like DOMContentLoaded. But I am not sure which event is the right one which ensures the user can start interacting with the page even if it is loading data in background using ajax call. Any guidance is appreciated
.
To test if a page is loaded, it is possible to add a "load" event listener on the window:
window.addEventListener ("load", function(){});
But in certain case, this event is never fired even if everything is loaded: imagine that you want to execute some JS when the page is loaded, but this page is not get as usual. It is loaded into an iframe without setting its "src" property but by doing
iframe.contentWindow.document.write ("<!DOCTYPE html><html>...</html>");
In this case, the "load" event is not thrown.
But whatever, inside this page, it is still necessary to be able to known when the page is like "loaded", to begin some js stuff.
Can i assume that if the end of the html is reached, then the page is loaded? If the answer si "yes", then starting the JS in a <script>tag at the end of the page would do the trick...
In other words: in a normal load workflow (by setting the "src" attribute) does some other "init" processes still asynchronously run at the end of the page (like a css engine init process), and the "load" event is fired only when all of these processes terminate? are these processes also present when loading a page by using document.write?
Thank you for your attention.
An answer to the question in the header is no.
Practically DOMContentLoaded fires when </body> is met, but for example some images can still be under loading. window.onload fires after all the content and resources (like images and contents of iframes) of the page have been loaded.
When you write to any document using document.write() after that page has been parsed, write() implicitely opens the document, but it doesn't close it. "Ready" events can't be fired while the document is open. Hence after document.write()(s) you've to close the document manually:
document.close();
With jQuery it's as easy as this:
$( document ).ready(function() {
// Handler for .ready() called.
});
http://api.jquery.com/ready/
That event triggers once the DOM is ready which is most probably sufficient for starting DOM-Manipulations via JS. The onload event on the other hand triggers after all the assets to the page like images are loaded as well and can therefore take a little longer to be triggered.
When the home page loads, $(document).ready works. When I click on a link that goes to the homepage, $(document).ready doesn't fire again.
I need it because I attach some events to the dom inside $(document).ready function. For whatever reason those attached events get removed when I click on the home page link.
How do I fix this?
Any event should be attach outside $(document).ready(), could be before
$(document).on('click', 'mySelector', function(){});
This will fire no matter what
I figured it out. rails 4 uses a js library called turbolinks. This was doing some sort of optimization that changes page without doing a full reload. You can fix this be removing turbolinks or using their own hooks to load scripts.
At first this might seem an odd question, but here's my problem. I'm developing a website that on window.load calculates the div positions as it has some dynamic scroll event highlighting (DOM Ready is the wrong choice for this as images and content isn't loaded yet and the calculate div positions are incorrect when the page has fully rendered.) The local assets run perfectly and are optimised for performance, but my problem is that the client wants social media embeds, for instance a twitter follow and facebook like button. Twitter seems to render pretty quickly, but Facebook takes so long and you can literally lag for about 20-30 seconds before the window.load event is ready, which means my navigation then lags and doesn't work properly. I don't know if it's even possible, but is there a way to determine when all local JavaScript files are loaded (these are included before the closing body tag).
Probably. All JavaScript in a page is executed in the order in which the browser encounters it. So when you add a <script> element as the last element inside the <body> element (i.e. at the bottom of the page), this code will run after all other script code has been executed. Also, at that time, the DOM will be finished (no further HTML to process) except for things that callbacks still might do (timers, onload-handlers).
So what you can try is to put a <script> element between your code and the code from Facebook. But that means your DOM won't be ready.
A better solution is probably to start loading the Facebook code in the background inside of onload. That means all the rest of the page is there and Facebook can take its time.
A customer's site we show in an iFrame is extremely slow (~7s).
We can only provide a JavaScript file the customer will include, but he won't do more than that.
Is it possible for me to hook to all events (forms submitted, links clicked) and display a nice loading animation until the page is fully loaded?
Or can I universally ajax-ify his site?
Once your page is unloaded and the other page starts loading, the code from the original page is no longer available or running so it can't be doing anything and the content from the original page has been cleared so it can't be showing anything.
In that same situation, the next page is in the process of being loaded and it's code is not yet running.
Thus, you cannot use normal page javascript to run something throughout the loading of a new page. To do something like this, you would either have to use frames with progress showing in one frame while content loading in another frame or perhaps use a browser plug-in.
You can know when a page is being unloaded with the beforeunload event, but as soon as the next page starts to load, any code assigned to this will no longer be running and the current document will have been cleared.