ASP Button - run OnClick after OnClientClick dialog is closed - javascript

I have a page with a button on it. I need a dialog to be opened when user click it (I'm using JQuery UI).
Dialog has two buttons: run server code or close dialog.
The problem is that dialog could wait for user action only if OnClientClick returns false, but in this case OnClick won't fire.
So far I have this code, dialog window closes a moment after it opens.
Any ideas?
$(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 240,
width: 440,
modal: true,
buttons: {
"RUN SERVER PART": function () {
$(this).dialog("close");
return true;
},
"CLOSE": function () {
$(this).dialog("close");
return false;
}
}
});
});
function shwindow() {
if ($("#dialog-confirm").dialog("open"))
return true;
else
return false;
}
<asp:Button ID="aspbt" runat="server" OnClientClick="if(!shwindow()) return false;" OnClick="aspbt_Click" />

managed to postpone OnClick event by setting FALSE as a return value and calling postback:
"RUN SERVER PART": function () {
$(this).dialog("close");
__doPostBack($("[id$=aspbt]")[0].name, '');
return true;
}
I don't really like this solution so maybe someone has a better one...

try this:
<asp:Button ID="aspbt" runat="server" OnClientClick="return shwindow();" OnClick="aspbt_Click" />

function shwindow() {
if($("#dialog-confirm").dialog("isOpen")){
return true;
}
else{
return false;
}
}
Check dialog is visible or not by using 'isOpen'. Based on that return true or false.
Update:
if($(".ui-dialog").is(":visible")){
}
Demo:
http://jsfiddle.net/fprvt2pq/

Related

How to display a dialog box once returning null to onbeforeunload?

I am returning nothing to window.onbeforeunload which results in the default pop-up box not displaying.
Like so:
window.onbeforeunload = function() {
return;
}
Brilliant.
Now my issue is, I want to call another function which displays a custom dialog box as such:
window.onbeforeunload = function() {
dialogBox() // function that generates a custom dialog box.
return;
}
I positioned the function above the return. This displays the dialog box momentarily and continues with the refresh. How can I pause the refresh completely when the dialog box is displayed?
Thank you all for your time.
Edit: My Dialog box does not return anything.
Here's the code for that:
function dialogBox(){
$( "#dialog" ).dialog({
modal: true,
width: 500,
buttons: {
"Save": function() {
},
Cancel: function() {
$(this).dialog("close");
},
"Close": function() {
window.location.href = document.referrer;
}
}
})
}

jQuery ("#dialog").dialog('close') not working with button on separate view

I have an ASP.NET view in an MVC project in which I am trying to create a pop-up dialog to create data. There is another view that gets loaded and that view has a button with the id "btncancel_create". I cannot get that button to close the dialog. I am using jQuery 2.1.3 and jQuery UI 1.11.4.
Here is the code for the button:
<input type="button" value="Cancel" id="btncancel_create" />
And here is the view:
$(document).ready(function () {
//alert("Document is ready");
var url = "";
$("#dialog-create").dialog({
title: 'Create User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-create").dialog('open');
return false;
});
//$("#btncancel_create").on("click", function (e) {
// $("#dialog-create").dialog("close");
// return false;
//});
$("#dialog-create").button("#btncancel_create").click(function (e) {
alert("btncancel_create was clicked");
$("#dialog-create").dialog('close');
return false;
});
});
<div id="dialog-create" style="display: none"></div>
<p>#Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })</p>
As you can see, I tried something else which didn't work, which is commented out. The uncommented button click function does return the alert, but does not close the dialog. Thanks in advance for your help, and please let me know if you need any more information.
Instead of
$("#btncancel_create").on("click", function (e) {...
(in my commented out code above)
it should be
$(document).on("click", "#btncancel_create", function (e) {....
I found the answer here: Turning live() into on() in jQuery.

Return value of jquery UI dialog Box

You may find solution over this in many posts(Post 1 , Post2 ), but their solution not working for me.
Here is the normal jquery dialog box written by me.
$("#dialog").dialog({
autoOpen:false,
buttons:{
"ok":function(){
$(this).dialog("close");
return true;
},
"cancel":function(){
$(this).dialog("close"); return false;
}
}
});
I will open the dialogbox with code:
var returnVal=$("#dialog").dialog("open");
I need to return false,if user clicks 'cancel' and return true if user clicks 'ok'.
var returnVal=$("#dialog").dialog("open");
I NEED returnVal to return boolean value(true/false), but it returns javascript object.
You cannot return something from the OK / cancel functions as they are essentially event handlers that are only processed upon the click of a button.
Use a separate function to process the result :
$mydialog = $("#dialog").dialog({
autoOpen: false,
buttons: {
"ok": function() {
$(this).dialog("close");
processResult(true);
},
"cancel": function() {
$(this).dialog("close");
processResult(false);
}
}
});
$mydialog.dialog("open");
function processResult(result) {
alert(result);
}
Working example : http://jsfiddle.net/nz2dH/
I have implement Yes/No confirmation dialog with custom message and callback function like this. This is useful, if you like to use the same dialog for various purposes.
<script type="text/javascript">
// prepare dialog
$(function () {
$("#confirm-message-dialog").dialog({
autoOpen: false,
modal: true,
closeOnEscape: false,
buttons: {
Yes: function () {
$(this).dialog("close");
$(this).data("callback")(true);
},
No: function () {
$(this).dialog("close");
$(this).data("callback")(false);
}
}
});
});
// open dialog with message and callback function
function confirmMessageDialog (message, callback) {
$('#confirm-message-dialog-message').text(message);
$('#confirm-message-dialog').data("callback", callback).dialog("open");
};
</script>
<!-- The dialog content -->
<div id="confirm-message-dialog" title="Warning">
<p id="confirm-message-dialog-message"></p>
</div>
Hope that this helps others as well :)

Jquery modal dialog and form submit

I have a form where I need to display a confirm dialog to the user before saving.
I have done this by intercepting the form submit function as follows:
$("#my_form").submit(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
e.preventDefault();
return false;
}
});
However, the OK button does not function correctly - the dialog does not close and the form is not submitted.
If I change the OK function as follows, then the dialog is closed and the alert is shown.
"OK": function() {
$dialog.dialog('close');
alert('form will be submitted');
},
So, I am guessing that this is something to do with the $("#my_form").submit(); method.
Isn't this like calling your form submit function again and again. I see you are attaching the function to submit functionality, and when you call the submit again,it is invoking the same function.
Your $("#invoice_edit_form") is some other form.Is it like asking one form to submit other form?
The problem you've got is that your submit handler always returns false and has e.preventDefault() too for good measure. Both of these will stop the form being submitted, regardless of whether the user clicked OK or Cancel.
You need to change the logic so that your modal confirmation is shown on a button click (or any other event), not on the form submission. Then, if the user clicks ok you can call the forms' submit() method.
$("#submitButton").click(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
});

