有条件地调用 Ajax

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>

编辑 除了 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 事件。