-
-
Save miguel-perez/476046a42d229251fec3 to your computer and use it in GitHub Desktop.
| /** | |
| * 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. |
can I use this in any way to re-run ready functions after navigating back?
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?
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.
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.
@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!
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.