Bootsrap Modal on hide method does not trigger - javascript

Modal:
<div id="modalRelease" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Revision Release</h4>
</div>
<div class="modal-body">
<div style="text-align:center; color:red;"><p>You are about to release to the next Revision level.</p></div>
<div style="text-align:center;"><p>Description Required:</p></div>
<div>
<textarea name="RevisionDescription" id="RevisionDescription" class="form-control" placeholer="Description..." data-rule-required="true" data-msg-required="Please enter a description."></textarea>
</div>
</div>
<div class="modal-footer">
<div class="alert alert-danger" id="RevisionSubmitError">A description is required.</div>
<div>
<button type="button" class="btn btn-success" id="ReleaseSubmit">
<i class="fa fa-save"></i> Submit
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<i class="fa fa-remove"></i> Cancel
</button>
</div>
</div>
</div>
</div>
</div>
Button Click Capture Event:
$(document).on("click", "#ReleaseSubmit", function (event) {
if ($.trim($('#RevisionDescription').val()) == "") {
$("#RevisionSubmitError").fadeIn("slow", function () { });
}
else {
submitForm('release')
}
});
Then, trying to capture the Hide event so that the error message is not still visible should the user close and then re-open the modal, but this isn't ever triggering:
$('#modalRelease').on('hide.bs.modal', function () {
$('#RevisionSubmitError').hide()
})
Where 'RevisionSubmitError' is a div inside the modal-body. The div is never hidden. I have also tried hidden.bs.modal.
Using Bootstrap v3.3.6

Are you calling .modal('hide') on the modal after the form submit? That is the call which needs to be made for 'hide.bs.modal' to fire

Related

Why when I set data-backdrop = "false", it can't close modal when I click outside of modal?

My code like this :
<div class="container">
<h1 class="display-4 text-center mb-4">Bootstrap Modals</h1>
<div class="row mb-4">
<div class="col text-center">
<h3>The Basic Modal</h3>
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal" data-backdrop="false" data-keyboard="true" >Click to open Modal</a>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div class="form-group">
<label for="exampleFormControlTextarea1">Input data</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"> </textarea>
</div>
<!-- basic modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
Demo and full code like this : https://codepen.io/trendingnews/pen/BayQLrm?editors=1010
I set data-backdrop="false" to remove backdrop
but it makes me unable to click on something. I have to click the close button on the modal to close on the modal.
how do I make it when I click on any element outside of modal, the modal automatically closed?
for example, I click textarea or other elements, the modal is automatically closed
As an extension to my comment, adding as an answer for anyone else that comes across this.
Problem:
You want to use a bootstrap modal, with no backdrop, and have the functionality that clicking away from the modal closes it.
Challenge:
The bootstrap modal backdrop has a listener on it so when clicked, it closes the modal. However, if there's no backdrop, then this cannot happen.
Solution:
Use a backdrop as normal but set it's color to transparent. Set the css background-color property on the backdrop e.g.
.modal-backdrop { background-color: transparent; }

css selectors, set property for all except two tags

i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!
How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});

Call show.bs.modal event before parent event

I have a bootstrap button (I used bootstrap 4) that open a modal and transfer the data that in the button to the form in the modal by the function:
$('#exampleModal').on('show.bs.modal', function (event).
the button is in a div (parent).
when I click on the button the parent event called before the child.
I don't want the parent event to be run.
I need only the popup modal to open.
when I try to open the button by onclick its call first but the data is not transfer.
this is my code example: codepen
this is the html
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
this is the script
<script>
$(".parent").click(function(event){
alert("Parent event");
})
/*
if I add this function I cant transfer the data that in the button
$(".child").click(function(event){
alert("Child event");
event.stopPropagation();
$('#exampleModal').modal('show');
})*/
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
</script>
Quite simple in the parent click , check if target is different to the button with data-target='#exampleModal' or not , all that using the .is() jquery function like below :
//get reference to the button
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) { // be sur button was'nt clicked
alert("Parent event");
}
})
Updated Pen
See below working snippet :
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) {
alert("Parent event");
}
})
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
body {
background-color: #a3d5d3;
}
.col-12{ background:red; height:100px;}
.child{background:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

Bootstrap modals don't close

I need to close 2 modals in the same time. Why?
I have 2 modals, first shows the information and the second shows a exclude confirmation. When i close the second i want to close all modals.
This is in ASP.NET MVC and RAZOR.
This JS dont work, can you help me? Thanks!!
$(function () {
$(".close-modal-edit").click(function () {
$('.modal').modal('hide');
});
});
<!-- FIRST MODAL -->
<div class="portfolio-modal modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body text-left">
<a class="btn btn-success pull-right" data-dismiss="modal"> Close </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONFIRMATION MODAL -->
<div class="portfolio-modal modal fade" id="dialog-exclude" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content modal-content-edit">
<div class="close-modal close-modal-edit" data-dismiss="modal">
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div class="modal-body text-left">
<a class="btn btn-success pull-right close-modal-edit" data-dismiss="modal"><i class="fa fa-times"></i> Cancel </a>
</div>
</div>
</div>
</div>
</div>
</div>
this seems to work for me. Looping through the modal objects and closing them individually.
$(".close-modal-edit").click(function () {
$.each($(".modal"), function (i, obj) {
$(obj).modal('hide');
});
});
Note: looks like your original $('.modal')modal('hide'); works for me as well here's a fiddle, use it this as a base, see if it works in your project, and if not we'll need more info about your project. http://jsfiddle.net/hxo5kccs/
Can you remove data-dismiss="modal" from both modal and try?

I can't clear form data from bootstrap modal

i have a little problem when im trying to clear bootstrap modal data..
there is my modal.
<div id="modal-creacion-alias" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<form id="form-alias-dominio" method="POST" class="form">
<div class="modal-content">
<div class="form-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h2 class="modal-title">Alias de dominios</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-md-4 control-label">Nombre del Alias<span class="required">*</span></label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Contraseña" data-container="body"></i>
<input type="text" class="form-control" name="nombre-alias-dominio" id="nombre-alias-dominio">
<br>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer ">
<button type="button" data-dismiss="modal" class="btn default">Cancelar <i class="fa fa-sign-out"></i></button>
<button type="submit" id="crear-alias-domino" class="btn gtd-blue-hard crear-alias-domino">Crear <i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
and this is the js function:
$('body').on('hide.bs.modal', '.modal', function () {
&(this).removeData('bs.modal');
});
but when i close and re open modal the data still there.
how can i solve it?
thanks.
You can reset all input data by using $(form).trigger('reset')
$('body').on('hide.bs.modal', '.modal', function () {
$('#form-alias-dominio').trigger("reset"); //here your form_id
});
I was able to clear data doing this
$('body').on('hide.bs.modal', '.modal', function (e) {
$(this).find('form').trigger("reset");
});
thanks #Sadikhasan

Categories