Building a script that once a date is selected in a datepicker calendar, it uses ajax to post the selected date in a php script;
in the success of that ajax call, it uses another ajax call to post the same selected date to another php script and displays that in the page.
Did some research around and this seemed to be the best solution for what I try to do.
The script is the following:
<script> //for the events
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
// call next ajax function
var mydate = this.value;
$.ajax({
type: "POST",
url: 'boxes_script.php',
data: ({dates: mydate}),
dataType : 'html',
success: function(data) {
$('.caixas').html(data);
alert(data);
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates1: mydate}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
</script>
This is the code being used atm. Got some updates because of the feedback given here, but the solution still hasn't worked 100%
There's a problem on it and I think it's because the second Ajax call is inside of a success Ajax.
The problem is the following: The data is being posted in the php scripts, which run like how they should. The array gets populated with the right information. The
$('.caixas').html(data);
works fine and displays data from 'boxes_script.php' there.
The
$('.results-ajax').html(data);
receives 100% of the data being sent from 'events_script.php' but for any weird reason, doesn't append it to the page..
I can see the data in alert messages and it's the right data being sent to the browser.
Why isn't that data being appended to the page?
This is the php code for 'events_script.php':
<?php
include 'config/config.php';
include 'libraries/database.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_POST);
echo $_POST[dates1];
$dias= $_POST[dates1];
$mysql_date = date('Y-m-d', strtotime($dias));
echo $mysql_date;
//Make database query
$sql = "***";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$image = $row['Company_Logo'];
$myArray = json_decode($image, true);
$event=$row['eventID'];
echo '<div class="tab-pane" role="tabpanel">
<div id="'.$dias.'" class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image:url('.$myImage = $myArray[0]['name'].');">
<p class="event-list-start-time">'.$row['Start_Date'].'</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">'.$row['End_Date'].'</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">'.$row['Event_Name'].'</h2>
<p>Organized by <span class="event-list-organizer"><a href="mini-about.php?$company='.$row['Ref_ID'].'">'.$row['Company_Name'].'</a></span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<a href="mini-single-event.php?event='.$event.'"><button type="button" class="btn more-info-list">More Information</button></a>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }
}
?>
Note: no errors were found in the error log. The network gives status 200.
The data can be seen sent to the browser here:
The first part of the data is being appended to the browser, as you can see in the images.
Why is not working everything?
