Reputation: 3471
I am having a problem displaying the content of a DIV after I have run a Jquery/Ajax call. The call runs a MySQL query and returns a 0 or a 1 depending on the query result.
What I am trying to do is to display the content of the div "#availability_1" if the query result is 1. I have temp alert in my code which does display the query result, in my test the result is 1.
I have in the code but nothing is displayed. Can anyone see where I am going wrong.
$( function() {
$( "#datepicker2" ).datepicker();
$("#ToTime").on("change",function(){
var date1=$("#datepicker1").val();
var date2=$("#datepicker2").val();
var time1=$("#FromTime").val();
var time2=$("#ToTime").val();
console.log(date1);
console.log(date2);
console.log(time1);
console.log(time2);
$.ajax({
type:"post",
url:"check_booked_advert.php",
data: {
FromDate:date1,
ToDate:date2,
FromTime:time1,
ToTime:time2,
},
success:function(data){
alert(data);
if(data==0){
$("#availability_1").html("Dates available");
}
else{
$("#availability_1").html("Date overlap!");
}
}
});
});
});
Many thanks in advance for your time.
Upvotes: 0
Views: 77
Reputation: 7171
remove #
from div id="#availability_1"
so it will work
<div id="availability_1"></div> //remove #
no need in # in id its simple name
Upvotes: 1
Reputation: 1587
Since you have created a SELECT statement in your route handler, then you need to effectively "GET" the data that you are querying from your database.
Your AJAX call type is currently set to "POST".
Try changing the AJAX call type as follows and see if it helps:
$.ajax({
type:"get",
url:"check_booked_advert.php",
data: {
FromDate:date1,
ToDate:date2,
FromTime:time1,
ToTime:time2,
},
success:function(data){
alert(data);
if(data==0){
$("#availability_1").html("Dates available");
}
else{
$("#availability_1").html("Date overlap!");
}
}
});
Upvotes: 1