jQuery Sortable List Update Problem

Reedy · 12-16-2011, 01:35 PM

Hi guys,

I have an issue that I hope you can help me with...

I have created a jQuery ".sortable" list that works great but for some reason the "update" function wont work

Here is the code I am using:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#test-list").sortable({handle : '.handle', update : function () {var homepageorder = $('#test-list').sortable('serialize');$("#testinfo").load("process-sortable.php?"+homepageorder);}
   });
});

Does anyone have any idea why the update function isn't running as I just cant figure it out!

Thanks in advance for your support.

Cheers
Reedy

html-tutorials · 12-17-2011, 01:32 AM

Code:

<html>
<head>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#testlist").sortable(
    {
        //handle : '.handle',
        update : function ()
        {
            alert('update ok');
            //var homepageorder = $('#test-list').sortable('serialize');
            //$("#testinfo").load("process-sortable.php?"+homepageorder);
        }
    });
});
</script>
</head>
<body>
<ul id = "testlist" class = "sortable ui-sortable">
<div>abc</div>
<div>abc2</div>
<div>abc3</div>
<div>abc4</div>
</ul>
</body>
</html>

Remove lines in red,

and go from there

Here is a live demo that shows it works: http://www.authenticsociety.com/demo.html

DanInMa · 12-17-2011, 02:35 AM

well in your code you have referenced #test-list and #testinfo, both of which do nt exist on your page.

oh and your using div's instead of li's in your list. and they don't have id's which is apparently needed for the serialize function. your homepageorder string is probabaly not coming out the way you expect it to.

from the api:

Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number".

You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp).

If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.

Reedy · 12-17-2011, 12:21 PM

Hi again,

I don't think I explained my problem well enough and I didnt include enough of my code...

When I use the code as a standalone script it works fine but when I add it to my WordPress website it stops saving to the database.

I have since realised that where the problem is but I don't know what the problem is

I have highlighted in "red" where the problem is:

Main Code:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();

$j(document).ready(function() {
  $j("#test-list").sortable({
    handle : '.handle',
    update : function () {
     var homepageorder = $j('#test-list').sortable('serialize');
      alert('variable is: ' + homepageorder + '');
       $j("#test-info").load("process-sortable.php?"+homepageorder);
    }
  });
});
</script>

<pre>
<div id="test-info">Waiting for update</div>
</pre>
<ul id="test-list">
  <li id="listItem_1"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 1 </strong></li>
  <li id="listItem_2"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 2</strong></li>
  <li id="listItem_3"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 3</strong></li>
  <li id="listItem_4"><img src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item 4</strong></li>
</ul>

process-sortable.php

Code:

<?php
$dbhost							= "*********";
$dbuser							= "*********";
$dbpass							= "*********";
$dbname							= "*********";

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to mysql");
mysql_select_db($dbname);

foreach ($_GET['listItem'] as $position => $item) :
	$query = "UPDATE `homepageorder` SET `position` = $position WHERE `id` = $item";
	mysql_query($query) or die('Error, insert query failed');
	$sql[] = "UPDATE `homepageorder` SET `position` = $position WHERE `id` = $item";
endforeach;

print_r ($sql);
?>

I know that this code wont reorder the list as I am not retrieving the order from the database but it should update the database fields and it isnt.

All I can figure out is that there is a problem somewhere between the "update" function and the "process-sortable.php" file as everything else works and I even get the alert showing the new variable order so I know the update function is running.

Thanks again for any help you can give me.

Reedy · 12-19-2011, 01:28 PM

I have managed to sort this problem on my own, thanks anyway.