CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Zanmato
Zanmato

Reputation: 235

Jquery Sortable won't alert "order" on update

This should be straight forward, however I'm having real trouble alerting the order of my sortable list.

Here is my JQuery code that I am using:

$(document).ready(function() {
    $("#projectItems").sortable({
        update : function(event, ui) {
            var order = $(this).sortable('toArray').toString();
            alert(order);

        }
    });
});

and here is my HTML of my list:

<ul id="projectItems">
                    <li id="item1" value="<?php echo $studentChoice1; ?>">(1) <?php echo $title[1]; ?><a href='#message1' onclick='deleteProject(".$studentChoice1.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item2" value="<?php echo $studentChoice2; ?>">(2) <?php echo $title[2]; ?><a href='#message1' onclick='deleteProject(".$studentChoice2.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item3" value="<?php echo $studentChoice3; ?>">(3) <?php echo $title[3]; ?><a href='#message1' onclick='deleteProject(".$studentChoice3.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item4" value="<?php echo $studentChoice4; ?>">(4) <?php echo $title[4]; ?><a href='#message1' onclick='deleteProject(".$studentChoice4.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item5" value="<?php echo $studentChoice5; ?>">(5) <?php echo $title[5]; ?><a href='#message1' onclick='deleteProject(".$studentChoice5.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
</ul>

The list is sortable and works, however when the user is finished sorting items it does not display the alert message at all.

Any help here would be greatly appreciated as I've been stuck with this for a few days now and can't seem to find a solution online.

UPDATE The problem seems to be with referencing jQuery

The current version of jQuery I am using is 1.7.1 from google's CDN referenced like below in my script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

however when I changed this to :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

it did not work at all!

Also when I try reference like below it says there is a jquery referencing error!

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" href="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

I have no idea how to fix this issue as it seems to be working fine for everyone else! Any help here would be greatly appreciated.

Upvotes: 3

Views: 3064

Answers (3)

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

It is working fine, check here : http://jsfiddle.net/DHJb7/

$(document).ready(function() {
$("#projectItems").sortable({
    update : function(event, ui) {
        var order = $(this).sortable('toArray').toString();
        alert(order);
    }
});
});

I think you forgot to include jQuery or jQueryUI library. And if you have included them, then check versions of the libraries.

Recommended version: 1.9.1 for jQuery and 1.9.2 for jQueryUI 

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" href="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Upvotes: 2

ZKK
ZKK

Reputation: 531

IT should work. Add jquery ui and jquery library. Just to be clear that you need to change the positions of the items (by drag/drop) to call your desired function (update).

Upvotes: 0

Karthi Keyan
Karthi Keyan

Reputation: 4393

Take a look at this fiddle link, its working fine for me.

         $("#projectItems").sortable({
                update: function (event, ui) {
                    var order = $(this).sortable('toArray').toString();
                    alert(order);

                }
          });

i hope this will help you more.

Upvotes: 0

Related Questions