Pascal Tremblay Pascal Tremblay - 6 months ago 203
jQuery Question

Reinitializing page scripts after SmoothState.Js page change

I am using SmoothState.js for page transitions and it works fine and loads the new pages with ajax. However, I have JS scripts on each page that need to be reinitialized and I have not been able to get them to always be present on page transitions.


Based on the FAQ:

smoothState.js provides the onAfter callback function that allows you
to re-run your plugins. This can be tricky if you're unfamiliar with
how AJAX works.

When you run a plugin on $(document).ready(), it's going to register
only on elements that are currently on the page. Since we're injecting
new elements every load, we need to run the plugins again, scoping it
to just the new stuff.

A good way to do this is to wrap your plugin initializations in a
function that we call on both $.fn.ready() and onAfter. You'll want to
specify the context each time you initialize the plugins so that you
don't double-bind them. This is called a "module execution
controller".


What my plan has been is to take the functions from my JS files and put them all into an onAfter call inside the SmoothState.js file. That way each time a user changes page, the functions would always be available.

Here the code structure I have now. I've done a lot of digging but I am stuck. Can you help me figure out what I am doing wrong? Thanks for your time!

$(document).ready(function() {
mail();

});

$('#main').smoothState({
onAfter: function() {
mail();
}
});

function mail() {
// script from mail.js goes here
}

$(function() {
$('#main').smoothState();
});

$(function() {
"use strict";
var options = {
prefetch: true,
pageCacheSize: 3,
onStart: {
duration: 250, // Duration of our animation
render: function($container) {
// Add your CSS animation reversing class

$container.addClass("is-exiting");


// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass("is-exiting");

// Inject the new content
$container.html($newContent);


}

},

},
smoothState = $("#main").smoothState(options).data("smoothState");
});

Answer

I am working on a website right now which is similar to what you are doing I think.

The way I have done it is, I have two main functions. The first one contains all the functions that need to run only once ever - ie, the stuff to handle Ajax and POPSTATE changes etc. This function runs the 2nd main function at the end. The 2nd main function is a function that contains functions that need to rerun on page changes, it looks for a specific class or ID tag to be in the contents area of the website before running the functions and attaching event listeners to elements on the newly loaded page.

function mainOne() {
    // Set up Ajax, set up any navigation menus that stay constant through pages etc

    // Also runs the 2nd function so that the functions specific to the page
    //   the code loads up on also get run
    mainTwo();
}
function mainTwo() {
    // Contains functions that are specific to pages that can be loaded via AJAX
    /* ie:
    if( $("element-that-only-exists-once-on-one-specific-page").length == 1 ) {
        // Do stuff specific to only this page
    } */
}

In my AJAX function, I call the mainTwo() with every successful page load.

A novel way of making sure that a function runs only once per element, is to add a class to the element you are attaching an event to, for example:

$("div.objects").not(".processed").addClass("processed").click(function(){
    // Stuff to do in the function
});

From what you quoted there, sounds like my mainTwo() function is pretty much what they want you to set up. Basically a main function to hold all your other functions. If you post more code then I can help you sort it out.