JQuery-UI ". Draggable это не функция", ошибка - PullRequest
1 голос
/ 08 июня 2010

Я получаю следующую ошибку (при использовании 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

Ссылка на страницу вопроса: http://www.liamharding.com/pgi/pgi.php

После того, как вы нажмете указанную выше ссылку, следуйте инструкциям: установите флажок 2 R25 + R50 Random Walk, затем нажмите Show/Refresh Graphs. Необходимо отобразить два графика, оба с тонкими горизонтальными красными линиями, которые можно перетаскивать.

Снова откройте панель параметров и отмените выбор R50 Random Walk, теперь снова нажмите Show/Refresh Graphs, 1 график удален, а другой обновлен; Теперь снова выберите R50 Random Walk и нажмите Show/Refresh, R25 graph будет обновлено нормально, затем произойдет вышеуказанная ошибка, и я не могу понять, почему.

Первоначально при отображении первых 2 графиков используется тот же код, и он работает просто отлично.

Ошибка возникает в этой строке:

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

Вот код для 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");

        });
    });
...