AJAX 완료 후 SQL 쿼리 실행

Question

현재 2 개의 html 드롭 다운이 있습니다. 하나를 선택하면 HTML 테이블의 데이터를 필터링하고 선택에 따라 데이터를 표시합니다. 또한 각 행을 변경하고 저장 버튼을 클릭하여 테이블을 업데이트하는 업데이트 쿼리를 실행합니다. 해당 업데이트를 실행 한 후 드롭 다운 선택을 기반으로 결과를 필터링하는 데 사용 된 동일한 쿼리를 다시 실행하여 저장 및 실행을 클릭 한 후 선택한 결과의 최신 결과를 볼 수 있습니다. update 문. 지금 당장 당신은 내가 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> 

자바 스크립트 (하는 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 태그에 실행되는 내 자바 스크립트입니다 :

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 호출에서)를 전송해야합니다. collect_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>