Question

我正在运行JQUERY SORTABLE - 然后序列化结果---然后使用AJAX将序列化数组发布到php数据库更新脚本。

一切正常。但是我希望调整AJAX调用（在下面的脚本中显示）只运行一次 - 即当所有SORTABLE排序完成后因此我有一个最终的序列化数组。

序列化和ajax脚本如下所示 - 但每次更新序列化数组时都会发布，而不是在最终数组准备就绪时发布。任何想法都将受到极大的欢迎。（会考虑如何最好地实现HTML BUTTON以手动实现此条件）。

    <script>

                $('ul').sortable({
                        update: function (event, ui) 
                    {
                        var order = $(this).sortable('serialize');      
                         $('span').text(order);//test serialize without ajax-works fine

    //ajax curently runs each time a sort operation is serialised. 
    //I want to run AJAX when I have finished sorting hence serialization.                          
                            $.ajax({
                              url: 'update_gallery_grid.php?propertyid='+ propertyid +'&product='+ product +'&payment='+payment,//url data needs to be GOT on the pageAJAX pots too 
                              type: 'post',
                              data: order, 

                            success:function(result){
                                $(".result").html(order);}, //works but gives serialised array each time serialisation is updated by sortable. No conditionality.                                   
                               error: function(){
                            alert('something bad happened');
                              }

                            }); // end ajax call

                    }

                 });     

    </script>

EDIT 继Twisty的想法之后，我想出了这个编辑过的。但是它现在根本没有发布Ajax - 所以我在移动表单时发布了原始代码（发布了帖子）和这个新编辑。我在这做过傻事吗？

                <script>

                $(function() {
                  $('#saveBtn').button().click(function(e) {
                    e.preventDefault();
                //ajax is not posting on Save. It was posting to php with initial code in question. So Ive messed something up here?
                                $.ajax({
                                      url: 'update_gallery_grid.php?propertyid='+ propertyid +'&product='+ product +'&payment='+payment,//url data needs to be GOT on the pageAJAX pots too 
                                      type: 'post',
                                      data: data,

                                    success:function(result){
                                        $(".result").html(data);},

                                      error: function(xhr, desc, err) {
                                        console.log(xhr);
                                        console.log("Details: " + desc + "\nError:" + err);
                                      }
                                }); // end ajax call
                      });   //end click 

                //following sorts and reports array to $(span) ok     
                 $('#sortable').sortable({
                    //placeholder: "ui-state-highlight",
                    update: function(event, ui) {
                      var data = $(this).sortable('serialize');
                      $('span').text(data);
                    }
                  });
                  $("#sortable").disableSelection();

                });//end function


                </script>

编辑2 Twisty-我已经移动了var数据声明，如下所示。结果是sortable不排序，保存不会在结果div中产生任何结果。

                 $('#sortable').sortable({
                    //placeholder: "ui-state-highlight",
                    update: function(event, ui) {
                    //var data = $(this).sortable('serialize');
                      $('span').text(data);
                    }
                  });
                  $("#sortable").disableSelection();

                 var data = $('#sortable').sortable('serialize');

                });//end function

这是输出字符串，排序现在不像以前编辑那样改变它（虽然没有帖子）。保存时仍然没有结果（没有Firebug post200列表）。

  Query string: item[]=1&item[]=2&item[]=3&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10 Result:

Answer 1

如果要基于按钮实施操作，可以考虑以下事项：

<强>的jQuery

  <script>
  $('#saveBtn').button().click(function(e) {
    e.preventDefault();
    var targetUrl = 'update_gallery_grid.php?propertyid=' + propertyid + '&product=' + product + '&payment=' + payment;
    $.ajax({
      url: targetUrl,
      type: 'post',
      data: {
        json: JSON.stringify(order)
      },
      success: function(result) {
        $('#result').html("<p>Order: " + order + "</p><p>Results: " + result + "</p>");
      },
      error: function(xhr, status, error) {
        $('#result').append("<p>" + error + "</p>");
      }
    });
  });

  $('#sortable').sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {
      order = $(this).sortable('serialize');
    }
  });
  $("#sortable").disableSelection();

  var order = $('#sortable').sortable('serialize');
  </script>

工作示例：https://jsfiddle.net/Twisty/1f1tq1h3/

由于您的示例未包含HTML，因此我使用了jQuery UI Demo。您可以在示例中看到所有内容。我们只是将AJAX活动转移到Click事件而不是Update事件。

有条件地调用Ajax

1 个答案: