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?

It's bad practice to define functions inside events. Take your function definitions even outside `$(document).ready()` and then you can call them where ever you want. — Ahmad Maleki, Sep 18 '17 at 04:35
@AhmadMaleki What makes function defining in event handlers bad practice? — Teemu, Sep 18 '17 at 04:41
In my old code, I had same problem in using `flotChart`. At the first time, I used `$(document).ready()`, but `flotChat` showed nothing. So I changed place where `flotChart` initialized to `$(window).load(function () {})` — Canet Robern, Sep 18 '17 at 04:42
@Teemu Maybe not a bad practice. It just looks like dirty coding to me. _Old habits_ maybe! — Ahmad Maleki, Sep 18 '17 at 12:02
@AhmadMaleki There's really nothing wrogn with defining functions in an event handler. It is just a similar function as any other function. You might mean defining new event handlers in an event handler might be bad practice, or even a source of errors. — Teemu, Sep 18 '17 at 12:05
@Teemu Yes I searched and didn't find any reasons to hate function definitions inside event handlers. Thanks for clarification. — Ahmad Maleki, Sep 18 '17 at 12:16

score 0 · Answer 1 · answered Sep 18 '17 at 04:55

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 
}

How to load HTML content using jQuery and execute JavaScript?

1 Answers1