Timeglider does not let me destroy all variables with the given function

Question

I'm not that advanced with jQuery widgets and I have no idea how to access the destroy function. You can find that function from an older version here: https://code.google.com/p/codeset/source/browse/trunk/web/timegliderExample/js/timeglider/timeglider.timeline.widget.js?r=4

Usually you create timeglider with:

tg1 = $("#timelinearea").timeline({...

and so I tried to access that destoy function as well:

tg1 = $("#timelinearea").timeline.destroy();
tg1 = $("#timelinearea").destroy();
tg1.destroy();

But console always says function is not found. How can I access that function?

Console output

"350px" timeline.js:44:8
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
"0px" timeline.js:44:8
"350px" timeline.js:44:8
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
"0px" timeline.js:44:8
"350px" timeline.js:44:8
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
"0px" timeline.js:44:8
"350px" timeline.js:44:8
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43
Array [ "titlebar:", "hiddenBar" ] ba-debug.min.js:27:43

I don't think that is normal that the output is always multiplied. I use the timeslider on a div that I slide out and in. So that is what th 0px and 350px means. Doing when sliding out I delete the object. And by sliding in I read a json file.

Answer 1

I solved it by using the official methods. So first of all they did not work because timeglider still has issues with using the latest jQuery release somehow. So I'm now using the latest 1.* jQuery release and that works great with timeglider anyway.

So as I said this allows me to use the official methods now. First of all I initialized timeglider with:

function initializeTimeline(jsonfile) {
    tg1 = $("#timelinearea").timeline({
        "min_zoom":20,
        "max_zoom":60,
        "image_lane_height":10,
        "icon_folder":"timeglider/icons/",
        "data_source":"json/" + jsonfile,
        "constrain_to_data": true,
        "show_footer": false,
        "display_zoom_level": true
    });
    tg_instance = tg1.data("timeline");
};

and now I was able to use tg_instance and changed the file for instance with:

tg_instance.loadTimeline("json/someOtherData.json", function(){debug.log("cb!");}, true);

For sure the callback is not needed.

So just load the initialize method one time and never again and all is fine.