Develop Reference

Why bootstrap modal is not closing?

Does anyone know what's wrong with below code? The modal is opened when I click the button that has to trigger this action, but when I click on close buttons that has data-dismiss="modal", it happens nothing.
<div class="modal fade show" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-modal="true" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> Schedule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form action="/schedule" id="modal-form" method="post">
<div class="input-container mb-3">
<textarea class="textarea-input" style="resize:none; width: 100%;" rows="5" maxlength="280" name="Text" required=""></textarea>
<br>
<div id="success-message" class="success-message mt-3" style="display: none;">
<span>Successfully scheduled</span>
</div>
<div id="error-message" class="error-message mt-3" style="display: none;">
<span>There was an error during scheduling</span>
</div>
</div>
<button class="btn btn-success" type="submit">Schedule</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Show/Hide bootstrap modal using VueJS (CDN) (Not showing the overlay)

I use VueJS on one page. It's just imported from CDN so I can't use bootstrap-vue.
I'm trying to show and hide modal when showModal data is true.
So far it works but it does not show the gray overlay surrounding the modal. How can I do that? It's Bootstrap 5.
<div id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" class="modal fade"
:class="showModal ? 'show' : ''" :style="{display: showModal ? 'block' : 'none'}" :aria-modal="showModal ? 'true' : ''"
:role="showModal ? 'dialog' : ''">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="width: 400px;">
<form>
<div id="div_id_api_secret_key" class="form-group">
<div v-for="field in journeySourceApp.details.fields">
<label :for="field.name" class=" requiredField">
[[field.name]]<span class="asteriskField">*</span> </label>
<div class="">
<input type="text" :name="field.name" v-model="authorizeAppForm[field.name]"
class="textinput textInput form-control" required=""
id="id_api_secret_key">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" #click="createAppInstance">Save</button>
</div>
</div>
</div>
</div>
</div>

It goes like this
<button class="btn btn-primary" v-on:click="newAddressModal.show()">
Show Modal
</button>
<div class="modal fade" id="newModal" ref="newModal">
<div class="modal-dialog">
<div class="modal-content p-3">
<div class="modal-header">
<h3>Header</h3>
</div>
</div>
<div class="modal-body">
body
</div>
</div>
</div>
<script>
import { Modal } from 'bootstrap';
export default {
data(){
newModal : null
},
mounted(){
this.newModal = new Modal(this.$refs.nweModal);
}
}
Works on vue 3 bootstrap 5

How to uncheck all checkboxes when i close a modal?

I want to pop up a modal on clicking the checkbox. And wants to uncheck it when I close a modal automatically.
I tried both attr and prop methods. None of them worked.
//uncheck all when modal closes
$(document).on('click', '#closeInvoiceModal', function() {
$('.creditCheckbox').prop('checked', false);
});
This was expected to uncheck all the checkboxes having the same class '.creditCheckbox'. But none of them didn't close.
<td>
<input type="checkbox" id="invoiceDetail{{$loop->iteration}}"
name="invoiceDetail{{$loop->iteration}}"
class="filled-in chk-col-green invoiceCheckbox"
data-campaignId="{{$item['id']}}"/>
<label class="invoiceDetailLink" for="invoiceDetail{{$loop-
>iteration}}">Inv. Details</label>
</td>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect
pull-right" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Please use this code I hope it's work for you.
Thanks
$(document).ready(function(){
$("#myModal").on('hide.bs.modal', function(){
$('.creditCheckbox').prop('checked', false);
});
});

I have to make an example like your code, please review once, hope it will help you, it is working for me.
Thanks.
<div class="container">
<input type="checkbox" name="check" class="checkOption"> check 1
<input type="checkbox" name="check" class="checkOption"> check 2
<input type="checkbox" name="check" class="checkOption"> check 3
<input type="checkbox" name="check" class="checkOption"> check 4
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#cbreInvoiceDetailsModal">Open Modal</button>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#cbreInvoiceDetailsModal").on('hide.bs.modal', function(){
$('.checkOption').prop('checked', false);
});
});
</script>

Open only one modal from different buttons

