Member Avatar for florin1

hello guys. I have a html page with jquery drag and drop serialize. Every time i move an item the script auto-updates position in a database. But i don`t want it do update automaticaly, i want to press a button for submision. Can you help me add a button to this? Thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Sortable With AJAX &amp; MYSQL</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.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>
</head>

<body>
<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>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 128 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for stbuchok

Create a button on the page that has a click event and put the code in the update function into the function for the click event. That really should be all you need to do.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.