How to load HTML content using jQuery and execute JavaScript?

Question

I am trying to create a single page application, and I am using jquery load to replace my content while a navigation item is clicked.

Some pages require to run javascript to initialize the content, and I am trying to figure out how. (In my example, I want to initialize the line chart that is created by chart.js)

In the previous question asked by others, it states to place the code in the call back function of load, but it doesn't work for me, or I am doing something wrong. jQuery .load() html content and execute script

Code:

$(document).ready(function() {


var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function() {
    var href = $(this).attr('href');
    if (hash == href.substr(0, href.length - 5)) {
        var toLoad = hash + '.html #content';
        $('#content').load(toLoad)
    }
});

$('#nav li a').click(function() {

    var toLoad = $(this).attr('href') + ' #content';
    $('#content').hide();
    loadContent();
    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

    function loadContent() {
        $('#content').load(toLoad, '', showNewContent())

    }

    function showNewContent() {

        $('#content').show('fast',loadChartData);

    } //end of show content

    // My javascript to initialize my loaded content, in my case, I am 
    trying to initialize a chart.js line chart.

    function loadChartData(){


        new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
                labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
                datasets: [{
                    data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
                    label: "Africa",
                    borderColor: "#3e95cd",
                    fill: false
                }, {
                    data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
                    label: "Asia",
                    borderColor: "#8e5ea2",
                    fill: false
                }, {
                    data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
                    label: "Europe",
                    borderColor: "#3cba9f",
                    fill: false
                }, {
                    data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
                    label: "Latin America",
                    borderColor: "#e8c3b9",
                    fill: false
                }, {
                    data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
                    label: "North America",
                    borderColor: "#c45850",
                    fill: false
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'World population per region (in millions)'
                }
            }
        });

    }
    return false;
});
});

What should I do?

Answer 1

The load function $(selector).load(URL,data,callback), can have a callback. So, call the initialization function of chart.js in the callback sent to the load function. The DOM must be in place before the initialization.

$('#content').load(toLoad, '', callback);

function callback () {
    // wait for DOM to initialize
    // Initialize content using chart.js 
}