I have the following link and I'm trying to load a bootstrap modal when its clicked but the javascript function doesnt seem to be firing. Instead of the view loading inside a modal, its loading as a new page?
#*this is the modal definition*#
<div class="modal hide fade in" id="report-summary">
<div id="report-summary-container"></div>
</div>
<script >
$('a.js-report-summary').click(function (e) {
var url = $(this).attr('href'); // the url to the controller
e.preventDefault();
$.get(url, function (data) {
$('#report-summary-container').html(data);
$('#report-summary').modal('show');
});
});
</script>
public ActionResult ReportSummary()
{
// some actions
return PartialView("ReportSummary", viewmodel)
}
// Report summary view which contains modal
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">#ViewBag.FormName - Analysis</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
There are no errors showing in the console either so why isn't the jquery function firing?
in your click function, add parameter e this will stand for event
then in the function itself add e.preventDefault() This will stop the refreshing effect.
on your controller method try
public ViewResult ReportSummary()
{
// some actions
if(Request.IsAjaxRequest())
return PartialView("ReportSummary", viewmodel);
else
return View("ReportSummary", viewmodel);
}
on your view
$('#exampleModal').on('show.bs.modal', function (event) {//give your model wrapper an id
//do some ajax and get html
$.ajax({
url:'',
success:function(data){
$('#report-summary-container').html(data);
}
});
})
on your anchor tag, add data-toggle="modal" data-target="#exampleModal"
if you dont want to use bootstrap events trigger your modal with
$('#myModal').modal('show')
Related
I have a button which is supposed to trigger a modal with a contact form. Part of the show.bs.modal function is an AJAX call to my DB to get some file details which are then meant to be shown in the modal-body.
The problem is that the modal does indeed open, but with no modal-body content, which means that the JavaScript code to trigger to the AJAX call is not working. I do not see any network activity in the browser debug menu, no call to the PHP file, and even an alert on top of the JS code telling me that that a button was pressed is not triggered. It seems like the whole JS code is circumvented, yet the modal still shows.
The same code works in another project, anyone has any idea as to why this is happening?
Button:
<div class="card-footer bg-light text-center">
<button id="modal_btn" name="modal_btn" type="button" class="btn bg-teal-400" data-toggle="modal" data-target="#modal_contact_form" data-imgid="'.$row['image_id'].'" data-keyboard="true">
<span class="icon-ico-mail4"></span> Anfragen
</button>
</div>
Modal:
<!-- Contact form modal -->
<div id="modal_contact_form" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-300">
<h3 class="modal-title">Kaufanfrage - Artikel #1234</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Abbrechen</button>
<button type="submit" class="btn bg-teal-300">Nachricht Senden</button>
</div>
</form>
</div>
</div>
</div>
<!-- /contact form modal -->
JavaScript:
<script type="text/javascript">
// DISPLAY EDIT RECORD MODAL
$('#modal_contact_form').on('show.bs.modal', function (event) {
//var button = $(event.relatedTarget) // Button that triggered the modal
window.alert("button clicked.");
var imgid = $(event.relatedTarget).data('imgid') // Extract info from data-* attributes
var modal = $(this);
var dataString = 'action=contact&imgid=' + imgid;
$.ajax({
type: "POST",
url: "./assets/ajax/ajax_action.php",
data: dataString,
cache: false,
success: function (data) {
console.log(data);
modal.find('.modal-body').html(data);
},
error: function(err) {
console.log(err);
}
});
});
</script>
try this:
$(document).on('show.bs.modal','#modal_contact_form', function (event) {
// TODO ....
});
Or you can use the onclick button trigger instead of modal show trigger
$("#modal_btn").click(function(event){
// TODO ...
});
Try This
const bsModal = document.querySelector('#exampleModal');
$(bsModal).on('shown.bs.modal', function() {
// YOUR CODE HERE....
})
Hey I am new to js and I was trying to open a bootstrap modal with a click on a button (I set the id to the value of the button because the id comes from a database) and if you click on "yes" in that modal a click function should be triggered which should then delete the selected row.
I am able to open the modal and setting the id also works but if I click the yes button in the modal there is no alert...
This is the modal located in content.html:
<!--Delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<p><b> Are you sure you want to return this device? </b></p>
Please make sure you return the device.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
This is my JS located in main.js:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus');
});
$('#booked').click(function () {
$('#changestuff').load('content.html #booked', function () {
register();
change();
$('.ret').click(function () {
var id = $(this).val();
var tr = $(this).closest('tr');
})
returnOne(id, tr);
});
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
});
function returnOne(id, tr)
{
$('.delBtn').click(function () {
alert("you returned" +id);
})
}
Where is my error? I think it might be because the modal hasn't been loaded when I try to get the click event but I'm not sure. Thanks in advance!
click event handler is not attaching may be it is getting called before yes button dom get created.
Try below code where you can store row to be deleted in a variable and set row-id data attribute on Yes button. In click handler of Yes button, read the id and you can delete row from variable rowToDelete
$(document).ready(function(){
var rowToDelete;
$('#myModal').on('shown.bs.modal', function(){
$('#myInput').trigger('focus');
});
/*$('#changestuff').load('content.html #book', function(){
register();
change();
getChosenDevices();
});*/
$('#changestuff').on('load','content.html #book', function(){
register();
change();
getChosenDevices();
});
$('#booked').click(function() {
$('#booked').addClass('active');
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
$(document).on('click','.ret',function() {
var id = $(this).val();
$('#deleteModal .delBtn').data('row-id', id); //set data id
rowToDelete = $(this).closest('tr'); //store row in variable
});
$(document).on("click", '#deleteModal button.delBtn', function(e) {
e.preventDefault();
var rowId = $(this).data('row-id');
alert("you returned" + rowId);
$('#deleteModal').modal('toggle');
});
});
JSFiddle Demo
I'm trying to write a function in JavaScript that opens an model when a player enters a certain box. The model does pop up, but it no longer closes.
This is used to open the model :
The JavaScript:
superFight(){
function ModalLink(){
$('#myModal').modal('show');
}
ModalLink();
}
The HTML Model:
<div id="myModal" class="" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modaldd Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I already tried to use $('#myModal').modal('hide'); and $('#myModal').modal({ show: false});
This did not work. When I put it in the console, it gave :
> $('#myModal').modal({ show: false});
< false = $1
I also tried an onClick function in the close button to activate a function to close the modal, but this not work either.
Basically what I'm trying to do, is to open and close an modal programmatically. Whenever an superFight(); is started, it should pop up with some info. And the user should be able to close it when done.
I'm writing the code in an ionic app.
Figured it out.
I changed the code in superFight() to:
function superFight(){
$('#myModal').show();
$('#myModal').modal('show');
$( ".simplemodal-overlay" ).show();
}
Added an onClick the HTML:
<button type="button" class="close" data-dismiss="modal" onclick="CloseModalSpel()">×</button>
And then in the page, I added this function at the bottom:
function CloseModalSpel(){
$('#myModal').hide();
$( ".simplemodal-overlay" ).hide();
}
It now opens, and closes the modal.
I have problem when create custom JQuery plugin that will show Bootstrap modal dialog. The custom plugin require callback function as it's parameter.
The problem are when modal dialog called twice, callback also called twice, and so on.
Here the code:
HTML
test modal
<div class="modal fade" id="general_modal" tabindex="-1" role="dialog" aria-labelledby="general_modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="general_modal_title">Set Title Here</h4>
</div>
<div class="modal-body">set modal content here</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close_button" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary action_button">Save changes</button>
</div>
</div>
</div>
Javascript
(function ($) {
$.fn.showDialog = function (options, callback) {
$('#general_modal').modal();
$('#general_modal .action_button').on('click', function () {
callback();
});
}
}(jQuery));
$('.confirm_delete').click(function (e) {
e.preventDefault();
$(this).showDialog(null, function () {
alert('xxx');
});
});
DEMO: http://jsfiddle.net/kJn47/2/
You are rebinding the modal and click events each time showDialog is run. Here's how you might prevent the events being re-attached each time:
(function ($) {
$.fn.showDialog = function (options, callback) {
$('#general_modal').unbind().modal();
$('#general_modal .action_button').unbind().on('click', function () {
callback();
});
}
}(jQuery));
$('.confirm_delete').click(function (e) {
e.preventDefault();
$(this).showDialog(null, function () {
alert('xxx');
});
});
You can call one() against on():
$('#general_modal .action_button').unbind().one('click', function () {
According to documentation:
The .one() method is identical to .on(), except that the handler for a
given element and event type is unbound after its first invocation.
For example:
http://jsfiddle.net/kJn47/47/
If I go here
http://getbootstrap.com/2.3.2/javascript.html#modals
And click 'Launch demo modal' it does the expected thing. I'm using the modal as part of my signup process and there is server side validation involved. If there are problems I want to redirect the user to the same modal with my validation messages displayed. At the moment I can't figure out how to get the modal to display other than a physical click from the user. How can I launch the model programmatically?
In order to manually show the modal pop up you have to do this
$('#myModal').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#myModal').modal({ show: false})
Where myModal is the id of the modal container.
You should't write data-toggle="modal" in the element which triggered the modal (like a button), and you manually can show the modal with:
$('#myModal').modal('show');
and hide with:
$('#myModal').modal('hide');
This is a code for Bootstrap v5 without jQuery.
let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();
Demo
And this is a codesandbox demo to open modal on page load programmatically.
https://idu6i.csb.app/
Refs
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
https://getbootstrap.com/docs/5.0/components/modal/#show
If you are looking for a programmatical modal creation, you might love this:
http://nakupanda.github.io/bootstrap3-dialog/
Even though Bootstrap's modal provides a javascript way for modal creation, you still need to write modal's html markups first.
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS
$('button').click(function(){
$('#myModal').modal('show');
});
DEMO JSFIDDLE
you can show the model via jquery (javascript)
$('#yourModalID').modal({
show: true
})
Demo: here
or you can just remove the class "hide"
<div class="modal" id="yourModalID">
# modal content
</div>
I wanted to do this the angular (2/4) way, here is what I did:
<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`
Important things to note:
visible is a variable (boolean) in the component which governs modal's visibility.
show and in are bootstrap classes.
An example component & html
Component
#ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef;
..
#HostListener('document:keydown.escape', ['$event'])
onEscapeKey(event: KeyboardEvent) {
this.hideRsvpModal();
}
..
hideRsvpModal(event?: Event) {
if (!event || (event.target as Element).classList.contains('modal')) {
this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none');
this.renderer.removeClass(this.rsvpModal.nativeElement, 'show');
this.renderer.addClass(document.body, 'modal-open');
}
}
showRsvpModal() {
this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
this.renderer.removeClass(document.body, 'modal-open');
}
Html
<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="niviteRsvpModalTitle">
</h5>
<button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary bg-white text-dark"
(click)="hideRsvpModal()">Close</button>
</div>
</div>
</div>
</div>
<!--E:RSVP-->
The following code useful to open modal on openModal() function and close on closeModal() :
function openModal() {
$(document).ready(function(){
$("#myModal").modal();
});
}
function closeModal () {
$(document).ready(function(){
$("#myModal").modal('hide');
});
}
/* #myModal is the id of modal popup */
The same thing happened to me. I wanted to open the Bootstrap modal by clicking on the table rows and get more details about each row. I used a trick to do this, Which I call the virtual button! Compatible with the latest version of Bootstrap (v5.0.0-alpha2). It might be useful for others as well.
See this code snippet with preview:
https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba
Summary:
let exampleButton = document.createElement("button");
exampleButton.classList.add("d-none");
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = "modal";
exampleButton.dataset.target = "#exampleModal";
//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row => {
row.addEventListener('click', e => {
//Set parameteres (clone row dataset)
exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
//Button click simulation
//Now we can use relatedTarget
exampleButton.click();
})
});
All this is to use the relatedTarget property. (See Bootstrap docs)
Here's how you do it with ternary operator
$('#myModal').modal( variable === 'someString' ? 'show' : 'hide');