60971

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

Answer1:

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 }

Answer2:

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.<br /> 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>

Recommend

  • Use same row per thread from a CSV data set in JMeter
  • How to Create a CSV file using PHP (and upload it)
  • Foreach loop using string to output XML
  • Count the rows with same ID in php
  • Get an object from its address [duplicate]
  • Converting special characters with htmlspecialchars and htmlentities
  • How can you create a partition on a Kafka topic using Samza?
  • How to get the id of youtube videos in laravel
  • Perl regular expressions in the stringr package
  • How to render html tags from mysql database in PHP?
  • Content out of div PHP PDO
  • Very Basic JS Coding, and SoundManager2 or not?
  • How to sort an array considering localization?
  • Collecting wall posting permission when using the Facebook Registration plugin
  • Scala's collect inefficient in Spark?
  • Is there a way to directly consume a Rayon chain without collecting it first?
  • Spring MVC redirect with custom http headers
  • Get all existing pointers to an object
  • IE11 textarea loses focus if another textarea is disabled
  • Adding directive inside the directive programatically
  • How can I reset dropdown data if modal closed on vue component?
  • Converting query results into DataFrame in python
  • Extract All Possible Paths from Expression-Tree and evaluate them to hold TRUE
  • XSLT foreach repeating nodes to flat
  • How to getText() from the input field of an angularjs Application
  • Querying row counts segregated by date ranges
  • List images(01.png) and descriptions(01.txt) from directory
  • Stop Bash Script if Hive Fails
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • D3 nodes and links from JSON with nested arrays of children
  • Display Images one by one with next and previous functionality
  • Upload files with Ajax and Jquery
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • Cannot Parse HTML Data Using Android / JSOUP
  • Java static initializers and reflection
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app