how to connect jquery datepicker to table of data? - php

Question

I have code to display a table, mysql queries fetching data from a database. One of the columns is dates. I would like to use the jquery datepicker to sort the table. I've included the correct files and show the calendar on my site but how do I connect it to my table so I can sort my data?
<form name="myForm" action="/page.php" onsubmit="return validateForm()" method="get">
<input type="text" id="from" name="fromDate" value=""/>
<input type="text" id="to" name="toDate" value=""/>
<input type="submit" name="Find Dates" value="Submit" />
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#from').datepicker({
defaultDate: "+1w",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
jQuery('#to').datepicker({
defaultDate: "+1w",
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<?php
$values = $wpdb->get_results($wpdb->prepare( "SELECT DISTINCT DATE FROM `signup` ORDER BY DATE ASC"));
?>
<table>
<tr>
<th>Date</th><th>B</th><th>D</th>
</tr>
<tr>
<?php
foreach($values as $v_date){
$date = $v_date->DATE;
$count = $wpdb->get_results($wpdb->prepare(
" SELECT DISTINCT `date`,
(select count FROM signup where LIST_NAME = 'B' AND date = '$date') as 'B',
(select count FROM signup where LIST_NAME = '2 - D' AND date = '$date' ) as 'D', FROM wp_email_signup WHERE date ='$date'"));
echo '<tr class="row_main">';
echo '<td>' . $date . '</td>';
foreach($count as $counts){
$val1 = $counts->B;
$val2 = $counts->D;
echo '<td>' . $val1 . '</td>';
echo '<td>' . $val2 . '</td>';
echo '</tr>';
}
?>
</tr>
</table>

Answer 1

You can get value from datepicker like this:
<script>
jQuery('#from').click(function(){
//this is the value of datepicker
var datepickerVal = $(this).val();
//here you you have to pass this value to php
window.document.location = '?from =' + datepickerVal;
})
</script>
After that after page reload you can get this value in php from $_GET array and use it as you want

Answer 2

You could call a different PHP file in jQuery using AJAX. In that PHP file you query anything you want to the database, and echo the results in a JSON syntax. This way, you can parse it from Javascript and show it on the datepicker :)
References:
jQuery AJAX: http://api.jquery.com/jquery.ajax/
Encode a PHP array to JSON: http://php.net/manual/es/function.json-encode.php

Answer 3

Whoa, take it easy. You should not mix all the code into one file. You should separate database code, php code, javascript and css code as much as possible. You should have a code which runs the search with the necessary parameters and retrieves the data. You should post the parameters using ajax when the date value has been changed. Here you can see an example of posting with ajax.