Question

I’m using the bootstrap datepicker plugin and I need to overload the headTemplate object at the end of the plugin.

That looks like this:

var DPGlobal = {
        modes: [ ... ],
        isLeapYear: function ( year ) {
             [...]
        },
        [...]

        headTemplate: '<thead>'+
                        '<tr class="datepicker-btn-group">'+
                            '<th class="prev"><div class="dp-btn"><i class="timely-icon-arrow-left"/></div></th>'+
                            '<th colspan="5" class="switch"><div class="dp-btn"></div></th>'+
                            '<th class="next"><div class="dp-btn"><i class="timely-icon-arrow-right"/></div></th>'+
                        '</tr>'+
                    '</thead>',
       contTemplate: '<tbody><tr><td colspan="7" class="grid-picker"></td></tr></tbody>'
};

So, admittedly I’m still learning javascript, so I’m trying to wrap my head around why the following code won’t do what I want.

First of all, I need to check that external JS file is loaded and the function is available, I’m attempting to do that with jQuery’s .load() method with a callback. I am getting some reference errors with the document target and I am admittedly confused about best practice for this – really I just want to say

$( 'lib/bootstrap-datepicker/js/bootstrap-datepicker.js' ).load( function() {
 // overwrite/load function 
}); 

but that is throwing a bunch of target/reference errors, so instead, I’m trying the following because the jQuery docs indicate that I need to pass the script I’m checking as the first parameter in a call to the .load() function rather than the target. This often confuses me – referencing things in jQuery when I want to execute a function that is somehow global and does not refer to anything specific (hence the document reference attempt).

$( document ).load( 'lib/bootstrap-datepicker/js/bootstrap-datepicker.js', function() {
    origDPGlobal.headTemplate = DPGlobal.headTemplate;
            DPGlobal.headTemplate = // 'string of HTML for new template';
});

Last thing (sorry for the barrage everyone), is that I’m not understanding how headTemplate is originally declared via colon:

var DPGlobal = {
    [...],
    headTemplate: '// html string',
    contTemplate: '//html string'
};

Do I need to re-declare these as prototypal objects from an array, like this?

DPGlobal[headTemplate] = '// new html string';
DPGlobal[contTemplate] = '// new html string';

Thanks so much for helping a newb!

Answer 1

Couple things:

First, load is used to load the contents of the file into the element. You instead are looking for getScript http://docs.jquery.com/Ajax/jQuery.getScript

Second, the following are the same (just creating objects):

//one way to build an object
var DPGlobal = {
    headTemplate: '// html string',
    contTemplate: '//html string'
};

//another way to build the same object
var DPGlobal = {};
DPGlobal.headTemplate = 'html string';
DPGlobal.contTemplate = 'html string';

You see, that curly braces method just sets properties on the object initially, the same as if you assigned them later.

Third, your guess about how to override the templates is close. You need to use strings if you reference properties in square brackets:

//your way
DPGlobal['headTemplate'] = '// new html string';
DPGlobal['contTemplate'] = '// new html string';

//same as
DPGlobal.headTemplate = '// new html string';
DPGlobal.contTemplate = '// new html string';