SBB SBB - 1 year ago 63
HTML Question

Including contents of external JS file

I may be approaching this all wrong so feedback or suggestions would be very appreciated.

I am building a tool using javascript and jQuery that allows a user to create their own dashboard. The user can select modules that they want to add to the dashboard and re-arrange it as they see fit.

A module could be anything such as a html table or an input that allows them to perform a search.

My goal was to make each module its own JS file so that its easy to keep the logic separate and debug it when needed.

This is what I was working towards, specifically the


// Loop over our modules and create our output
for ( var i = 0; i < moduleData.modules.length; i++){
output += '<li data-sizey="'+moduleData.modules[i].sizeY+'" data-sizex="'+moduleData.modules[i].sizeX+'" data-col="'+moduleData.modules[i].col+'" data-row="'+moduleData.modules[i].row+'" data-min-sizey="'+moduleData.modules[i].minYsize+'" data-min-sizex="'+moduleData.modules[i].minXsize+'">';
output += '<div class="portlet" >';
output += '<div class="portlet-title">';
output += '<div class="caption">';
output += '<i class="'+moduleData.modules[i].moduleIcon+'"></i>';
output += '<span class="caption-subject text-uppercase"> '+moduleData.modules[i].moduleName+'</span>';
output += '<span class="caption-helper"> '+moduleData.modules[i].moduleDescription+'</span>';
output += '</div>';
output += '<div class="actions">';
output += '<a class="btn" name="editModule" data-moduleid="'+moduleData.modules[i].moduleID+'"><i class="fa fa-pencil"></i>Edit</a>';
output += '</div>';
output += '</div>';
output += '<div class="portlet-body">';
$.getScript( "includes/js/modules/"+moduleData.modules[i].moduleID+".js", function(data){
output += data;
output += '</div>';
output += '</div>';
output += '</li>';

// Append our output

The code above fetches the modules that the user selected. It sets up the module block/div where the actual logic will be rendered.

My goal now is to fill those modules with the output of the individual JS files I was trying to fetch.

Any suggestions on a better way to handle this while trying to some how keep the modules all as separate files (assumed this would be the best).

enter image description here

Answer Source

Instead of trying to send .js files you might try if mustache templates work for you, and feed them JSON objects (you can get JSON files from a server without much trouble). I ll give a small example (uses jquery.js and mustache.js)

mustache htmlfile:

<table id="mustacheTable">

html file:

    <p id="person"></p>

JS Mainfile:

$(document).ready(function () {
    $("#templates").load("template.html #mustacheTable", function () {


Mustachelogic from seperate file:

function createTable() {
    var template = document.getElementById('mustacheTable').innerHTML;
    var output = ""
    view.forEach(function (people) {
        output += (Mustache.render(template, people));  
    return output;

// edit after i saw the question was adjusted:

Mustache creates templates, so you want to use templates for whatever module you want to throw at the dashboard, because that way it can be used more than once. You can decide to make every module an own .html file. you can also decide to put the logic working with mustachetemplates in as many javascript files as u want. and just access them as I did in the Mainfile.

If you want to get the javascript file through a function this question fits your problem: Include a JavaScript file in another JavaScript file?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download