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!

So link to the JavaScript file before you use it and reference it. fields : fields If you need to override it, use extend() — epascarello
– epascarello, Commented Jan 27, 2014 at 17:44
@epascarello I tried this but couldn't get it to work. In .js file: fields = { ... }; In page: fields: fields, What am I doing wrong? I loaded the script before the actual script in the page. — Paul
– Paul, Commented Jan 27, 2014 at 17:50

plalx · Accepted Answer · 2014-01-27 17:57:59Z

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 });
});

answered Jan 27, 2014 at 17:57

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xspydr · Accepted Answer · 2014-01-27 17:44:40Z

0

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

answered Jan 27, 2014 at 17:44

xspydr

3,0703 gold badges32 silver badges49 bronze badges

Comments

epascarello · Accepted Answer · 2014-01-27 17:57:33Z

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,
        ...
};

Collectives™ on Stack Overflow

Getting Object Properties From External js File

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related