i am editing my form using a modal.so here I am able to get all the values for a certain record from the database and display them in the inputs of the form.
am using jquery ajax to display the modal and when the modal with the form pops up with the records of the data pops up with all the earlier added data the user can make changes where necessary.then after updating i have created a code to empty all the inputs then reload the table and hide the model.
my code is working.for example i have 3 records all having a edit function.i have use the datatable plugin to display the data and it all works fine.so on clicking the edit button a modal appears for editing the record details. i have been to show all the other part of the details except the part on checkboxes where am getting a bug.
the checkbox is based on a yes or no value as per the data in the database.if the value is yes the checkbox gets clicked but if it isn't it doesnt get clicked.the bug comes here,if a record has all the values as yes,then on proceeding to other records they all become checked even when their values are not a yes in the table at the database.
i havent understood where the bug is coming.but here in the modal i have set the checkboxes value as yes.and also am emptying the checkboxes after updating and closing the modal.where might the bug be coming from?
.here is my modal that edits the data,in my form i have set the values of my checkbox as no meaning the they wont be checked but on modal toggle they will be filled with the necessary values from the database.
<div id="editrentalhsedetailsmodal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" >
<div >
<div >
<div >
{{-- Edit Property Details --}}
<div id="edithousedata" style="margin: 100px 5px;">
<div style="text-align: center; font-size:18px; background-color:black;
display: flex;
justify-content: center; padding:5px;">
<h3 ></h3>
</div>
<form action="javascript:void(0)" id="updatehsesform" role="form" method="POST" enctype="multipart/form-data">
@csrf
<input type="hidden" id="rentalhouseid">
<div >
<div >
<h5 style="color: black; font-size:18px;">1.Rental Description</h5>
<div >
<div >
<label>Rental Name<span >*</span></label>
<input type="text" required name="rental_name" id="rental_title"
>
</div>
<div >
<label>Rental Details<span >*</span></label>
<div id="rental_details_ck" style="border:2px solid black; width:100%;">
</div>
</div>
<div >
<label>Rental category<span >*</span></label>
<select name="rentalhousecategory" required style="width:100%;">
@foreach($allrentalcategories as $category)
<option value="{{ $category->id }}">{{ $category->rentalcat_title }}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
//here are my checkboxes
<div >
<div >
<h5 style="color: black; font-size:18px;">3.Rental House Amenities</h5>
<div >
<div style="text-align: left; color:black;">
<div >
<input type="checkbox" name="wifi" value="no" id="osahan-checkbox6">
<label for="osahan-checkbox6">WIFI</label>
</div>
<div >
<input type="checkbox" name="generator" value="no" id="osahan-checkbox1">
<label for="osahan-checkbox1">BACKUP GENERATOR</label>
</div>
<div >
<input type="checkbox" name="balcony" value="no" id="osahan-checkbox2">
<label for="osahan-checkbox2">BALCONY</label>
</div>
<div >
<input type="checkbox" name="parking" value="no" id="osahan-checkbox3">
<label for="osahan-checkbox3">PARKING</label>
</div>
</div>
<div style="text-align: left">
<div >
<input type="checkbox" name="cctv_cameras" value="no" id="osahan-checkbox4">
<label for="osahan-checkbox4">CCTV SECURITY CAMERAS</label>
</div>
<div >
<input type="checkbox" name="servant_quarters" value="no" id="osahan-checkbox5">
<label for="osahan-checkbox5">SERVANT QUARTERS</label>
</div>
</div>
</div>
</div>
</div>
<button type="submit" >Update Rental Details</button>
<ul id="update_errorlist"></ul>
</form>
</div>
</div>
</div>
</div>
</div>
here is my jquery code upon clicking the edit button the modal shows,
// show editing modal
$(document).on('click','.editrentalhsedetails',function(e){
e.preventDefault();
var rentalhsedetailsid=$(this).data('id');
$.ajax({
url:'{{ url("admin/activerental",'') }}' '/' rentalhsedetailsid '/edit',
method:'GET',
processData: false,
contentType: false,
success:function(response)
{
console.log(response)
if (response.status==404)
{
alert(response.message);
}
else if(response.status==200)
{
$('#editrentalhsedetailsmodal').modal('show');
$('#rentalhouseid').val(response.editrentalhsedetail.id);
$('.edit_title').html('Edit details for' response.editrentalhsedetail.rental_name);
$('#rental_title').val(response.editrentalhsedetail.rental_name); $(".rentalselectcat").val(response.editrentalhsedetail.housecategory.id).trigger('change');
$('input[name^="wifi"][value="' response.editrentalhsedetail.wifi '"]').prop('checked', true);
$('input[name^="generator"][value="' response.editrentalhsedetail.generator '"]').prop('checked', true);
$('input[name^="balcony"][value="' response.editrentalhsedetail.balcony '"]').prop('checked', true);
$('input[name^="parking"][value="' response.editrentalhsedetail.parking '"]').prop('checked', true);
$('input[name^="cctv_cameras"][value="' response.editrentalhsedetail.cctv_cameras '"]').prop('checked', true);
$('input[name^="servant_quarters"][value="' response.editrentalhsedetail.servant_quarters '"]').prop('checked', true);
}
}
})
});
// update rental house details
$(document).on('submit','#updatehsesform',function(e)
{
var hseupdateid=$('#rentalhouseid').val();
var url = '{{ route("updaterentaldetails", ":id") }}';
updatehseurl = url.replace(':id',hseupdateid);
var form = $('.updaterentaldetails')[0];
var formdata=new FormData(form);
$.ajax({
url:updatehseurl,
method:'POST',
processData:false,
contentType:false,
data:formdata,
success:function(response)
{
console.log(response);
if (response.status==400)
{
$('#update_errorlist').html(" ");
$('#update_errorlist').removeClass('d-none');
$.each(response.message,function(key,err_value)
{
$('#update_errorlist').append('<li>' err_value '</li>');
})
$('#rentalhouseid').val('');
$('.edit_title').html('');
$('#rental_title').val('');
$(".rentalselectcat").val('');
$('input[name^="wifi"][value="no"]').prop('checked', false);
$('input[name^="generator"][value="no"]').prop('checked', false);
$('input[name^="balcony"][value="no"]').prop('checked', false);
$('input[name^="parking"][value="no"]').prop('checked', false);
$('input[name^="cctv_cameras"][value="no"]').prop('checked', false);
$('input[name^="servant_quarters"][value="no"]').prop('checked', false);
$('#editrentalhsedetailsmodal').modal('hide');
} else if (response.status==200)
{
alertify.set('notifier','position', 'top-right');
alertify.success(response.message);
activerentalhousestable.ajax.reload();
$('#rentalhouseid').val('');
$('.edit_title').html('');
$('#rental_title').val('');
$(".rentalselectcat").val('');
$('input[name^="wifi"][value="no"]').prop('checked', false);
$('input[name^="generator"][value="no"]').prop('checked', false);
$('input[name^="balcony"][value="no"]').prop('checked', false);
$('input[name^="parking"][value="no"]').prop('checked', false);
$('input[name^="cctv_cameras"][value="no"]').prop('checked', false);
$('input[name^="servant_quarters"][value="no"]').prop('checked', false);
$('#editrentalhsedetailsmodal').modal('hide');
}
}
});
})
everything is working well except for the checkboxes i havent understood where am missing the point?
CodePudding user response：
after looking into the bug keenly i noticed my code is correct and i was missing some other part elsewhere.so upon opening a model and the data from the database is filled in the inputs,i have a choice of either updating the data or closing the modal without making any change.if i close the modal without any update the data for that record remains there.what i have to do is upon closing a modal without making any change i have to empty the inputs.this is how i solved it
$(document).ready(function(){
$("#editrentalhsedetailsmodal").on('hide.bs.modal', function(){
$('#rentalhouseid').val('');
$('.edit_title').html('');
$('#rental_title').val('');
$('#rental_slug').val('');
$('#monthly_rent').val('');
$("#rental_details_ck").children("textarea").remove();
$('.hsedetailstextarea').val('');
$('#totalrooms').val('');
$('.rentalhsevideo').val('');
$(".rentalselectcat").val('');
$(".rentalhsevacancy").val('');
$(".rentalhselocation").val('');
//pass array object value to select2
$('.rentaltagselect2').val('');
// preview an image that was previously uploaded
var deleteimage=$('#showimage').removeAttr('src');
$('.rentalhseimage').html('deleteimage');
//here i gave the checkboxes a class of edit checkbox
$('.editcheckbox').prop('checked', false);
});