Error in Firefox + IE8 “ .draggable is not a function ”

Error in Firefox + IE8 “ .draggable is not a function ”

I am getting the following error displayed in Firebug using Firefox 3.5.9, error also in IE8. Chrome works great, no problems at all.

  1.     $("#dragMe_" + myCount).draggable is not a function
  2.     $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });  Line 231
  3.     http://www.liamharding.com/pgi/pgi.php
 

Link to page in question : http://www.liamharding.com/pgi/pgi.php

Once you click the above link, follow along: 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`, the `R25 graph` gets updated ok, then the above error occurs and i cant figure out why.

Initially, when displaying the first 2 graphs it uses the same code to create the 'draggable' divs and it works just fine.

Now, if I "remove" the use of 'jquery-ui' for my easing animation & draggable lines over the graphs the page works perfectly in Firefox+IE8, as in this url: " liamharding.com/pgi/pgi2.php "

So something to do with jquery-ui in this page ??? I'm not sure where to go from here.

The error occurs in this line (from the code below):

  1. //********* ERROR OCCURS HERE **********
  2. $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });


Here is the code for the `Show/Refresh Graphs.click() event`:

  1.     $("#btnShowGraphs").click(function(){
  2.             // Hide 'Options' panel (only if open AND an index is checked)
  3.             if (IsOptionsPanelOpen && ($("#indexCheck:checked").length != 0)) {$('#optionImgDiv').click();};
  4.            
  5.             var myCount = 0;
  6.             var divIsNew = false;
  7.             var gif_loader_small = '<div id="gif_loader_small"></div>';
  8.             var gif_loader_big = '<div id="gif_loader_big"></div>';
  9.            
  10.             $("input:checkbox[id=indexCheck]").each(function() {
  11.    
  12.                 if (this.checked) {
  13.                     // check for an existing wrapper div for the current forex item, using the current checkbox value (foxex name)
  14.                     if ( $("#"+this.value).length == 0 ) {
  15.                        
  16.                         console.log("New 'graphContainer' div : "+this.value);
  17.                        
  18.                         divIsNew = true;
  19.                         // Create new divs for graph image, drag bar and heading
  20.                         var $structure = " \
  21.                             <li id=\""+this.value+"\" class=\"graphContainer\"> \
  22.                                 <div id=\"dragMe_"+myCount+"\" class=\"dragMe\"></div> \
  23.                                 <div id=\"image_"+myCount+"\" class=\"image\"></div> \
  24.                                 <div id=\"heading_"+myCount+"\" class=\"heading\"></div> \
  25.                             </li> \
  26.                         ";
  27.                         $('#graphResults').append($structure);
  28.                         // Hide dragMe DIV
  29.                         $('#dragMe_'+myCount).hide();
  30.                         // Make 'dragMe' draggable div
  31.                        
  32.                         //********* ERROR OCCURS HERE **********
  33.                         $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });
  34.                     }
  35.                    
  36.                     // Display small loading gif
  37.                     $(gif_loader_small).clone().appendTo( $(this).parent() );
  38.                    
  39.                     // Display large circular loading gif
  40.                     var $loader = $(gif_loader_big);
  41.                     // add temporary css attributes onto existing graph divs as they need to be displayed diffrently
  42.                     if(!divIsNew){
  43.                        
  44.                         console.log("Reposition existing 'gif_loader_big' div");
  45.                        
  46.                         $loader = $(gif_loader_big).css({
  47.                             "position" : "absolute",
  48.                             "top" : "35%",
  49.                             "opacity" : ".85"});
  50.                     }
  51.                                    
  52.                     // add newly styled big-loader-gif to index div
  53.                     $loader.clone().prependTo( $("#"+this.value) );
  54.                                    
  55.                     // Call function to fetch image using ajax
  56.                     get_graph(this, myCount, divIsNew);
  57.                
  58.                 } else {
  59.                     // REMOVE 'graphContainer' DIVS NOT CHECKED
  60.                     // check for div existance
  61.                     if ( $("#"+this.value).length != 0 ) {
  62.    
  63.                         console.log("DESTROY: #dragMe_"+myCount+", REMOVE: #"+this.value);
  64.    
  65.                         // DESTROY draggable
  66.                         //$("#dragMe_"+myCount).draggable("destroy");
  67.                         // remove div
  68.                         $("#"+this.value).remove();
  69.                     }
  70.                 }
  71.                 // reset counters and other variables
  72.                 myCount++;
  73.                 divIsNew = false;
  74.                
  75.                 console.log("Complete: "+this.value+", NEXT index");
  76.                
  77.             });
  78.         });


  [1]: http://www.liamharding.com/pgi/pgi.php