CODEWITHSUNDEEP
jqueryajax
DCJones
DCJones

Reputation: 3471

Jquery - Ajax displaying the content of DIV from the result of a Ajax call

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

Answers (2)

Bhargav Chudasama
Bhargav Chudasama

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

lopezdp
lopezdp

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

Related Questions