Question

我有2个列表，我使用jQuery sortables来组织它们...一个是原始顺序的元素列表，另一个是新排序的这些元素列表的容器。我想将这个新的列表顺序发送到下一页（使用post方法（$ .post？）），但到目前为止还无法使其工作。

感谢这篇文章：jQuery UI Sortable, then write order into a database我已经能够在当前页面上看到（新订单的）数组（查询字符串：item [] = 3＆amp; item [] = 1＆amp; item [ ] = 2＆amp; item [] = 4），但是当我尝试将它发布到下一页时，我的数组是空的......“array（0）{}”。

我是jQuery和PHP的新手，我确信我错过了一些明显的东西......

列表示例：

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<h1>Lists</h1>
<ul id="list2" class="droptrue">
</ul>
<ul id="list1" class="droptrue">
  <li class="ui-state-default" id="item-1"><button>Element 1</button></li>
  <li class="ui-state-default" id="item-2"><button>Element 2</button></li>
  <li class="ui-state-default" id="item-3"><button>Element 3</button></li>
  <li class="ui-state-default" id="item-4"><button>Element 4</button></li>
  <li class="ui-state-default" id="item-5"><button>Element 5</button></li>
</ul>
<br style="clear: both;" />
Query String <div></div><br>

  <button id="goto">continue</button>
</body>

示例脚本：

    $(function() {
    $( "ul.droptrue" ).sortable({
      connectWith: "ul"
     });
    $( "ul" ).sortable({
     handle: 'button',
     cancel: ''
     })
    $( "#list1, #list2" ).disableSelection();
     });
    $(function() {
    $( "button" )
      .button()
      .click(function( event ) {
      event.preventDefault();
     });
    $('#goto').button().click(function(event){
      document.location.href='three.php';
      })
     });
    $(document).ready(function () {
    $('#list2').sortable({
      stop: function (event, ui) {
      var listdata = $(this).sortable('serialize');
      $('div').text(listdata);
      $.post( "three.php", listdata );
        }
      });
    });

CSS：

    #list1, #list2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 100px; background: #eee; padding: 5px; width: 250px; height: 500px;}
    #list2 li button, #list1 li button{ margin: 0px; padding: 0px; font-size: 10px; width: 250px; height: 25px;}

PHP（下一页 - “three.php”）：

    var_dump($_POST) //produces an empty array "array(0) { }"

    //once I can get the array to the next page, I would like to iterate through it
    //and insert it into a database table
    $i = 0;
    foreach ($_POST['item'] as $value) {
    //insert into table column where [id] = $value
    $i++;
    }

如何将jQuery Sortable（序列化）列表发送到新页面？

0 个答案: