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;
              }
            });

        });

    });

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

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之后绑定事件：

managerDepartment

Answer 2

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

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

窗口。地点。 href =＆＃34; index.php？collector_sel = abc＆amp; date_sel = bcd＆＃34;

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

<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>

AJAX完成后运行SQL查询

2 个答案: