Related
When I open a Bootstrap modal I want to perform an action, in this case an alert().
How do I check if a Bootstrap modal is open so I can perform an alert()?
I don't call the modal with a jQuery selector, I just let Bootstrap do that part of work.
This is my code but it doesn't work:
if ($("#myModal").data("bs.modal") && $("#myModal").data("bs.modal").isShown){
alert("test");
}
You can use the bootstrap modal events :
$('#myModal').on('shown.bs.modal', function (e) {
alert('modal is now loaded');
}
Or you can use this event before the modal is shown :
$('#myModal').on('show.bs.modal', function (e) {
alert('modal is not displayed yet');
}
look Here for more information about JavaScript bootstrap
I have it figured out, it appears that my approach is the wrong way to do it, instead I should have called this inside a function:
$('#myModal').click(function(){
alert("myModal is clicked");
})
This way, the alert() will only show if the function has succesfuly executed.
Requirement is to show dialog box on click of a button.I have created dialog box using jQuery UI. Please find the code here http://jsfiddle.net/M4QM6/32/.
ISsue is i have single function for creating dialog box, how can i show multiple dialog box within same page with each dialog box displaying different data,
When i click on dialog2 button, i need to show a dialog box which has textArea and a submit button.Please suggest.
Below is the sample code:
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
});
You could go a couple routes. Since your need for dialog content is pretty specific (textarea control - first dialog pops second dialog - etc), I would hard-code the needed divs on the page. So, make a "#textAreaDialog" div and put the needed controls in it ad set its style to display:none.
Next, modify your function to accept parameters (the name of the div that should be popped, the funciton to execute if "OK" is clicked - and the function to execute if "Cancel" is clicked), so you're not limited to using #dialog for all of your modals and you can finely control what happens when each button is clicked (not always just closing the dialog. Then, set event handlers for the click events of the buttons you need, and call your dialog accordingly.
html:
<input type="button" id="btnPopFirstModal" Value="Open First Modal"/>
<div id="divFirstModal" style="display:none;">
Here is the content for the first modal
</div>
<div id="divSecondModal" style="display:none;">
Here is the content for the second modal
</div>
Javascript functions:
function PopDialog(divToPop, OkFunction, CancelFunction)
{
$("#" + divToPop).dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Ok": function() {
OkFunction();
$(this).dialog("close");
},
"Cancel": function(){
CancelFunction();
$(this).dialog("close");
}
}
});
});
}
function PopSecondModal(){
PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here});
}
Javascript event handlers:
$("#btnPopFirstModal").click(function(e){
e.preventDefault();
PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed
return false;
});
Remember, you can expand this as much as you want, adding more event handlers and custom divs to use for more tailored modals. Also, as you can see, you can write your OK and Cancel funcitons inline when calling the PopDialog function - or you can pass it a function name (this is preferable if you're going to reuse that function).
Here is how I did:
$(
//when JQuery is ready
funciton()
{
$('#SomeButton').on
(
'click',
function()
{
//Note that content could be anything (HTML, text...)
//This dynamicly create a div to be your dialog
$('<div>').append(content).dialog
(
{
//autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now
resizable: true,
//I remove the double quotes here because height didn't have any but maybe it was the other way around
width:750,
height:300,
//I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals.
modal: false,
buttons:
{
Close: function()
{
$(this).dialog("close");
}
},
//this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup.
close:
function()
{
$(this).dialog('destroy').remove();
}
}
);
}
);
}
);
I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle
Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/
I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.
Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
I have a modal that I call onclick like so...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
So I tried
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Try this
Here is the old DEMO:
EDIT:
(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
I am using this in my layout to capture all modals and focus on the first input
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
Instead simple on():
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
$('body').on 'shown.bs.modal', '#modal', ->
Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
I can think of two ways to solve this problem:
Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry #keyur, I mistakenly edited and saved as new version of your example)
Call focus() in shown event like what #keyur wrote.
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents() on document ready.
Use:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
I had the same problem with the bootstrap 3 and solved like this:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap has added a loaded event.
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
Bootstrap modal show event
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
A little cleaner and more modular solution might be:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
Or using your ID as an example instead:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
Hope that helps..
I am using JQuery's $.dialog(), where I open a dialog with OK and Cancel buttons.
I would have expected that when the dialog opens, the code stops, and would first continue, when the user had selected OK or Cancel.
Here is my complete source code
http://pastebin.com/uw7bvtn7
The section where I have the problem is at line 127-151.
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
resizable: false,
height: 600,
modal: true,
open: function() {
$(this).children('div.dialog-text').replaceWith("<h3><b>Users</b></h3>" + makeDialogTable(users) + "<h3><b>Owners</b></h3>" + makeDialogTable(owners));
},
buttons: {
"Okay": function() {
$(this).dialog("close");
},
Cancel: function() {
is_okay = 0;
$(this).dialog("close");
}
} // buttons
}); // dialog
alert(is_okay);
What the code does right now is to first show the dialog and then the alert(is_okay) on top.
What I would like is that the code first continues when the user have pressed OK or Cancel.
How could that be done?
You can put your additional code in the "Okay" and "Cancel" button functions. For example:
"Okay": function() {
$(this).dialog("close");
alert(is_okay);
},
That can't be done in a "good" manner plus I strongly recommend not to go that way.
What you describe is a complete blocking, modal window/dialog which is just aweful for web applications. You're already creating the dialog with the modal flag, so a user can't really do anything on your site while the dialog is open, BUT the UI keeps responsive.
Again, there is actually no way to "hold" code execution. Any approach in that direction would freeze the UI thread since Javascript and UI updates share the same thread.
Since quite a few years, developers pushed Javascript to be more and more non-blocking (Javascript in browsers actually always followed that route, which is very good thing). The idea was reborn with nodeJS on the backend. So, you're swimming upstream here, don't do it.
Whatever the problem is you try to solve there, try to think in different way. Think functional, use callbacks and events, think... ECMAscript! :p
The code does execute sequentially. The job of $("#dialog-confirm").dialog() is to popup a dialog box. alert(is_okay) won't execute until the lines above it have been executed. But Okay and Cancel are event listeners.
"Okay": function() {
$(this).dialog("close");
}
The code above assigns event listeners to events. That's all it does, it does not execute those functions, it just assigns those functions to event calls.
I would recommend doing some reading on events and event listeners. If you plan on using JQuery seriously, it will save you a lot of confusion.
$("#dialog-confirm").dialog({ ...
close :(event, ui) { alert(is_okay);}
})
Or you can bind function later :
$( "#dialog-confirm" ).bind( "dialogclose", function(event, ui) {
alert(is_okay);
});
The code doesn't stop and continue like it does with alert , but it will display message only when dialog is closed.
Simply put all code that follows after opening the dialog in a function and call that function from the dialogs callback function for okay / cancel.
function doTheRest(args) {
alert(args);
}
// snippet from dialog options
"Okay": function() {
$(this).dialog("close");
doTheRest(1);
},
"Cancel": function() {
$(this).dialog("close");
doTheRest(0);
}
Browsers use an event-based, asynchronous programming model where many things can (and do) occur at the same time. This is how style-transitions (animations like rolldown or fade) work.
Your example displays a dialog and then throws an alert. It cannot "wait" for the user to click on a button because doing so would stop the browser from doing anything else.
So you'll need to refactor your code to do whatever you require to happen when either the OK or Cancel buttons are clicked within the callback associated with the action.
In other words, you need to:
buttons: {
"Okay": function() { // this function is called when a user clicks the Okay button
// do whatever work is required here
}
}
There is no direct way to "wait" for something in JavaScript -- asynchronous events are generally handled through callbacks. This means you need to think of your program in terms of events and not as sequential code. Instead of your current code:
$("#dialog-confirm").dialog({
...
});
alert(is_okay);
// rest of code
you need to wrap the "rest of code" section into its own function, then call that from the OK/Cancel callbacks of your dialog:
$("#dialog-confirm").dialog({
...
buttons: {
"Okay": function() {
$(this).dialog("close");
what_happens_if_okay();
},
Cancel: function() {
$(this).dialog("close");
what_happens_if_not_okay();
}
} // buttons
}); // dialog
So if I understand correctly you want an alert to show up with the options OK and Cancel and the Dialog would not come up unless OK was hit.
Instead of using another alert why not try using another dialog with Ok and Cancel in it?
In your html do this:
<div id = "hiddenDialogElements">
<button id = "Ok" onclick = "confirm(true)">OK</button>
<button id = "Cancel" onclick = "confirm(false)">Cancel</button>
</div>
With this css:
#hiddenDialogElements
{
display: none;
}
Then you can do this on the event that will create the dialog (Where you want a wait):
$('#hiddenDialogElements').dialog({
//Code
});
And this:
function confirm(ifOk)
{
if(ifOk)
{
//Create Dialog
}else {
//Do nothing
}
}
Do Something Like this ...
function MyAlert(Message, Title,FuncExecAfterOkPressed) {
$("<div>" + Message + "</div>").dialog({
title: Title,
dialogClass: "alert",
width: "auto",
modal:true,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
buttons: [
{
text: "Ok", click: function () {
$(this).dialog("close");
if (FuncExecAfterOkPressed != null) {
$.Callbacks().add(FuncExecAfterOkPressed).fire(null);
}
}
}]
});
}
Now Call it like this
MyAlert(data, "Duplicate", function () {
alert("I m moumit");
$("#Name").val("");
});
One thing u need is JQueryUI plugin... Enjoy.