Here i did all correct after return the datas in index page display in that value i need to do one more thing extra what is means while returning data booking_status=="1" means i want to show red color button and button is unclickable(class="btn btn-primary) suppose " booking_status=="0" means i want to show green color button(class="btn btn-primary).in console.log(res); i am getting like this
count:2
data:Array[2]
0:Object
1:Object
booking_status:"1"
id:"2"
pg_id:"1"
rent:"4000"
room_number:"Room 2"
room_sharing:"2"
----------
booking_status:"1"
id:"3"
pg_id:"1"
rent:"4000"
room_number:"Room 3"
room_sharing:"2"
<script>
function showDiv(toggle){
var sharing=$("#sharing").val();
$.ajax({
type: "POST",
url: "pg_details.php",
data: "sharing_id="+sharing,
success: function(data) {
var res =jQuery.parseJSON(data);
console.log(res);
$.each(res.data, function(key, value) {
var booking_status = value.booking_status;
console.log(booking_status);//i am getting 1 here
if(booking_status == "1"){
$("#book").removeClass("btn-success").addClass("btn-danger");
$("#book1").removeClass("btn-success").addClass("btn-danger");
el = $('[data-id='+value.pg_name +']');
if (el.length)
{
// console.log(booking_status);
el.find('.btnmar').append(' <a href="register.php?roomid='+value.id +'&&pg_id='+value.pg_id+'&&amount='+value.room_rent+'&&room_number='+value.room_number+'&&advance='+value.advance_amount+'"><button type="button" class="btn btn-success" id="book" style=" width: 71px; ">'+value.room_number+'</button></a> ');
}
else
{
//console.log(booking_status);
var htmlString = '<div id="toggle" data-id="'+value.pg_name +'"> <div class="container" style=" margin-bottom: 30px;"><div class="row"><h4 style="margin-left:15px;">'+value.pg_name +'</h4><div class="col-sm-10"><div class="btn-group btnmar"><a href="register.php?roomid='+value.id +'&&pg_id='+value.pg_id+'&&amount='+value.room_rent+'&&room_number='+value.room_number+'&&advance='+value.advance_amount+'"><button type="button" class="btn btn-success" style=" width: 71px; id="book1"">'+value.room_number+'</button></a> </div></div><div class="col-sm-2"> <div class="panel-group"><div class="panel panel-primary"><div class="panel-heading"> Premium Facility</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"></i>T.V.</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"></i>Wifi</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"></i>Bed</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"></i>Washing Machine</div> </div> </div> </div></div></div></div>';
$(".view_room").prepend(htmlString);
}
}
});
}
});
}
</script>
pg_details.php
<?php
include_once("admin/config.php");
include("functions.php");
$sharing=$_POST['sharing_id'];//Getting Sharing Value
$sql=mysql_query("SELECT * FROM rooms WHERE room_sharing='$sharing'");
$count = mysql_num_rows($sql);
if($count > 0){
while($row=mysql_fetch_assoc($sql)){
$row['pg_name'] = Getpgname($row['pg_id']);
$data[]= $row;
}
$pg_type= array("return"=>1,"count" =>$count,"data" =>$data);
echo $pg_type = json_encode($pg_type);
}else{
$pg_type= array("return"=>0,"count" =>0,"data" =>"");
echo $pg_type = json_encode($pg_type);
}
?><div class="view_room"></div></div>
The basic logic of this is as such, for jquery plus bootstrap:
$("#idFieldName").removeClass("btn-primary").addClass("btn-success");
What this does is:
This determines what id="fieldname"
$("#idFieldName")
This removes the current btn-primary:
removeClass("btn-primary")
This adds the btn-success:
removeClass("btn-success")
and the two periods in-between are basically "keep doing this next thing" kind of statement.
You will need to obviously deal with the if/else logic for your booking_status but that is the easier part.
The cleaner way you can put the operational && like this example
if (el.length && booking_status=="1" ) {
//your true statement
// append your button danger here
}
else {
// if booking status=="0"
// append your button primary
}
Here is DEMO make you more understand what i'm trying to explain.