JS for different dynamically loaded content in a fully ajaxed website

Question

This is a completely updated post to explain the problem in a better way with an improved concept an code (based on the answers given here so far)

I try to realize a completely ajaxed website, but I got some problems with multiple bound events.

This is the basic HTML:

<header id="navigation">
    <ul>
        <li class="red" data-type="cars">Get Cars</li>
        <li class="red" data-type="vegetables">Get Vegetables</li>
    </ul>
</header>
<div id="anything">
    <section id="dymanic-content"></section>
</div>

The navigation is been created dynamically (as the content of #navigation can be replaced with another navigation), so the binding for the nav-elements would look like this:

$('#navigation').off('click', '.red').on('click', '.red', function() { 
    var type = $(this).attr('data-type');
    var data = { 'param': 'content', 'type': type };
    ajaxSend(data);
});

The content of the site is also being loaded dynamically. For example there are two different content:

1:

<div id="vegetables">Here are some information about vegetables: <button>Anything</button></div>

2:

<div id="cars"><img src="car.jpg"></div>

While loading the content, I will also load a specific JS-file, which has all the bindings needed, for this type of content. So the loading-script looks like this:

var ajaxSend = function(data) {
    $.ajax({ url: "script.php", type: "POST", data: data, dataType: "json" })
    .done(function( json ) {
        if (json.logged === false) { login(ajaxSend, data); }
        else {
            $.getScript( 'js/' + json.file + '.js' )
            .done(function( script, textStatus ) { 
                $('#result').html(json.antwort);
            });
        }
    });
}

As you pass the parameter for the type of results you need (i.e. vegetables or cars), the result will be shown in #result. Also the files cars.js or vegetables.js would be loaded.

So my problem is to avoid multiple event bindings. This is how I'm doing it:

cars.js:

$('#result').off('mouseover', 'img').on('mouseover', 'img', function () { 
    // do anything
});

vegetables.js:

$('#result').off('click', 'button').on('click', 'button', function () { 
    // do anything
});

Is this the proper way? I think it is just a workaround to use off(). So I would appreciate any improvements!

Furthermore I don't know if there is a problem, if the user clicks on the navigation multiple times: In that case the js-files are loaded multiple times, aren't they? So are there multiple bindings with that concept?

Answer 1

When you refer to a a fully ajaxed website, I think a SPA -- Single Page Application.

The distinction may be semantics, but AJAX implies DOM manipulation, while SPA implies Templating and Navigation.

HTML templates are loaded when your page is loaded. Each template maps to particular navigation route. The major changes are NOT with event mapping, but with which Template is shown, and whether new data has been loaded.

See my example AngularJS SPA Plunkr

AngularJS routing looks like this:

   scotchApp.config(function($routeProvider) {
     $routeProvider

     // route for the home page
     .when('/', {
       templateUrl: 'pages/home.html',
       controller: 'mainController'
     })

     // route for the cars page
     .when('/cars', {
       templateUrl: 'pages/Cars.html',
       controller: 'CarsController'
     })

     // route for the vegetables page
     .when('/vegetables', {
       templateUrl: 'pages/Vegetables.html',
       controller: 'VegetablesController'
     });
   });

So each route has a corresponding HTML Template and Controller (where call back functions are defined).

For CDN purposes, templates can be passed back as JSON

     // route for the vegetables page
     .when('/vegetables', {
       template: '<div class="jumbotron text-center"><div class="row"><h3>Cars Page</h3>Available Cars: <a class="btn btn-primary" ng-click='LoadCars()'>LoadCars</a></div><div class="col-sm-4"><a class="btn btn-default" ng-click="sort='name'"> Make/Model</a></div><div class="col-sm-2"><a class="btn btn-default" ng-click="sort='year'"> Year</a></div><div class="col-sm-2"><a class="btn btn-default" ng-click="sort='price'"> Price</a></div><div class="row" ng-repeat="car in cars  | orderBy:sort"><div class="row"></div><div class="col-sm-4">{{ car.name }}</div><div class="col-sm-2">{{ car.year }}</div><div class="col-sm-2">${{ car.price }}</div></div></div>',
       controller: 'VegetablesController'
     });

• In "templated" applications, HTML of each type is loaded once.

• Events and controls are bound once.

• The incremental changes are JSON being passed back and forth. Your end points are not responsible for rendering HTML. They can be restful and there is a clear Separation of Concerns.

• You can create templated SPA applications with AngularJS, Ember, Backbone, JQuery, and more.

Answer 2

First, I suggest you to pick a framework like AngularJS, as others have proposed.

But, aside of that, you could also consider using namespaces:

cars.js:

$('#result').off('mouseover.cars', 'img').on('mouseover.cars', 'img', function () { 
    // do anything
});

vegetables.js:

$('#result').off('click.vegetables', 'button').on('click.vegetables', 'button', function () { 
    // do anything
});

It would be an improvement (and a bit less workaround), because:

(It would do the work) without disturbing other click event handlers attached to the elements.

-- .on() documentation

Answer 3

You could create a function that takes the name of the page to load and use a single function for loading the pages. Then have the callback function load a javascript file (with a common init function) of the same name. Like:

function loadPage( pageName ) {
  $('#dymanic-content').load( pageName +'.php', function() {
    $.getScript( pageName +'.js', function() {
      init();
    });
  });
}

Or you can pass the callback function name to the function.

function loadPage( pageName, cb ) { 
 $('#dymanic-content').load( pageName +'.php', function() {
   $.getScript( pageName +'.js', function() {
     cb();
   });
 });
}

You could do this with promises instead of call backs as well.

Answer 4

If you going the AJAX way of the web, consider using PJAX. It is a battle tested library for creating AJAX websites, and is in use on github.

Complete example with PJAX below:

HTML:

data-js attribute will be used to run our function, once the loading of scripts is complete. This needs to be different for each page.

data-url-js attribute contains the list of JS scripts to load.

<div id="content" data-js="vegetablesAndCars" data-urljs="['/js/library1.js','/js/vegetablesAndCars.js']">
    <ul class="navigation">
       <li><a href="to/link/1">Link 1</a></li>
       <li><a href="to/link/2">Link 2</a></li>
    </ul>
    <div id="vegetables">
    </div>
    <div id="cars">
    </div>
</div>

Template: All your pages must have as container the #content div, with the two attribute mentioned above.

JS:

App.js - This file needs to be included with every page.

/*
 * PJAX Global Defaults
 */
$.pjax.defaults.timeout = 30000;
$.pjax.defaults.container = "#content";

/*
*  Loads JS scripts for each page
*/
function loadScript(scriptName, callback) {
    var body = document.getElementsByTagName('body')[0];    
    $.each(scriptArray,function(key,scripturl){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = scripturl;
        // fire the loading
        body.appendChild(script);
    });
}

/*
*  Execute JS script for current Page
*/
function executePageScript()
{
    //Check if we have a script to execute
    if(typeof document.getElementById('content').getAttribute('data-js') !== null)
    {
        var functionName = document.getElementById('content').getAttribute('data-js').toString();
        if(typeof window[functionName] === "undefined")
        {
            var jsUrl = document.getElementById('content').getAttribute('data-url-js').toString();
            if(typeof jsUrl !== "undefined")
            {
                jsLoader(JSON.parse(jsUrl));
            }
            else
            {
                console.log('Js Url not set');
            }
        }
        else
        {
            //If script is already loaded, just execute the script
            window[functionName]();
        }            
    }
}


$(function(){
    /*
     * PJAX events
     */
    $(document).on('pjax:success, pjax:end',function(){
        //After Successful loading
        //Execute Javascript
        executePageScript();
    }).on('pjax:beforeSend',function(){
        //Before HTML replace. You might want to show a little spinning loader to your users here.
        console.log('We are loading our stuff through pjax');
    });  
});

vegetableAndCars.js - This is your page specific js file. All your page-specific js scripts will have to follow this template.

/* 
 * Name: vegetablesAndCars Script
 * Description: Self-executing function on document load.
 */
(window.vegetablesAndCars = function() {
    $('#cars').on('click',function(){
        console.log('Vegetables and cars dont mix');
    });
    $('.navigation a').on('click',function() {
        //Loads our page through pjax, i mean, ajax.
        $.pjax({url:$(this).attr('href')});
    });
})();

More explanation:

1. A function name has been attached to the window global js namespace, so that the function can be re-executed without reloading the scripts. As you have figured out, this function name has to be unique.

2. The function is self executable, so that it will execute itself if the user reaches the page without the use of AJAX (i.e goes straight to the page URL).

You might be asking, what about all those bindings that i have on my HTML elements? Well, once the elements are destroyed/replaced, the code bindings to them will be garbage collected by the browser. So your memory usage won't spike off the roofs.

The above pattern for implementing an ajax based website, is currently in production at one of my client's place. So it has been very much tested for all scenarios.

Answer 5

When you are doing $('#navigation').on('some-event', '.red',function(){}); You bind event to the #navigation element (you can see this with $('#navigation').data('events')), but not to the .red-element which is inside that's why when you load new elements with new js-logic you are getting new and old bindings.

If this is possible in your case just use straight binding like $('#navigation .red').some-event(function(){}); for all events which should be removed/reloaded together with elements.

Answer 6

For the most part, everything that you can probably imagine to do in web development, has already been done. You just need to find it and get it to work with your environment. There are a number of issues with your code but there is something else that is bothering me more - why is nobody referring to angularJS or requireJS? There are great benefits to using such frameworks and libraries, which include

• Thousands of tutorials all over the place
• Thousands and thousands of questions on SO
• They (mostly) have amazing plugins which are just ready to go
• They probably have wider functionality as compared to your implementations

And also here are the benefits of using your own code

• You are the only one who understands it.
• Anything?

My point here is that you should use what others have already built, which in 99% of the cases is completely FREE.

Additionally using frameworks like angular you will eventually end up having much cleaner and maintainable code.

Answer 7

With the .off(...).on(...) approach you guarantee that events will be clear before a new bind in case you have multiple .js files binding to the same event (ie: both cars and vegetables have a button click with different logic).

However, if this is not the case, you can use class filters to detect which element already have the event bounded:

$('#result:not(.click-bound)').addClass('click-bound').on('click', 'button', function() { 
     // your stuff in here
});

That way the selector will bind events only to the elements that aren't already decorated with the class click-bound.