am getting this weird bug which I have tried to debug I can find the solution to it. so here I have a modal whereby a user registers their account at. in the modal there is rental houses dropdown where the user only selects their house then proceeds to select their room, then they proceed to fill in all the other inputs, then registers their account upon clicking a button.
here is the bug am getting, the modal works very well on all other pages except on the house details page. it toggles perfectly and shows all the inputs and the first rental houses dropdown where a user first selects their rental houses. but the 2nd dropdown that shows all the rooms doesn't show and instead I see
error in the network tab. here is the method in the controller where the error is coming from.
public function singlehsedetails ($rental_slug,$id){
$rentalhouse=Rental_house::with
('housetags','rentalalternateimages','houselocation','hsesusers')
->find($id);
$occupiedroomscount=Room_name::where('rentalhouse_id',$id)->where('is_occupied',1)->count();
//this line below
$availablerooms=$rentalhouse->total_rooms-$occupiedroomscount;
$relatedhouses=Rental_house::where(['rental_status'=>1,'is_extraimages'=>1,'is_rentable'=>1])->where('id','!=',$id)->take(3)->get();
$isfeaturedhouses=Rental_house::where(['rental_status'=>1,'is_extraimages'=>1,'is_featured'=>'yes'])->get();
$activereviews=Houseratingreview::where(['rating_isactive'=>1,'hse_id'=>$id])->get();
return view('Front.Rentalslisting.rentalhsedetails',compact('allowreview','userrating','availablerooms','rentalhouse','relatedhouses','isfeaturedhouses'));
}
the function is the one that shows details of a house. my modal is on the master's page. all the other inputs work very well. here is what the rental house dropdown looks like.
<div class="row section-groups">
<div class="form-group inputdetails col-sm-6" style="color: black; font-size:18px;">
<label>House Name<span class="text-danger inputrequired">*</span></label><br>
<select name="rentalhousename" id="rentalhsenme" class="rentalhsename form-control text-white bg-dark" style="width:100%;" required>
<option>Select Your Rental House </option>
<?php
$activehousenames=Rental_house::select('rental_name','id')->where(['rental_status'=>1,'is_vacancy'=>1,'is_rentable'=>1])->get();
?>
@foreach($activehousenames as $housename)
<option value="{{ $housename->id }}">
{{ $housename->rental_name }}</option>
@endforeach
</select>
</div>
<div class="form-group inputdetails col-sm-6">
<label>Room Name/Number<span class="text-danger inputrequired">*</span></label>
<br>
<select name="getroomnamenumber" class="roomnamenumber form-control text-white bg-dark" required style="width: 100%;">
<option value=" " disabled="true" selected="true">Select Your Room Name/Number</option>
</select>
</div>
</div>
here is my ajax code
// show rooms for a house on dropdown
$(document).on('change','#rentalhsenme',function(){
var hsetitle_id=$( "#rentalhsenme" ).val();
$.ajax({
type:'get',
url:'getroomsforahouse',
data:{
'id':hsetitle_id
},
success:function(data){
console.log(data);
$('.roomnamenumber').html('<option disabled selected value=" ">Select Your Room Name/Number</option>');
console.log("the data is ",data);
data.forEach((room)=>{
console.log(room);
$('.roomnamenumber').append('<option value="'+room.id+'">'+room.room_name+'</option>');
});
},error:function(){
}
});
});
I have imported the rental house details at the top of the master's page. am using jquery to auto-populate the options for the rooms and works very well on other pages. am trying to think where the error is coming from because the modal works very well on other pages but when it comes here to the rental house details page the dropdown doesn't work.
the page loads very well and shows the data.only that the dropdown doesnt respond