function Globally() {
$("#dialogid").dialog({ width: 300, modal: true, show: 'drop', hide: 'drop',
buttons: {
"Ok": function () { return true; $(this).dialog('close'); },
"Cancel": function () { return false; $(this).dialog('close'); }
}
});
}
function test()
{
if(Globally())
alert("Ok");
else
alert("Cancel");
}
I am trying to make a confirmation dialog and I want it to placed in a function (in this case Globally()) because I am using confirmation dialog in so many different function, but this is not working , the control returns from the Globally() function without getting true or false value. I want it to stop there until user press Ok or Cancel. How can I do this?
You'll have to use built in confirm function if you want to run code like that:
var question = confirm("Proceed?")
if (question){
// continue
} else {
// stop
}
That is because only confirm when used prevent whole javascript execution and allows you to pick one answer or the other (Ok, Cancel).
Dialogs like jQuery dialog can not stop script execution so even if you use
if(Globally())
alert("Ok");
else
alert("Cancel");
It'll just execute Globally() function and continue right after it - not waiting for a user answer.
If you really want to use jq dialog then add callback functions to your buttons.
"Ok": function () { callbackFunctionTrue(); },
"Cancel": function () { callbackFunctionFalse(); }
And ditch if/else statement() in test function.
That;s not how it works
Just do
"Ok": function () { alert('OK'); $(this).dialog('close'); },
"Cancel": function () { alert('Not ok'); $(this).dialog('close'); }
or
"Ok": function () { $(this).dialog('close'); test(1) },
"Cancel": function () {$(this).dialog('close'); test(0) }
with
function test(ok){
alert(ok?"Ok":"Cancel");
}
Related
I have 7 columns (using html Kendo Grid), and the ID column is a PK of each row and its visible(false).
So.. When you click on any "Name" data, it grabs a PK(the ID that is invisible) of the row you selected, and a modal screen will pop up so you can see more detailed information.
Currently, it is working as expected, however, when the page loads for the first time, I have to double click it to make the modal screen display. Once the modal screen displays, after that, onclick event works as intended.
But I just noticed that when I hit the F12 key to see the log, the number of click increments(like... x2 x3 etc.) everytime onclick event calls.
When I Debug, it hits the debug point in my code but disappears right away so its really hard for me to investigate.
Thank you for your help.
------Column that has the onclick event--------
Columns(columns => {columns.Bound(o => o.SiteID).Visible(false);
columns.Bound(o => o.Name).Title("Your Name").HeaderHtmlAttributes(new {title = "Name(s)"}).ClientTemplate("<a class='nameLink' onclick=\"EditSite(#:SiteID#);\" style='cursor:pointer;' SiteID=\'#=SiteID#\'>#=Name#</a>");
----Jquery onclick event ------
function EditSite(SiteID) {
debugger;
$('.nameLink').on('click', function () {
$('#popUpEdit').dialog({
width: 1000,
height: 920,
show: 'fadein',
hide: 'fadeout',
buttons: { "Close": function () { $(this).dialog("close"); } },
close: function () {
$("#popUpEdit input").val("");
$('#popUpEdit input').prop('checked', false);
$('#statusMessage').html("");
}
});
NameDetails(SiteID);
});
};
You are binding an onClick function every time the EditSite function is called. Try using .off() to unbind any existing handlers.
$('.nameLink').off().on('click', function () { }
Also try wrapping your function so you can pass your SiteID parameter.
(not sure the proper syntax for this)
onclick="EditSite(#:SiteID#)"
Wrapping the function
function EditSite(SiteID) {
return function() {
$('#popUpEdit').dialog({
width: 1000,
height: 920,
show: 'fadein',
hide: 'fadeout',
buttons: { "Close": function () { $(this).dialog("close"); } },
close: function () {
$("#popUpEdit input").val("");
$('#popUpEdit input').prop('checked', false);
$('#statusMessage').html("");
}
});
NameDetails(SiteID);
}
}
On my page I have a button for delete and that triggers a Jquery event for posting showing a dialog first and on continue it passes on the controller and action.
That works fine. Here is the jquery code:
$('#deleteMaintor-dialog').dialog({
autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
buttons: {
"Continue": function () {
$('#aniWait').show();
$.post(deleteLinkObj[0].href, function (data) { //Post to action
$('#Tor').html(data);
$('#aniWait').hide();
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(document).on('click', '#btnDeleteMaintor', function (e) {
deleteLinkObj = $(this); //for future use
$('#deleteMaintor-dialog').dialog('open');
return false; // prevents the default behaviour
});
The problem is that after this, none of the jquery events on the controles are fired anymore.
Why not?
I guess this has to do with the Success part of the $.Post?
I found the solution:
All the controls that were not working anymore were not anchored to the document, so I did that and now it is working fine.
I created a function that replaces the window.alert function with my own function that utilizes jquery.dialog. The problem is that in some functions I call that function and reload the page right afterwards. It is supposed to refresh it when user clicks "OK", but it is reloading the page by itself before I even click "OK".
Here's an example of call sequence in a function:
function UpdateCertSucccess(result) {
customAlert("Hello World");
window.location.href = "./SomePage.aspx";
}
And here's my defined customAlert()
function customAlert(message) {
if (!isOpen) {
$('#error-message-dialog').dialog({
autoOpen: false, bgiframe: true, position: ['center', 100], modal: true, zIndex: '6000', title: 'R+L Carriers Message', width: 475, height: 250,
buttons: {
"OK": function () {
$(this).dialog("close");
isOpen = false;
}
}
});
var elements = message.split("|");
$('#spMessage').text(elements[0]);
$('#spCode').text(elements[1]);
$('#spTime').text(elements[2]);
$('#spServer').text(elements[3]);
$('#error-message-dialog').dialog('open');
isOpen = true;
}
else {
$('#spMessage').append("<br /><br />");
$('#spMessage').append(message);
}
return false;
};
What could be causing the page reload before I close the dialog and how can I fix it?
Thanks!
remove 'window.location.href = "./SomePage.aspx";' from 'UpdateCertSucccess()' function and place it in the function call after Ok click (ok click callback function where you closing the dialog box)
Only browser popups (alert, confirm...) can suspend the execution of a function. You can't achieve the same effect yourself, so you'll need to improve your code, add an "onclose" callback option or something.
So I am opening a
$('#someelement').dialog({ title.......
autoOpen: false,
//......
buttons: { OK: function() {
$(this).dialog('close');}
},
//....
});
During this time a timer is running, if the user clicks "OK" I don't want anything to occur, but if the timer has run down, I would like change the function. I have tried the following unsuccessfully:
jQuery('#SessionTimeoutWarningDialog').dialog('option', 'buttons', {
'OK': function() {
RedirectToLogin;
jQuery(this).dialog('close');
}
});
What am I doing wrong, or how should I be handling this?
I guess I'll answer my own:
//........
$('#someelement').dialog('option', 'buttons', {
'buttonName': function() {
//your new functionality;
}
});
or with the beforeClose event:
$('#someelement').bind('dialogbeforeclose', function() {
//your new functionality;
});
I read lots of questions about this, but every solution uses the same workaround, submiting the form inside the jquery dialog, something like this:
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
Isn't there an easier way, more like javascript confirm?
<input type="submit" onclick="return confirm('are you sure?');" />
Why something like return true, return false doesn't work?
Here's what you can do, you change your input type from 'submit' to 'button', then, you can have your script like this:
$(document).ready(function(){
$("#dialog").dialog({
autoOpen: false,
buttons : {
"Confirm" : function() {
$('#form1').submit();
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$('#submitButton').click(function(){
$("#dialog").dialog('open');
});
});
This way your form will only be submitted when the used confirms the dialog.
The reason it doesn't matter if you return false or true in your case is that the dialog is just shown but code from the submit event keeps on executing unless you return false just after showing the dialog.
I wrote the following code to use JQuery's UI Dialog as a modal confirmation. By submitting the form via the event target there is not a recursive call to the submit event handler.
$(function () {
$('form[action*="/Delete"]').submit(function (e) {
e.preventDefault();
$("<div>Are you sure you want to delete this?</div>").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
e.target.submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
This is because jQuery UI dialogs are not technically modal, unlike confirm and alert. They don't pause the javascript you're in the process of executing. But you can get essentially the same thing like this:
function restOfTheCode(returnValue)
{
//do stuff
}
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); restOfTheCode(true); },
"Cancel" : function() { $(this).dialog("close"); restOfTheCode(false); }
}
});
//anything down here executes immediately after the dialog is shown, so that's no good.
Is equivalent to:
var returnValue = confirm("Are you sure you want to confirm?");
//do stuff
Edit: okay, with the addition of the submit issue the alternate code here doesn't make any sense. But the explanation is the same: it's not modal. If you really wanted to, you could simulate this:
function modalDialogConfirm()
{
var buttonClicked = false;
var valueSelected;
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = true; },
"Cancel" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = false; }
}
});
function y { setTimeOut("x()", 100); }
function x { setTimeOut("y()", 100); }
while(!buttonClicked);
return valueSelected;
}
...but this just freezes the browser, so it's not a whole lot of useful...