I am trying to get a report from my created tables. The thing is I have 3 different button to trigger 3 different modal right now. This approach works but I think it is unnecessary to create them seperately. I want only one modal with auto routed to related "Action". I think it will be solved with jquery but I can't seem to understand.
The buttons that triggers modals is below.
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a data-toggle="modal" data-target="#GeneralModal" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#VehicleModal" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#WarrantylModal" class="dropdown-item" href="#">Warranty Report</a>
</div>
My modals are below.
<div class="modal fade" id="GeneralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportGeneral" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="WarrantyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportWarranty" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportVehicle" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
The only changing part is the modal's,
<form action="/Export/ExportGeneral" role="form" method="post">
Depending on the triggered modal it route to another action such as,
ExportGeneral
ExportWarranty
ExportVehicle
What I am asking is if there is a thing that help me to click the different buttons but open them in only one modal which's
<form action="/Export/ExportGeneral" role="form" method="post">
Change's automatically depending on, clicked button. (Maybe an id to buttons ?)
Thank you for your time!

In your anchor tag, you just need to replace your code with mine:
<a data-toggle="modal" data-target="#GeneralModal" id="general-export-button" data-url="/Export/ExportGeneral" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#GeneralModal" id="warranty-export-button" data-url="/Export/ExportWarranty" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#GeneralModal" id="vehicle-export-button" data-url="/Export/ExportVehicle" class="dropdown-item" href="#">Warranty Report</a>
Now on the bottom of your page, add this jQuery code and everything will work fine.
<script>
$("#general-export-button, #warranty-export-button, #vehicle-export-button").click(function (e) {
e.preventDefault();
var form = $("#multpurpose-form");
form.prop("action", $(this).data("url"));
});
Now I will explain what is happening in my code. All anchor tags are linked to a single modal. The action method of form in the linked modal is changing against "anchor tag data-url" through jQuery code.

change your html like
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a onclick="openModal('GeneralModal')" class="dropdown-item" href="#">General Report </a>
<a onclick="openModal('VehicleModal')" class="dropdown-item" href="#">Vehicle Report</a>
<a onclick="openModal('WarrantylModal')" class="dropdown-item" href="#">Warranty Report</a>
</div>
and give your form id so we can change thier attribute using javascript like
<form action="" id="modalForm" role="form" method="post">
then in script
function openModal(modalName){
if(modalName == 'GeneralModal'){
$("#modalForm").attr("action",'/Export/ExportGeneral');
$("#modalId").modal('show');
}
else if(modalName == 'VehicleModal'){
$("#modalForm").attr("action",'/Export/ExportVehicle');
$("#modalId").modal('show');
}
else if(modalName == 'WarrantylModal'){
$("#modalForm").attr("action",'/Export/ExportWarranty');
$("#modalId").modal('show');
}
}
i think it might solved your problem and optimized your code. :)

click event does not fire in vue.js

in a modal i want to run a method when click on a button
here is the code of modal :
<div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">#lang('admin.new')</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 create text-center font-rtl">
<div class="form-group form-md-line-input col-xs-12 text-center">
<label for="form_control_1">#lang('admin.type')</label>
<input type="text" class="form-control" name="type" id="form_control_1"
required v-model="da.type">
</div>
<div class="form-group form-md-line-input col-xs-12 ">
<label for="form_control_1">#lang('admin.status')</label>
<select class="form-control" name="active" required v-model="da.active">
<option value=""></option>
<option value="true">#lang('admin.active')</option>
<option value="false">#lang('admin.inactive')</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary bb" #click="post_type()">#lang('admin.save')</button>
</div>
</div>
</div>
</div>
and my method is define in external .ts file :
post_type() {
post_data(this.da).subscribe(function (x: any) {
if (x.status == "failure") {
// toastr[]("Gnome & Growl type non-blocking notifications", "Toastr Notifications")
toastr.error(x.message);
} else {
// console.log(result.status);
// location = "/admin/category?type_id="+this.type_id;
this.get_type_data();
$('#new').modal('toggle');
this.da.type = '';
this.da.active = '';
toastr.success(x.message);
}
});
},
i do this for other page and it work correctly but for this one does not work and even not firing .
what should i do?