foo123
commented
8 years ago i managed to make this work as following:
The code listens for script onload on snoothState onAfter, when all scripts (if indeed there are any) are loaded, then the jquery.ready mod exec is run (it needs some corrections from the gist) see below
smoothState
onAfter: function( $container, $newContent ) {
// other page stuff here..
// listen for any extra scripts and wait to load before calling onReeady
var numScripts = 0;
$('script', $newContent).each(function(){
var script = this;
if ( script.src )
{
numScripts++;
script.onload = function( ){
numScripts--;
if ( 0 === numScripts ) onReady( );
};
}
});
if ( 0 === numScripts ) onReady( );
}onReady
function onReady( fn ) {
setTimeout(function(){
// trigger ready listeners, if any
// using jquery ready method as mod exec
$.readyFn.execute();
$.readyFn.clear();
if ( fn ) fn();
}, 20);
}jquery.execReady.js
/**
* 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
*
*/
// https://gist.github.com/miguel-perez/476046a42d229251fec3
;(function($){
"use strict";
/** create mod exec controller */
$.readyFn = {
list: [],
register: function(fn) {
$.readyFn.list.push(fn);
},
execute: function(el) {
el = el || document;
for (var i = 0; i < $.readyFn.list.length; i++) {
try {
$.readyFn.list[i].call(el, $);
}
catch (e) {
throw e;
}
};
},
clear: function() {
$.readyFn.list.length = 0;
}
};
/** run all functions */
/*$(document).ready(function(){
$.readyFn.execute();
});*/
/** register function */
$.fn.jqReady = $.fn.ready;
$.fn.ready = function(fn) {
$.readyFn.register(fn);
return this; // this is needed for .ready to work as expected in some cases
};
/** run all functions */
$(document).jqReady(function(){
$.readyFn.execute(this);
$.readyFn.clear();
});
})(jQuery);
i read all about
smoothStateandWP(this is what i'm making right now, for smooth page transitions). i even read the part where any new scripts (of the new page) should be inside the content handled by smoothState (done), still the scripts do not seem to be executing at all (my example is a simple contact form script which is only in one page)And yes, i have even patched the
$.fn.readymethod and all tomod execstyle.Thanks
PS Note that loading every possible script that may be needed in all pages although doable IS NOT AN EFFICIENT OPTION. So i'm asking for ways (if this can be done correctly) for any extra page scripts to be executed correctly on page load.