Materialize closeModal not firing complete - javascript

If i call $("#modal").closeModal(); inside the modal, the complete method is not triggered. I open the modal with the following.
$("#modal").openModal({
dismissible: false,
complete: this.doSomething
});
Is there something i am doing wrong? Is there a way to trigger the modal to close inside the modal, so that the complete method is triggered? I need to wait for something to happen before the modal is closed.

Is this what you want?
html file
<!-- Modal Structure -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<div id="modal1" class="modal">
<div class="modal-content">
<!--following line has the icon to close the modal on your command-->
<h4>Modal Header <i class = "material-icons right" id = "closeIcon">close</i></h4>
<p>A bunch of text</p>
<!--following button adds text to the <p> tag with id = "textBody" i.e. its doing something and the modal wont close until that is done-->
<button class = "btn waves-effect waves-light" id = "doSomething">Press me and do something</button>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<p id = "textBody">
</p>
jquery
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false,
/*waiting for the user to click the button before closing*/
complete: $('#doSomething').click(function(){
$('#textBody').html('i got a Boo Boo');
$('#modal1').closeModal();
})
});
$("#closeIcon").click(function(){
$('#modal1').closeModal();
});
})
here is the link to check what's happening: https://jsfiddle.net/4y6ptm8k/4/

Related

Modal won't close and prevent default on no click, and won't execute func on yes click

