I want to create one customized confirm box in jQuery with two buttons(OK , Save)
If user press OK, two javascript functions in order should be called and executed, if user press Save just one js function should be called.
Now my question:
how can I call one js function inside the dialoge of confirm box.
this is my code
$('<div></div>').appendTo('body')
.html('<div><h6>If you Click on OK,you willaccept modifications and close the activity, click on Save means: only acceptance without closure the activity?</h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
f1(); // How can I call it...my question is from syntax problem
f2(); // How can I call it...my question is from syntax problem
$(this).dialog("close");
},
Save: function () {
f1(); // How can I call it...my question is from syntax problem
$(this).dialog("close");
}
}
});
as you maybe understand my problem is syntax of this calling.let me tell you f1() and f2() are two javascript function which have defined and implemented.
Thanks in advance
Now I have another Question from this dialog..I want to get response from this dialoge...Let me copy my code maybe in this way you can understand more.
$('<div></div>').appendTo('body')
.html('<div><h6><fmt:message key="message" /></h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
close='yes';
arg="&accept_op_id="+op_id+"&tat="+tat+"&acdd="+acdd+"&ente="+ente+"&fdd="+fdd+"&aed="+aed+"&add="+add+"&close="+close;
openSched('piano',arg,'non_sched');
},
Save: function () {
close='no';
arg="&accept_op_id="+op_id+"&tat="+tat+"&acdd="+acdd+"&ente="+ente+"&fdd="+fdd+"&aed="+aed+"&add="+add+"&close="+close;
openSched('piano',arg,'non_sched');
}
}
});
I want to say: if user clicked on OK,one variable which is called 'close' is assigned yes and then one function (openSched()) will be called with this close value....If user clicked on Save , close =no
How can I do that...do you see one syntax problem??
Thanks in advance for your help
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
f1();
f2();
$(this).dialog("close");
},
Save: function () {
f1();
$(this).dialog("close");
}}
});
$('#dialog').dialog('open');
});
function f1()
{
alert("f1 called");
}
function f2()
{
alert("f2 called");
}
<div id="dialog"><h6>If you Click on OK,you willaccept modifications and close the activity, click on Save means: only acceptance without closure the activity?</h6></div>
Try like this
Working Demo
$("<div></div>").appendTo("body").html("<div title='You Title here' class='newDiv'><h6>If you Click on OK, you will accept modifications and close the activity, <br/><br/> Click on Save means: only acceptance without closure the activity?</h6></div>").find(".newDiv").dialog({
dialogClass: "no-close",
buttons: [{
text: "OK",
click: function () {
fnOnOkay();
$(this).dialog("close");
}
}, {
text: "Save",
click: function () {
fnOnSave();
$(this).dialog("close");
}
}]
});
function fnOnOkay() {
fnOne();
fnTwo();}
function fnOnSave() {
console.log("Call one on save clicked");}
function fnOne() {
console.log("Call one on OK clicked");}
function fnTwo() {
console.log("Call Two on OK clicked");}
Related
I have a modal Window which pops up and wait for 5 seconds and then closes.
The code is as follows
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
}
});
alert("Some Text");
}
callMe() function is called on load of the HTML file. Here I want to show the alert message "Some Text" after the modal window closes in 5 second. But every time when I run this it shows both the modal window and alert box together. I want the modal window to display first , wait for 5 sec and then show the alert box.I tried using sleep but its still coming the same way.
You have 2 options
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
},
close: function(){
alert("Some Text");
}
});
$('#dialog').on('dialogclose', function(event) {
alert('Some Text');
});
}
USE "close" method
use on dialogueClose event both examples are given in code above
It would be nicer if you can tell us what plugin you use for the dialog. I'm guessing the dialog has a close option that accepts a function. So try this:
...
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
close: function() {
alert("Some Text");
},
...
You can put the alert inside the setTimeout, just after you close the window.
JAVASCRIPT
open: function (event, ui)
{
setTimeout(function () {
$("#dialog").dialog("close");
alert("Some Text");
}, 5000);
},
First time I am using JqueryUI.
I am trying to pop a conditional modal to alert the user.
In my ajax call I have the following code:
.done(function (result) {
$('#reportData').append(result);
var totalColumns = '#(ViewBag.TotalColumns)';
if (totalColumns > 10) {
callDialog();
}
else {
print();
}
})
The callDialog function is:
function callDialog() {
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizeable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 600,
dialogClass: 'ui-dialog-osx',
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
};
The HTML for the modal is:
<div style="margin-left: 23px;">
<p>
Some Text
</p>
</div>
The issue I am seeing is the the modal appears, but then quickly goes away and the print() is then called.
I would expect the modal to appear and if the user clicks the OK button the print() would fire off and if the user clicks the cancel it woudl just close the modal.
From the API documentation: http://api.jqueryui.com/dialog/#option-buttons
The way you are using the button option is not correct.
Here is the working snippet:
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.
here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?
jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery
I need to open a popup window on clicking a button and used jquery dialog for this.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
$("#textArea").val("");
}
});
});
function openWindow(){
$("#dialog-form").dialog("open");
statement1;
statement2;
}
<button id="add" onclick="openWindow()">Add</button>
problem over here is when i click the button dialog box is opened, but before even i enter some text in the dialog box statement1 and statement2 are getting executed and then focus is coming to the dialog box.
How can i make the statement1 and statement2 to execute only after dialog box returns?
I don't want to add the statement1 and statement2 to the "Add" function. The reason for not adding the statements in the "Add" function is because i have multiple buttons and each of these should first open the dialog box and then will execute different set of statements.
Easy fix would be to use the close callback:
$(document).ready(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- won't fire until dialog is closed
//statement2 -- won't fire until dialog is closed
}
});
});
function openWindow() {
$("#dialog-form").dialog("open");
}
Another thing to consider would be $.Deferred
I have an example for you:
$(".selector").click(function () {
var dialog = $('<div title="Title"></div>').dialog({
open: function (event, ui) {
$.ajax({
url: 'www.google.com.br',
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
In this case, the dialog is receiving the HTML result, only after it opens.
This can be achieved by the following way:-
$('#mydialog').dialog("open");
$('#mydialog').load('serverURL',server_data_variable, function() {
myfunction();
});
This will execute the function once the dialog loading is done.It will register the callback to be executed post dialog done.The variable server_data_variable is optional and is supposed to be used only if user wants to send some data otherwise it can be skipped as.well.
Solution 1: (same as solution from Aaron Blenkush)
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
//statement1 -- will fire only if "add" button is clicked
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- will fire after dialog is closed
}
});
Solution 2 is to make a promise:
const dialogPromise = new Promise(function (resolve, reject) {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
resolve(true);
},
Cancel: function () {
$(this).dialog("close");
resolve(false);
}
},
close: function () {
$("#textArea").val("");
}
});
});
const addClicked = await dialogPromise;
Call callback function after "open" clause in the dialog setup.
modal: true,
resizable: false,
resize: 'auto',
close: dialogCloseFunction,
**open: function(){if(itemid) {showDailogSides(itemid);}** if(!siteParams[3]) {$(".detailSideClass").hide(); $(".addToChartinDialog").hide();}},
//hide: {effect: "fadeOut", duration: 5000}
show: { effect: "fade", duration: 1000 } //drop blind fade fold slide clip