I am using data-backdrop="static" data-keyboard="false" in my model. It works fine the first time. It gets open and gets close as many times as I want but when I submit the form inside the modal through ajax and try to open the modal again then modal pops up and disappears. It happens because of class="modal-backdrop". Because when I remove modal-backdrop from Inspect option in elements. My page works fine. I tried to remove the class through ajax in success function but didn't work.
This is my modal:
<div class="modal fade" id="product-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
and this is my ajax function:
<script>
$("#product-1").submit(function (e){
e.preventDefault();
let quantity = $("#quantity").val();
let spice = $(".spice:checked").val();
let tandoori_roti = document.getElementById('tandoori_roti').checked ? '1' : '0' ;
let price = $("#price").val();
let pieces = $(".pieces:checked").val();
let instructions = $("#instructions").val();
let products_id = $("#products_id").val();
console.log(tandoori_roti);
let _token = $("input[name=_token]").val();
$.ajax({
url: "",
type: "get",
data:{
products_id:products_id,
quantity:quantity,
spice:spice,
price:price,
pieces:pieces,
instructions:instructions,
_token:_token
},
error:function (jqXHR, exception){
},
beforeSend: function() {
console.error();
},
beforeSend: function() {
$('.modal-backdrop').remove();
$('.modal-backdrop').hide();
$('.addLoader').show();
},
success:function(response)
{
$("#product-1")[0].reset();
$('#product-modal').modal('hide');
$('#product-modal-2').modal('hide');
$('#product-modal').trigger("click");
$('#product-modal-2').trigger("click");
setTimeout(function(){
if (response){
$('.addLoader').hide();
$("#confirmationModal").modal("show");
}
},500);
},
})
});
I am closing the modal in success function and trying to remove the backdrop in beforeSend:Function.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire