jquery-ui .draggable is not a function error
- by niczoom
I am getting the following error (using Firefox 3.5.9):
$("#dragMe_" + myCount).draggable is not a function
$("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' }); Line 231
http://www.liamharding.com/pgi/pgi.php
Link to page in question : http://www.liamharding.com/pgi/pgi.php
For example, click the 2 checkbox's 'R25 + R50 Random Walk' then click Show/Refresh Graphs. Two graphs should be displayed, both with draggable thin horizontal red lines.
Re-open the options panel and de-select R50 Random Walk, now click Show/Refresh Graphs again, 1 graph is removed and the other updated; now re-select R50 Random Walk and click Show/Refresh, you will find the still checked R25 graph gets updated ok the above error occurs and i cant figure out why.
Initially, when displaying the first 2 graphs it uses the same code and it works just fine.
The error occurs on this line:
//********* ERROR OCCURS HERE **********
$("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });
Here is the code for the Show/Refresh Graphs.click() event:
$("#btnShowGraphs").click(function(){
// Hide 'Options' panel (only if open AND an index is checked)
if (IsOptionsPanelOpen && ($("#indexCheck:checked").length != 0)) {$('#optionImgDiv').click();};
var myCount = 0;
var divIsNew = false;
var gif_loader_small = '<div id="gif_loader_small"></div>';
var gif_loader_big = '<div id="gif_loader_big"></div>';
$("input:checkbox[id=indexCheck]").each(function() {
if (this.checked) {
// check for an existing wrapper div for the current forex item, using the current checkbox value (foxex name)
if ( $("#"+this.value).length == 0 ) {
console.log("New 'graphContainer' div : "+this.value);
divIsNew = true;
// Create new divs for graph image, drag bar and heading
var $structure = " \
<li id=\""+this.value+"\" class=\"graphContainer\"> \
<div id=\"dragMe_"+myCount+"\" class=\"dragMe\"></div> \
<div id=\"image_"+myCount+"\" class=\"image\"></div> \
<div id=\"heading_"+myCount+"\" class=\"heading\"></div> \
</li> \
";
$('#graphResults').append($structure);
// Hide dragMe DIV
$('#dragMe_'+myCount).hide();
// Make 'dragMe' draggable div
//********* ERROR OCCURS HERE **********
$("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });
}
// Display small loading gif
$(gif_loader_small).clone().appendTo( $(this).parent() );
// Display large circular loading gif
var $loader = $(gif_loader_big);
// add temporary css attributes onto existing graph divs as they need to be displayed diffrently
if(!divIsNew){
console.log("Reposition existing 'gif_loader_big' div");
$loader = $(gif_loader_big).css({
"position" : "absolute",
"top" : "35%",
"opacity" : ".85"});
}
// add newly styled big-loader-gif to index div
$loader.clone().prependTo( $("#"+this.value) );
// Call function to fetch image using ajax
get_graph(this, myCount, divIsNew);
} else {
// REMOVE 'graphContainer' DIVS NOT CHECKED
// check for div existance
if ( $("#"+this.value).length != 0 ) {
console.log("DESTROY: #dragMe_"+myCount+", REMOVE: #"+this.value);
// DESTROY draggable
//$("#dragMe_"+myCount).draggable("destroy");
// remove div
$("#"+this.value).remove();
}
}
// reset counters and other variables
myCount++;
divIsNew = false;
console.log("Complete: "+this.value+", NEXT index");
});
});
