jQuery sortable label click event is not working

2
votes

I created an list for sort few cities and using jQuery-ui plugin for draggable sorting. The problem is that the sorting is working, but when I try to serialize the values it does nothing and when I check the Chrome dev tools I see the following error:

ERROR: Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'serialize' jquery-1.8.3.min.js:487

v.extend.error jquery-1.8.3.min.js:487 (anonymous function) jquery-ui-1.10.1.custom.min.js:6 v.extend.each jquery-1.8.3.min.js:536 v.fn.v.each jquery-1.8.3.min.js:416 e.fn.(anonymous function) jquery-ui-1.10.1.custom.min.js:6 (anonymous function) dragCity.php:365 v.event.dispatch jquery-1.8.3.min.js:1141 o.handle.u jquery-1.8.3.min.js:1061

PHP/HTML CODE:

<div class="row-fluid" id="sortable_portlets">
      <div class="span4 column sortable">
        <!-- BEGIN Portlet PORTLET-->
        <?php
        $lisres = mysql_query("SELECT `cityid`, `name`, `cityodr` FROM `tbl_city`");
        $count = 1;
        while ($resrow = mysql_fetch_array($lisres)) {
            $ctynme = $resrow['name'];
            $ctyid = $resrow['cityid'];
            if ($count < 10) {
                $sp = "0";
            } else {
                $sp = "";
            }
            ?>
            <label class="portlet" id="drag_<?php echo $ctyid; ?>">
                    <?php
                echo $sp;
                echo $count . " " . $ctynme;
                ?>
                </label>
            <?php
            $count = $count + 1;
        }
        ?>
        </div>
    </div>
    <div id="rush">
    </div>

Script code:

    $("label").click(function() {
        var sorted = $("label").sortable("serialize", {key: "drag"});
            $.post("scripts/check.php", {dash: sorted}, function(data) {
                var res = data;
                $("#rush").html(res);
            });
    });
2
javascriptjqueryajaxjquery-ui
Have you initialized your sortable in the document ready function? Can you set up a fiddle? - Irvin Dominin
no. how do I do that? Little help pls. this is my document ready function. jQuery(document).ready(function() { // initiate layout and plugins App.setPage('grids'); App.init(); }); - Janaka Dombawela
And what do you have in App.setPage('grids'); App.init(); functions? - Irvin Dominin
@IrvinDomininakaEdward : 3000 lines of code. I'm working on responsive template. The App.js is a file from that template which has the setPage and init functions. I found setPage function which is this: setPage: function (name) { currentPage = name; }, - Janaka Dombawela
But are all your label elemets sortable? In your script on what element do you attach sortable() ? - Irvin Dominin

2 Answers

1
votes

I found an answer. You cannot select the child elements as container and sortable element at the same time. Thanks everyone for their time and effort. Here is the full answer: Nest jQuery UI sortables

0
votes

Try this. If it is not working please update fiddle. 

$( document ).ready(function() {
        $("label").click(function() {
            var sorted = $("label").sortable("serialize", {key: "drag"});
                $.post("scripts/check.php", {dash: sorted}, function(data) {
                    var res = data;
                    $("#rush").html(res);
                });
        });
    });