AJAX 完成后运行 SQL 查询

Question

我目前有 2 个 html 下拉菜单。一旦我从一个中选择，它会过滤我的 HTML 表中的数据并根据选择显示数据。我还可以对每一行进行更改，并通过单击保存按钮运行更新表的更新查询。在运行该更新之后，我希望它重新运行用于根据下拉选择过滤结果的相同查询，以便您可以在单击保存并运行后查看您选择的最新结果更新声明。现在，你可以看到我有 window.location.href = window.location.href;在我的 AJAX 函数中的成功回调下，但这会重新加载整个页面并运行在页面加载时显示的默认查询，所以这对我不起作用。

我在下拉选择后过滤表格结果的所有查询都在我的dropdown-display.php 页面中，一旦我选择某些内容就会调用该页面。

HTML 下拉菜单：

<form name="testForm" action="">
    <select id="collector">             
        <option value="" selected="selected" disabled="disabled">Collector Name</option>
        <?php foreach($collect->fetchAll() as $name) { ?>
            <option class="choice" value="<?php echo htmlspecialchars($name['Collector Name']);?>"><?php echo $name['Collector Name'];?></option>
        <?php } ?>
    </select>


    <select id="date">              
        <option value="" selected="selected" disabled="disabled">Bill Date</option>
        <?php foreach($bill_date->fetchAll() as $date) { ?>
            <option class="choice" value="<?php echo $date['Date'];?>"><?php echo $date['Date'];?></option>
        <?php } ?>
    </select>
</form>

JavaScript (index.js)：

$(document).ready(function () {

    $('.save').click(function (event) {

        var $row = $(this).parents('tr');
            var acct = $row.find('td[name="account"]').text();
            var date = $row.find('td[name="date"]').text();
            var checked = $row.find('input[name="selected"]').is(':checked');
            var currency = $row.find('input[name="currency"]').val();
            var datepicker = $row.find('input[name="datepicker"]').val();
            var notes = $row.find('textarea[name="notes"]').val();
            var paid = $row.find('input[name="paid"]').is(':checked');

    var request = $.ajax({

          type: "POST",
          url: "update.php",
          data: { acct: acct, date: date, checked: checked, currency: currency, datepicker: datepicker, notes: notes, paid: paid },
          success: function(data){
              alert('Row successfully saved');
              //window.location.href = window.location.href;
              }
            });

        });

    });

这是我的 javascript，在我的主 index.php 页面的 head 标记中运行：

function showUser(collector,date) {
  $('#billing_table').hide();
  if (collector == "") {
      document.getElementById("txtHint").innerHTML = "";
      return;
  } else {
      if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;

            var newTableObject = document.getElementById('billing_table');
            sorttable.makeSortable(newTableObject);

        }
    }

    $.ajax(
      "dropdown-display.php"
      ,{
        data:{
          q:collector,
          data:date||undefined
        }
      }
    ).then(
      function(responseText){
        $("#txtHint").html(responseText);
        sorttable.makeSortable($('#billing_table')[0]);
      }
      ,function(error){
        console.warn("something went wrong:",error);
        debugger;
      }
    )

  }
}

$(document).ready(function(){

    $("#collector, #date").change(function(e){
    showUser(
      $("#collector").val()
      ,$("#date").val()
    );
  });

    $("#collector").change(function(e){
        $.post('index-ajax.php',{filter:'Name',by:$(this).val()},function(data){
            $("#date .choice").hide();
            $.each(data, function(key,row) {
                $("#date option").filter(function(i){
                    return $(this).attr("value").indexOf( row.item ) != -1;
                }).show();
            });
        },"JSON");
    });

});

Answer 1

你可以像这样在ajax响应成功后绑定事件：

$(document).ready(function () {
   $('.save').click(function (event) {
      var $row = $(this).parents('tr');
      var acct = $row.find('td[name="account"]').text();
      var date = $row.find('td[name="date"]').text();
      var checked = $row.find('input[name="selected"]').is(':checked');
      var currency = $row.find('input[name="currency"]').val();
      var datepicker = $row.find('input[name="datepicker"]').val();
      var notes = $row.find('textarea[name="notes"]').val();
      var paid = $row.find('input[name="paid"]').is(':checked');

            var request = $.ajax({
        type: "POST",
        url: "update.php",
        data: { acct: acct, date: date, checked: checked, currency: currency, datepicker: datepicker, notes: notes, paid: paid },
        success: function(data){
          alert('Row successfully saved');
          $('#chdir select').bind('change', getDirs); // this is use for example like change of select 
        }
      });
   });
});

function getDirs(){
  //any functionality you want
}

Answer 2

您需要将过滤器（在您的 Ajax 调用中）作为参数发送到获取结果的页面。您可以将它们命名为collector_sel 和date_sel。

更新完成后，您必须返回这些参数。
例如，您可以在用于 window.location 的相同 GET 字符串中返回它们。链接。

窗口。地点。 href = "index.php?collector_sel=abc&date_sel=bcd"

然后在您最初加载的页面上，它会比较过滤器值以再次选择它们。

<form name="testForm" action="">
    <select id="collector">             
        <option value="">Collector Name</option>
        <?php 
          $selected = "";
          foreach($collect->fetchAll() as $name) { 
             if (isset($collect_sel)){
                if (strpos($_GET['collect_val'],$name['Collector Name'])==0)
                    $selected = "selected";      
                }              
             } ?>

            <option class="choice" value="<?php echo htmlspecialchars($name['Collector Name']);?>"     
             selected="<?php echo $selected; ?>" ><?php echo $name['Collector Name'];?></option>
        <?php } ?>
    </select>

// ....
</form>