Skip to content

Instantly share code, notes, and snippets.

@linssen
Created May 23, 2012 08:23
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save linssen/2773872 to your computer and use it in GitHub Desktop.
Save linssen/2773872 to your computer and use it in GitHub Desktop.
Extending the jQuery Sortable With Ajax & MYSQL
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script><link rel='stylesheet' href='styles.css' type='text/css' media='all' />
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#test-list").sortable({
handle : '.handle',
update : function () {
var order = $('#test-list').sortable('serialize');
$("#info").load("process-sortable.php?"+order);
}
});
});
</script>
<pre>
<div id="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>with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a>
</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>
<form action="process-sortable.php" method="post" name="sortables">
<input type="hidden" name="test-log" id="test-log" />
</form>
<?php
/**
* This is where you would inject your sql into the database
* but we're just going to format it and send it back
*/
foreach ($_GET['listItem'] as $position => $item)
{
$sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
}
print_r ($sql);
?>
@phantom90ro
Copy link

Hello,

i have a dumb question. How can i execute the update for each item in array?

Im referring to the last part (the_php.php) at the array $sql that i want to know how to execute the updates.

Thank you,

@phantom90ro
Copy link

Nevermind i found the solution as $sql[] = mysqli_query($con,"UPDATE 'table' SET 'position' = $position WHERE id = $item");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment