Last active
January 29, 2023 18:04
-
-
Save miguel-perez/476046a42d229251fec3 to your computer and use it in GitHub Desktop.
How to add the ability to re-run $(document).ready() functions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 [email protected] | |
* @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. |
@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
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.