How to call javascript function from asp.net button click event

How do I call the showDialog from a asp.net button click event. My page is a contentpage that has a masterpage associated with it.
I have tried the following
<asp:Button ID="ButtonAdd" runat="server" Text="Add"
OnClientClick="showDialog('#addPerson');" />
<asp:Button ID="ButtonAdd" runat="server" Text="Add"
OnClientClick="showDialog(#<%=addPerson.ClientID %>);" />
I am also going to have to call this same function from a gridview template button to modify the record on the dialog.
<script type="text/javascript">
// Used the following example to open the dialog withJquery
var dl;
$(document).ready(function () {
//Adding the event of opening the dialog from the asp.net add button.
//setup edit person dialog
$('#addPerson').dialog({
//Setting up the dialog properties.
show: "blind",
hide: "fold",
resizable: false,
modal: true,
height: 400,
width: 700,
title: "Add New Member",
open: function (type, data) {
$(this).parent().appendTo("form:first");
}
});
//setup edit person dialog
$('#editPerson').dialog({
//Setting up the dialog properties.
show: "blind",
hide: "fold",
resizable: false,
modal: true,
height: 400,
width: 700,
title: "Modify Member",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
function showDialog(id) {
$('#' + id).dialog("open");
}
// function closeDialog(id) {
// $('#' + id).dialog("close");
// }
//Adding a event handler for the close button that will close the dialog
$("a[id*=ButtonCloseDlg]").click(function (e) {
$("#divDlg").dialog("close");
return false;
});
});
</script>
Tried to call the jquery dialog from a gridview editbutton and get the same error Object doesnt support this property or method?
<input type="submit" name="ctl00$ContentPlaceHolder1$GridViewMembers$ctl02$Button1" value="Edit" onclick="showDialog('addPerson');" id="ContentPlaceHolder1_GridViewMembers_Button1_0" />
If you don't need to initiate a post back when you press this button, then making the overhead of a server control isn't necesary.
<input id="addButton" type="button" value="Add" />
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#addButton').click(function()
{
showDialog('#addPerson');
});
});
</script>
If you still need to be able to do a post back, you can conditionally stop the rest of the button actions with a little different code:
<asp:Button ID="buttonAdd" runat="server" Text="Add" />
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#<%= buttonAdd.ClientID %>').click(function(e)
{
showDialog('#addPerson');
if(/*Some Condition Is Not Met*/)
return false;
});
});
</script>
You're already prepending the hash sign in your showDialog() function, and you're missing single quotes in your second code snippet. You should also return false from the handler to prevent a postback from occurring. Try:
<asp:Button ID="ButtonAdd" runat="server" Text="Add"
OnClientClick="showDialog('<%=addPerson.ClientID %>'); return false;" />

Categories

Resources