Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add the ability to re-run $(document).ready() functions
/**
* Replace jQuery's $.fn.ready() function with a mod exec
*
* Sites that make heavy use of the $(document).ready function
* are generally incompatable with asynchrounous content. The
* the $.fn.ready function only runs once. This script replaces
* the ready function with a module execution controller that
* let's us register functions and execute all of the functions
* as we need them. This is useful after HTML gets injected on the
* page and we want to rebind functionally to the new content.
*
* @author Miguel Ángel Pérez reachme@miguel-perez.com
* @note Should be placed directly after jQuery on the page
*
*/
;(function($){
var $doc = $(document);
/** create mod exec controller */
$.readyFn = {
list: [],
register: function(fn) {
$.readyFn.list.push(fn);
},
execute: function() {
for (var i = 0; i < $.readyFn.list.length; i++) {
try {
$.readyFn.list[i].apply(document, [$]);
}
catch (e) {
throw e;
}
};
}
};
/** run all functions */
$doc.ready(function(){
$.readyFn.execute();
});
/** register function */
$.fn.ready = function(fn) {
$.readyFn.register(fn);
};
})(jQuery);
// To re-run the ready functions just use `$.readyFn.execute();`
// after the new HTML has been injected into the page.
@reformatco
Copy link

reformatco commented Aug 16, 2015

I've tried running $.readyFn.execute(); in the onAfter callback but it never gets fired for some reason. I have tried putting a console.log() inside it and that never gets fired either.

@lezka
Copy link

lezka commented Feb 10, 2016

can I use this in any way to re-run ready functions after navigating back?

@stedmanrh
Copy link

stedmanrh commented Mar 30, 2016

This is working with smoothState, but now I get a page flash when the ready function fires, which defeats the purpose a little bit. Any ideas for a fix?

@whiskeysauer
Copy link

whiskeysauer commented May 20, 2016

What happens if there are included JS files that also have a document.ready section? It seems like the function is not registering the functions inside those. For example, I refresh a child page, and then click the home page and none of the code executes in the document.ready function contained inside a separate JS file. If I refresh the home page, it picks up the functions and registers them. And then it works fine - unless the user refreshed one of the other pages - and then we lose the registrations again.

Is this working as expected? Or am I doing something wrong. I LOVE this smoothstate.js, but I may have to abandon it in my application because there are so many issues with loading up elements.

@whiskeysauer
Copy link

whiskeysauer commented May 20, 2016

I ran a few more tests. Here is what I just discovered. I moved the document.ready functions to the actual default (home) page rather than just including it with a script tag. I moved the functions to a main.js function that is loaded on all pages. I ran the same tests again, and now it DOES work. Wow. Okay, so that tells me that I cannot just include JS scripts that contain document.ready functions and assume that readyExec.js is going to register those functions. It does not do that.

Well, that helps a lot - at least with understanding why this was not working. Now, I just need to find a clean way to make all my functions available on the corresponding pages. I wanted to avoid using a lot of "in-page" document.ready stuff, but I think it will need to be that way.

@spencersmb
Copy link

spencersmb commented Jun 13, 2016

@whiskeysauer Where did you put the "Master" document.ready function in relation to the smoothstate function? Could I look at how you set your file up by chance? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment