Getting Object Properties From External js File

Question

I'm using a jquery script called jTable (www.jtable.org) to implement dynamic tables in my web application. In order to include a table on a particular page, you must include the following code to declare its properties:

<script type="text/javascript">
    $(document).ready(function () {         
       $('#MyTableContainer').jtable({

            //General options comes here

            actions: {
                //Action definitions comes here
            },

            fields: {
                //Field definitions comes here
            }
        });     
    });
</script>

An example of what might go into the fields property:

fields: {
        StudentId: {
            key: true,
            create: false,
            edit: false,
            list: false
        },
        Name: {
            title: 'Name',
            width: '23%'
        },
        EmailAddress: {
            title: 'Email address',
            list: false
        },
        Password: {
            title: 'User Password',
            type: 'password',
            list: false
        },
        Gender: {
            title: 'Gender',
            width: '13%',
            options: { 'M': 'Male', 'F': 'Female' }
        },
        BirthDate: {
            title: 'Birth date',
            width: '15%',
            type: 'date',
            displayFormat: 'yy-mm-dd'
        }
    }

The problem is I use the same table (or very similar tables) throughout my web application. I would like to be able to implement a way to store the fields in an external .js file and then refer to it on each page, thus avoiding copying and pasting. On some pages, I may only include some of the above fields (ex. I may want to exclude Password and EmailAddress) or make slight variations to the fields when I load them (ie. use a different displayFormat (for BirthDate) than the default in the external .js file on a particular page.

Thanks!

Answer 1

You can do this in several ways. Here's a simple one:

main.js

//should be modularized/namespaced
var defaultStudentTableFieldsCfg = {
    ...
};

other-file.js

$(function () {
    var tableFieldsCfg = $.extend({}, defaultStudentTableFieldsCfg);

    //define new column
    tableFieldsCfg.someNewCol = {
        //...
    };

    //remove some column
    delete tableFieldsCfg.Password;

    //override config
    tableFieldsCfg.Gender.title = 'GENDER';

    //it would be better not to hard-code #MyTableContainer here
    $('#MyTableContainer').jtable({ fields: tableFieldsCfg });
});

Answer 2

You could create functions that you put in external JS files. Then those functions could return the JSON objects needed to construct your jTable.

Answer 3

The problem is the fact that you have a JSON object and that can not be just referenced in a JavaScript file. If you want to load the file, you would need to use something like getJSON and than use that with jQuery.

function createTable(fields) {         
   $('#MyTableContainer').jtable({

        //General options comes here

        actions: {
            //Action definitions comes here
        },

        fields: fields
    });     
}

$(function(){
    $.getJSON("YourFields.json", createTable);
});

---

Now what you are trying to do is reference a global variable.

Place the file before and reference the global variable.

<script type="text/javascript" src="YourFields.js"></script>
<script type="text/javascript">
    $(document).ready(function () {         
       $('#MyTableContainer').jtable({
            actions: {
            },
            fields: fields
        });     
    });
</script>

The YourFields.js file should look more like

if (!window.appDefaults) {
    window.appDefaults = {}
}
window.appDefaults.fields = {
        StudentId: {
            key: true,
        ...
};