Question

我有一个带有多个拖放框的页面，效果很好，不起作用的是框中的链接。如果有人能帮助我，我将不胜感激:)。所以我有一个页面，人们可以拖放盒子（它工作正常，如前所述），盒子里面的链接也可以排序，但我似乎无法让它们将值保存到mysql。我认为两个拖放之间存在冲突，也许我做错了，因为我之前没有使用过ajax和jquery。

//here is the jquery where I need to add some ajax
$(function() {
$('.dragbox-content').sortable({ 
  connectWith: '.dragbox-content',
  update: function(event, ui) {
        var order=$(this).attr('id');
        alert(order);  // I get the order alert and it has one value that I need, but I need the sort order aswell                         
  }
  });                 
});

//this is the <div> that has the links in them and mysql query that gets the values
//from two different databases, one is for the boxes and the other for links.
//boxes db id = links title_id
echo '<div class="dragbox-content" id="order'.$widget['id'].'"';'>''</div>';

$sql10 = "SELECT u.*, w.id, w.link_address, w.link_name FROM db_boxes u LEFT 
JOIN db_links w ON u.link_id = w.id  WHERE 
(u.username = '$username' AND u.link_id !='0' AND w.title_id = '".$widget['id']."' 
AND w.link_name !='pilt' AND w.rights = '0') OR 
(u.username = '$username' AND u.link_id !='0' AND w.title_id = '".$widget['id']."' 
AND w.link_name !='pilt' AND w.rights LIKE '%26%') ORDER BY w.id ASC";
      $result10 = mysql_query($sql10) or die (mysql_error());
      while ($row = mysql_fetch_array($result10)) {
        $link_id = $row['id'];
        $link_address = $row['link_address'];
        $link_name = $row['link_name'];
        $title_id = $row['title_id'];
      ?>
      <div class="move" id="<?php echo $link_id;?>">
      <span class="link_style">
      <div><a href="<?php echo $link_address; ?>"><?php echo $link_name;?>     </a></div</span></div>

我只是需要有人告诉我如何在用户在该页面上进行的每次点击时，使用ajax将tile_id和sort_order保存到box数据库

Answer 1

请参阅下面的示例：

http://jsfiddle.net/gRoberts/vMy7r/

$(function () {
    $('ul').sortable({
        update : function(e, ui) {
            var ul = $(ui.item).closest('ul');
            var index = 0;
            var toPost = {};
            ul.find('> li').each(function() {
                index++;
                $(this).find('input').val(index);               
                toPost[$(this).find('input').attr('name')] = index;
            });                  
            $.ajax({
                url : '/echo/json/',
                data : toPost,
                type : 'POST',
                dataType : 'json',
                success : function(resp) {
                    alert(resp);
                },
                error : function() {
                    alert('There was a problem');
                }
            });
        }
    });
});

以上示例可以通过两种方式使用，如果您删除$.ajax，它会更新隐藏的表单字段，然后您可以正常发布。

使用ajax jquery和php保存可排序到mysql

1 个答案: