2014-12-03 117 views
0

我有一个可排序的元素网格,它在用户移动元素后将其值更新为数据库。问题是,我不知道如何在不重新加载页面的情况下将以前所有元素的ID更新为新的元素。在PHP中,我会做这样的事情(来自我的一个旧页面的FAQ的代码),但是我不能使用PHP(它必须在没有任何页面重新加载的情况下发生,在用户移动元素后立即发生) :

if ($old_order > $order){ 
    $result = dbquery("UPDATE faq SET orders=orders+1 WHERE orders>='$order' AND orders<='$old_order'"); 
}else{ 
    $result = dbquery("UPDATE faq SET orders=orders-1 WHERE orders>='$old_order' AND orders<='$order'"); 
} 

我想这样做与jQuery,基本上我有ID 7个元素从0到6,每次用户改变位置,我序列化和使用Ajax发送到一个PHP代码,节省了它。

现在能做什么:

  1. 移动elemtent 1至4位。
  2. 保存和作品。
  3. 移动元素3,从第4位2
  4. 移到元素1位回到他的老之一,因为它 的ID仍然是1,而不是4

我想要做什么:

  1. 移动元件1至第4位
  2. 元件1的变化ID从1至4
  3. 更改ID的元素2,3和4由-1到id 1,2和3

我希望有人能理解我并能帮助我。

jQuery代码我actauly使用:

$(".content-page").sortable({ 
    start: function(e,ui){ 
     ui.placeholder.height($(".sorted-icons").outerHeight(true)); 
     ui.placeholder.width($(".sorted-icons").outerWidth(true)); 
    }, 
    placeholder: 'placeholder', 
    items: '.sorted-icons:not(.new_icon)', 
    update: function(e,ui) { 
     var order = $(this).sortable("serialize") + '&order=icons' + '&content_id=' + $(this).attr("data-shortcut-id"); 
     console.log(order); 
     $.post("page_ajax.php", order).done(function(data){ 
      console.log(data); 
     }).fail(function(data){ 
      console.log(data); 
     }); 
    } 
}).disableSelection(); 

HTML代码基本上看起来是这个内容的div这就是内部irelevant:

echo "<div class='sorted-icons' id='icon_$id'>"; 

如果您有任何问题,只是评论和生病尝试回答他们并更新任务。

固定的jQuery:

var i = 0; 
$(this).children('.sorted-icons').each(function(){ 
    $(this).attr('id', 'icon_' + i); 
    i++; 
}); 

仍然有PHP的一部分寿的问题。它将它们保存在奇怪的命令中。

+0

我不明白 - 你能够在这里使用PHP吗? – DaemonOfTheWest 2014-12-03 05:39:52

+0

不,我不得不使用jQuery,因为每次用户移动某个元素时都无法重新加载页面。 – MiChAeLoKGB 2014-12-03 06:01:25

+0

你可以为此创建一个小提琴 – baao 2014-12-03 06:06:43

回答

0

好了,我在我的PHP代码,一个小错误,但我设法解决了jQuery用的代码非常简单PICE:

$(".content-page").sortable({ 
    start: function(e,ui){ 
     ui.placeholder.height($(".sorted-icons").outerHeight(true)); 
     ui.placeholder.width($(".sorted-icons").outerWidth(true)); 
    }, 
    placeholder: 'placeholder', 
    items: '.sorted-icons:not(.new_icon)', 
    update: function(e,ui) { 
     var order = $(this).sortable("serialize") + '&order=icons' + '&content_id=' + $(this).attr("data-shortcut-id"); 
     console.log(order); 
     $.post("page_ajax.php", order); 
     // THIS PART // 
     var i = 0; 
     $(this).children('.sorted-icons').each(function(){ 
      $(this).attr('id', 'icon_' + i); 
      i++; 
     }); 
     // THIS PART // 
    } 
}).disableSelection(); 

希望可以帮助别人。