1

我有一个带有多个拖放框的页面，效果很好，不起作用的是框中的链接。如果有人可以帮助我，我将不胜感激:)。所以我有一个页面，人们可以在其中拖放框（它工作正常，正如我之前所说），框内的链接也是可排序的，但我似乎无法让它们将值保存到 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 数据库中

4

1 回答 1

0

请参阅下面的示例：

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它，它将更新隐藏的表单字段，然后您可以正常发布。

于 2012-07-27T07:24:25.710 回答