I have a modal with two buttons. One is a yes button and one is a no button. If yes button is pressed, I would like the remainder of the function to execute. If no btn clicked, I would like the page to prevent default and not execute. However, it seems that regardless of which button is clicked, nothing happens besides the modal closing. I am using a modal example I found elsewhere, so this may be the issue. After glancing at it for some time I cannot seem to find where the issue is. Am I missing something small? Or perhaps my Jquery is wrong? Below is my code:
Modal:
<!-- Modal for delete-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content border-primary mb-3 box-shadow-none img-responsive">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body bg-light">
<div id="del" class="center">
<label>Are you sure you want to delete?</label>
</div>
</div>
<div class="modal-footer">
<div id="deleteYes">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteYes">Yes</button>
</div>
<div id="deleteNo">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteNo">No</button>
</div>
</div>
</div>
</div>
</div>
And here is my Jquery:
$(".btnDeleteTerminalCommand").click(function (e) {
$("#deleteModal").modal('toggle');
if ($("#deleteNo").click) {
return e.preventDefault();
}
var rowId = "#" + $(this).data("rowindex");
var row = $(rowId);
var termId = row.find(".tdTermId").html().trim();
var cmdId = row.find(".tdCmdId").html().trim();
var cmdVal = row.find(".tdCmdVal").html().trim();
var cmdID = row.find(".cmdID").html().trim();
var data = {
TerminalID: termId,
CommandID: cmdId,
CommandValue: cmdVal,
ID: cmdID
};
$.ajax({
url: '#Url.Action("DeleteTerminalCommand", "TerminalCommand")',
type: "POST",
data: data,
success: function (response) {
console.log("Success");
window.location.href = response.Url;
}
});
});
Any advice helps! Thank you!
Your click handler will toggle the modal and immediately continue to execute the rest of the function before the user can click anything. If your modal has two buttons, create a click handler for each button. Perhaps the No button just closes the modal. The Yes button handler can execute the actions required to accomplish the task.
$(".btnDeleteTerminalCommand").click(function(e){
$("#deleteModal").modal('toggle');
}
$("#deleteNo").click(function(e){
$("#deleteModal").modal('hide');
}
$("#deleteYes").click(function(e){
// build data object
// ajax post
}

Materialize modal not working

I wrote a simple code for materialize modal.
HTML code:
<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS code:
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
/*$('.view').click(function (){
$('#modal1').modal('open');
alert('edskjcxnm');
});*/
/*$('.view').leanModal();*/
$('#modal1').modal('open');
});
JSFiddle link: https://jsfiddle.net/7f6hmgcf/
Why isn't it working?
Initialize all modals first. $('.modal').modal();
Complete code will look like this
(function ($) {
$(function () {
//initialize all modals
$('.modal').modal();
//now you can open modal from code
$('#modal1').modal('open');
//or by click on trigger
$('.trigger-modal').modal();
}); // end of document ready
})(jQuery); // end of jQuery name space
Not 100% sure what you are asking for here, but if what you are asking is how to trigger modal on button click you can simply do it by setting an onclick like this:
<a class="waves-effect waves-light btn view" onclick="$('#modal1').modal('open');">View Scores</a>
But before you can do $('#modal1').modal('open'); you need to initiate the modal in your js, like this:
$(document).ready(function() {
$('#modal1').modal();
});
You can check out my solution in this fiddle: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/
Another solution might be to do it this way:
<a class="waves-effect waves-light btn view" href="#modal1">View Scores</a>
MaterializeCCS documents aren't too clear, here's how I solved my problem.
HTML
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JavaScript
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
I recently updated my project to materializecss 0.98.0 and with this version I need to initialize modals before open it.
//Old
$('#modal1').openModal();
//New
$('#modal1').modal().modal('open');
I don't find any configuration like "autoOpen" on the modal initial options :(.
$( document ).ready(function() {
$('.modal').modal();
$('#modal1').on('click', function() {
});
});
https://jsfiddle.net/juands/z512cb7f/3/ check this link
Try Materialize.Modal class
let modal=new Materialize.Modal($("#yourModal"));
modal.open(); //Open it on some event
modal.close(); //This is not needed as you can close it with the modal buttons. It's tricky

Showing BootBox with button click in asp.net

Hi I am a beginner and learning asp.net by myself. I want to show a confirmation dialog using bootbox. I searched a lot but couldn't find the solution for this. The bootbox documentation is also not precise really.
Here is the asp.net code for modal dialog:
<!--BootBox Dialog -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
Are you Sure from master page?
</div>
<div class="modal-footer"><asp:Button runat="server" CssClass="btn btn-primary" ID="okButton" Text="OK"/></div>
</div>
</div>
</div>
And by button:
<asp:LinkButton runat="server" ID="EditButton" CssClass="btn btn-primary" ClientIDMode="Static">
<i class="fa fa-edit"></i> Edit Selected
</asp:LinkButton>
The bootbox JavaScript to show confirm dialog:
<script>
$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
</script>
Where should I pass the ID of the button and show the modal? Please help.
Used this--
$("#EditButton").on("click", function(){
//Do your Stuff here
}

jquery modal: closing a modal and then having it available as a clickable option

I been scratching my head on this one for a while.
Writing a plugin in grails that calls on bootstrap-mini.js and most of its css. Everything works fine. The issue I am having is I have a remote form which onComplete runs java script:
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListModal/_modalcreate.gsp
<g:javascript>
function ${controller}CloseModal() {
var myClone=$('#BuildModal${id}').clone();
$('#BuildModal${id}').dialog().dialog('close');
$(".modal-backdrop").hide();
$('body').removeClass('modal-open');
//var myCloner = myClone.clone();
$('#${divId}1').hide().append(myClone);
//$('body').append(myClone);
<g:if test="${!disablecheck.equals('true') }">
var controller="${controller }";
var divId="${divId }";
$.get('${createLink(controller:"MailingListEmail", action: "getAjaxCall")}?ccontroller='+controller+'&divId='+divId,function(data){
$('#${divId}').hide().html(data).fadeIn('slow');
});
</g:if>
}
</g:javascript>
The bits at the top of the function is all the things I have tried so far.
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListEmail/contactclients.gsp
<div class="tbutton">
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender">
New Sender?</button>
<div id="mailerSenders1">
<g:render template="/mailingListModal/modalcreate" model="[title:'Add Senders Email', controller: 'mailingListSenders', callPage: 'form' , divId: 'mailerSenders', id: 'SENDERS' ]" />
</div>
And finally modelForm which is included on the top of the modalcreate.gsp (now shown)
<div class="modal fade" id="BuildModal${id}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<g:formRemote id="${controller}" name="urlParams" class="form-horizontal" url="[controller:controller, action:'save']"
update="BuildModal${id}" onComplete="${controller}CloseModal()"
>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>${title }</h3>
</div>
<div class="modal-body">
<div class="form-group">
<g:render template="/${controller }/${callPage }"/>
<g:submitToRemote class="myformsubmit" url="[controller:controller, action:'save']" update="BuildModal${id}" onComplete="${controller}CloseModal()" value="Create" />
</div>
</div>
</g:formRemote>
</div>
</div>
</div>
</div>
So it is a remote Form that submits can calls the above CloseModal
The question is when I Close this how do I make it available again when the user clicks the button to create new email ?
After adding all the cloning at the top of java script the only difference I was able to make was to make it display the backdrop on 2nd click so it went black on 2nd click but did not show up the modal content.
ok got it working by doing this:
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender"
Now adding
onClick="runCheck()"> .....
<g:javascript>
function runCheck() {
$('#mailerSenders1').show();
}
</g:javascript>
That seems to work fine, it now loads up the page, just to add when I did body it just loaded it up again from the commented out attempts, modal.hide etc did not work and the hide attempts just showed it up under some other layers of the same page.. anyways this works fine now. sorry

prevent bootstrap modal window from closing on form submission

Hi I'm using Bootstrap for the first time and I can't get my modal form to stay open on clicking the submit button.
I've searched SO but all related questions deal with slightly different issues (example below).
Disallow twitter bootstrap modal window from closing
Remove the following:
data-dismiss = "modal"
From the button that should not close the dialog. After that, you can close the dialog by using $( "#TheDialogID" ).modal( "hide" ). Example:
<!--<SimpleModalBox>-->
<div class="modal fade" id="SimpleModalBox" tabindex="-1" role="dialog" aria-labelledby="SimpleModalLabel" aria-hidden="true">
<!--<modal-dialog>-->
<div class = "modal-dialog">
<!--<modal-content>-->
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal">
<span aria-hidden="true">×</span>
</button>
<h4 class = "modal-title" id = "SimpleModalLabel">Title for a simple modal</h4>
</div>
<div id="TheBodyContent" class = "modal-body">
Put your content here
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Yes</button>
<button type = "button" class = "btn btn-default" onclick="doSomethingBeforeClosing()">Don't close</button>
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Cancel</button>
</div>
</div>
<!--<modal-content>-->
</div>
<!--/modal-dialog>-->
</div>
<!--</SimpleModalBox>-->
Javascript code:
//#region Dialogs
function showSimpleDialog() {
$( "#SimpleModalBox" ).modal();
}
function doSomethingBeforeClosing() {
//Do something. For example, display a result:
$( "#TheBodyContent" ).text( "Operation completed successfully" );
//Close dialog in 3 seconds:
setTimeout( function() { $( "#SimpleModalBox" ).modal( "hide" ) }, 3000 );
}
//#endregion Dialogs
look at => http://getbootstrap.com/2.3.2/javascript.html#modals
use
data-backdrop="static"
or
$("#yourModal").modal({"backdrop": "static"});
Edit1 :
on your link opening your modal ==>
yourModal
Edit2 :
http://jsfiddle.net/BVmUL/39/
This is how I did in my program, hope it helps.
This is the button which triggers the modal. Here I have disabled the keyboard and mouse click outside the modal.
<button type="button" data-toggle="modal" data-target="#modalDivId"
data-backdrop="static" data-keyboard="false">
This is the modal div, with a form and a submit button. Replace ... with your modal content.
<div class="modal fade" id="modalDivId" role="dialog">
<form>
...
<button type="submit" onClick="myFunction()" class="btn btn-success">
Submit
</button>
</form>
</div>
Finally the function which triggers when you click submit button. Here event.preventDefault(); will prevent the default action of form submit, so that the modal will remain.
function myFunction() {
$("form").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: "yoururl",
type: "POST",
data: yourData,
success: function (result) {
console.log(result)
}
});
})
}
If you want to add multiple data and you want modal to stay open use
<button type="button"></button>
and If you want to close the modal after submitting data you must use
<button type="submit"></button>
I ran into the similar problem where I use modal as a form so I cannot initially set data-backdrop="static" data-keyboard="false" because I want the user to be able to close it as long as he has not submitted the form. Once he has submitted the form, I want to prevent him from closing the form modal. Here is how I can get around.
$('#modalForm').on('submit', function() {
$(#modal).on('hide.bs.modal', function ( e ) {
e.preventDefault();
})
});
Use this to prevent bootstrap modal window from closing on form submission
$( "form" ).submit(function( event ) {
event.preventDefault();
});
use below code only:-
$(document).ready(function () {
$("#myModal").modal('show');
});
and write your html code in update panel then remove data-dismiss="modal" from the button. Hope it works for you.

Categories