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

     }); 

    }); 

そして、これは私の主なindex.phpページに私のheadタグで実行され、私の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の応答が成功した後でイベントをバインドすることができます。

Answer 2

結果を取得するページのパラメータとしてフィルタを（Ajax呼び出しで）送信する必要があります。 collector_selとdate_selという名前を付けることができます。

更新が完了したら、これらのパラメータを返す必要があります。
たとえば、window.locationに使用するのと同じGET文字列で返すことができます。 href。

ウィンドウ。ロケーション。 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>