Question

I am customising a plugin that has array (if that is what is it) that holds config items:

        var config = {
            width:  "100%",
            height: "100%",
            source: 'js/timeline/test.json',                
            css:    'js/timeline/compiled/css/timeline.css',    
            js:     'js/timeline/compiled/js/timeline-min.js'   
        }

What I want to do is take the source: data and replace it with a variable eg:

var mysource = 'path/to/source.json';

var config = {
                width:  "100%",
                height: "100%",
                source: mysource ,              
                css:    'js/timeline/compiled/css/timeline.css',    
                js:     'js/timeline/compiled/js/timeline-min.js'   
            }

But as it above it does not work. Can anyone point me in the right direction? Thanks

EDIT: Added full code as requested

$(function() {

    $.getJSON('http://www.mysite.com/json.php',

    function(data) {

        jsonObject = eval(data);
        var eventdata = jsonObject.tlall;

    });

}); //END ON LOAD

var config = {
    width: "100%",
    height: "100%",
    source: eventdata,
    //source: 'js/timeline/test.json',
    //start_at_end: true,   //OPTIONAL              
    //hash_bookmark: true,  //OPTIONAL              
    css: 'js/timeline/compiled/css/timeline.css',
    js: 'js/timeline/compiled/js/timeline-min.js'
}​

Answer 1

I don’t know how exactly you plan to use config, but you certainly need it to be within the same scope in order to access eventdata. I would say get rid of that altogether, and just add it as a property of the object in the ajax callback (shown in code below).

The difficulty here is that you are stuck waiting on the AJAX callback to fire before you can use config in your scripts; this is why ajax is designed to be used with callbacks executed after a particular event rather than linearly; I would advise you to use config only within that success callback, or add a check to see if getJSON has finished executing.

$(function() {

    var config = {
        width: "100%",
        height: "100%",            
        css: 'js/timeline/compiled/css/timeline.css',
        js: 'js/timeline/compiled/js/timeline-min.js'
    };

    $.getJSON('http://www.mysite.com/json.php', function(data) {
        jsonObject = eval(data);
        config.source = jsonObject.tlall;
    });

}); //END ON LOAD​​​​​​​​​​​​​​​​