То, что делает мое приложение, загружает список элементов в таблицу через MySQL.
Я могу загрузить таблицу отлично, но мне нужно сделать так, чтобы элементы в таблице могли быть перегруппированы, а их позиции сохранены на сервере MySQL.
Вот главная страница (workshop.php):
<?php require_once("connection.php"); ?> <html> <head> <style type="text/css"> body { position: relative; } #content { width: 742px; height: auto; position: relative; margin-left: auto; margin-right: auto; } </style> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="js/jquery.js"></script> <script src="js/jquery-ui.js"></script> <script> $(document).ready(function() { var fixHelper = function(e,ui){ ui.children().each(function() { $(this).width($(this).width()); }); return ui; }; $("#sortable tbody.contenet").sortable({ helper: fixHelper, stop: function(event, ui) {alert("something changed"); //create an array with the new order order = $.map($(this).find('input'), function(el){ for (j=0; j < $(el).length; j++){ return $(el).attr('id') + '=' + j; } }); var message = ""; for(i=0; i < order.length; i++){ message = message + order[i]; message = message + " "; } alert(message); //sorder = order.serializeArray(); //alert(sorder); $.ajax({ url: "updateworkshops.php", type: "post", data: order, error: function (){ alert("theres an error with AJAX"); }, success: function(){ //alert("Saved."); } }); } }); }); </script> </head> <body> <div id="content"> <p>Click on "+ Create new workshop" to create a new workshop".</p> <p>Click on the name of a workshop to add dates and times for when it is available and/or to make changes to it.</p> <br /> <table> <!--Create Workshop--> <tr> <td width="25%" bgcolor="6BF26B"><a href="create.php">+ Create new workshop</a></td> </tr> <tr><td bgcolor="FFFF00"><a href="settings.php">~ Edit settings</a></td> </tr></table><br /> <form id="pickles" action="updateworkshops.php" method="post"> <table id="sortable"><tbody class="contenet"> <!--List Workshops--> <?php $query = "SELECT * FROM workshops ORDER BY position"; $result = mysql_query($query); while ($row = mysql_fetch_assoc($result)) { echo "<tr bgcolor='{$row['color']}'>"; echo "\r\n"; echo "<td><input type=\"hidden\" id=\"order_".$row['id']."\" name=\"order_".$row['id']."\" value=\"".$row['position']."\" /><label class=\"handle\">[X]</label></td>"; echo "\r\n"; echo "<td><a href='edit.php?workshop_id={$row['id']}'>{$row['name']}</a></td>"; echo "\r\n"; echo "<td>{$row['description']}</td>"; echo "\r\n"; echo "</tr>"; echo "\r\n"; } ?> </tbody> </table> <input type="submit" name="submit" value="Submit" /> </form> </div> </body> </html> <?php mysql_close(); ?> И это страница updateworkshops.php, на которой POST-данные отправляются:
<?php require_once("connection.php"); if(isset($_POST['submit'])) { while(list($key,$value) = each($_POST)){ if(substr($key,0,5) == "order_"){ $id = trim($key,'order_'); $sql = 'UPDATE workshops SET position = '.$value.' WHERE id = '.$id; if(!mysql_query($sql)) { echo "SOMETHING WENT WRONG"; } } } } mysql_close(); ?>
Когда таблица сделана, перемещая элемент, я сделал так, чтобы он оповещал новый массив о том, что он будет POST на странице updateworkshops.php. Когда я это делаю, весь порядок _ # равен 0, и эти значения не сохраняются в базе данных.
Я чувствую, что я что-то пропустил, но за последние пару часов я пытался возиться с этим кодом. Может быть, это не помогает, что я не знаком с Javascript … но я думал, что у меня есть правильная идея.
Попробуйте сделать что-то вроде этого:
var sortable = $("#sortable tbody.contenet").sortable({ helper: fixHelper, stop: function(event, ui) { //create an array with the new order order = $(this).find('input').map(function(index, obj) { var input = $(obj); input.val(index + 1); return input.attr('id') + '=' + (index + 1); }); $.ajax({ url: "updateworkshops.php", type: "post", data: order, error: function() { console.log("theres an error with AJAX"); }, success: function() { console.log("Saved."); } }); } });
Все, что вам нужно сделать, это использовать карту, чтобы петля над входами использовала индекс цикла как порядок. Этот код также обновил входное значение, чтобы иметь новое значение позиции.
Также пришло время узнать об инструментах разработчика firebug или webkit и console.log, а не использовать alert. Предупреждение не является инструментом отладки.