Running SQL query after AJAX completes

Question

I currently have 2 html dropdowns. Once I select from one, it filters the data in my HTML table and displays data based on the selection. I can also make changes to each row and, by clicking a save button, run an update query that updates the table. After, running that update, I want it to re-run the same query that was used to filter the results based on the dropdown selection so you can see the most up-to-date results of what you selected after clicking save and running the update statement. Right now, you can see that I have window.location.href = window.location.href; under the success callback in my AJAX function, but that reloads the entire page and runs the default query that displays on page load, so that doesn't work for me.

All of my queries that filter the table results after a dropdown selection are in my dropdown-display.php page that is called once I select something.

HTML Dropdowns:

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

        });

    });

And this is my javascript that is run in my head tag in my main index.php page:

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

You need to send the filters (in your Ajax call) as parameters to the page that gets the result. You could name them collector_sel and date_sel.

Once the update has been completed, you must return these parameters.
For example, you could return them in the same GET string you use for window.location. href.

window. location. href = "index.php?collector_sel=abc&date_sel=bcd"

Then on the page you initially load it compares the filter values to select them again.

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

Answer 2

You can bind the event after successful response of ajax like that:

$(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
}