Skip to content

Instantly share code, notes, and snippets.

@ricardogaynorgaynor
Forked from linssen/the_includes.html
Created June 26, 2018 10:38
Show Gist options
  • Save ricardogaynorgaynor/fedcff1ecc302c7a5b03e67fcbb5ef91 to your computer and use it in GitHub Desktop.
Save ricardogaynorgaynor/fedcff1ecc302c7a5b03e67fcbb5ef91 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);
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment