We Keep Coding

How to block the popups alert on beforeUnload while using custom alert popup?

I am using JqueryUI for custom Confirm box when user clicks on a button.
Here is the script,
function exit() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Restore": function () {
callClick();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Here is the HTML code
<asp:Button ID="btnExit" runat="server" Text="Exit" OnClientClick="exit()" />
<div id="dialog-confirm" title="Proceed Confirmation?">
<p>Are you sure you want to exit?</p>
</div
When user click on proceed button i want to call another function.
window.onbeforeunload = null;
function callClick() {
$('#test').click()
}
But as soon as button is clicked alert popups appear along with my custom made alert popup.
i wish to disable the default popup.
please see below image for referrence.

Try to use this method window.onbeforeunload = function(event){} to catch this event.

dialog modal window not closing when called from child page

I am trying to use the jQuery UI dialog as pop up window and I wanted to put another aspx page as body to the Jquery UI Dialog. here I do not want to use the Jquery button option. At the child page, I have put button which is supposed to close the modal window and refresh the parent page. Below is the code I have been trying to implement but some reason I am getting js error message. Am I missing something here ?
Parent Page : aspx page
<div>
<div id="dialog" title="This is Pop up ">
<div class="modal">
<div class="modal-body">
<iframe style="width: 100%; height: 100%;" src="childPage.aspx" runat="server" frameborder="0"></iframe>
</div>
</div>
</div>
<input type="button" value="open" id="OpenDialog"/>
</div>
Jquery code : parent page
$(function () {
var dialog
dialog = $("#dialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
$("#OpenDialog").button().on("click", function () {
dialog.dialog("open");
});
});
Child page :
<input type="button" id="btnCloseChildPageRefreshParent" value="Close and Refresh Parent Page" />
Child Page Js code :
$(function () {
$('#btnCloseChildPageRefreshParent').on('click', function () {
refreshParent();
open(location, '_self').close();
});
function refreshParent() {
window.opener.location.reload();
}
});

This is an iframe so you need to use window.parent (see the MDN documentation here) instead of window.opener. It is not a new window, but a frame, so there is no opener.
Note that the domain of the frame and parent must match, or the call will fail due to cross-domain security restrictions.
The code sample below will print out the value of window.opener and the error generated by the call to window.parent.location.reload to illustrate this.
function log (o) {
var el = document.createElement('div');
el.innerHTML = o;
document.body.appendChild(el);
}
document.getElementById('button').onclick = function () {
//This line could be used if the domain of the frame and parent match
//window.parent.location.reload();
log('window.opener is: ' + window.opener);
try {
window.parent.location.reload();
}
catch (e) {
log('Attempted to call window.parent.location.reload(): ' + e);
}
}
<button id="button">Reload Parent</button>

Failing to get value of an html input field

I've got a html dialog window, with a simple input field, and two buttons (OK and Cancel).
The user will be prompted to enter text into the input field and then select OK, then I want to take the contents of the input (type text) field and use it. However, I cant seem to get the contents of the input field.
Here is the code I have:
Html dialog contents:
<div id="DescriptionDialog" title="Update Settings" style="display: none;">
<p>Please enter the reason for this update: </p>
<input id="StateDescription" name="StateDescription" class="longer" type="text" placeholder="enter description of change"/>
</div>
The javascript function - the function is triggered by another button on the main page - to open the dialog:
function DialogFunction() {
$('#DescriptionDialog').show();
$('#DescriptionDialog').dialog({
open: function () { $('.ui-dialog :button').blur(); },
width: 500,
modal: true,
resizable: false,
buttons: {
"OK": function () {
alert('OK');
var description = $('#StateDescription').val();
alert(description);
//This is where i will make an ajax call to use the description entered.
$('#StateDescription').val("");
$('#DescriptionDialog').hide();
$(this).dialog('close');
},
"Cancel": function () {// get rid of the dialog and reset the form
$(this).dialog('close');
$('#StateDescription').val("");
$('#DescriptionDialog').hide();
}
}
});
}
For some reason when i select OK, the alert to show "OK" appears, then no matter what i have entered in the input field, the alert for the description is always blank or if i set a value in the html then it is that.
Any ideas?

are you sure that you don't have another input with the Id "StateDescription"? because your code are pretty good, and when I try to run this on jsfiddle after the "OK" alert I can see the value for the input:
Look it here: http://jsfiddle.net/paqrL/
This are ok dude!
var description = $('#StateDescription').val();
alert(description);

How can we check which button is clicked in a jQuery UI dialog box?

I am trying to use jQuery UI to build a dialog box with Yes/No button for user confirmation. (This is because I want to make the UI uniform, as I have used jQuery UI to build the warning dialog boxes.) My intention is to ask for user confirmation if a large number (1000 or above) is submitted in the text box. So far my JavaScript code looks like this:
function checkclick(button1, button2, theForm) {
var val;
val = theForm.mybox.value;
v = parseInt(val) || 0;
var btns = {};
btns[button1] = function(){
$(this).dialog('close');
};
btns[button2] = function(){
$(this).dialog('close');
};
if (v >= 1000) {
$('#dialog').dialog({
autoOpen: true,
modal:true,
buttons:btns
});
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
});
return false;
}
return true;
}
And my HTML looks like this:
<div id='dialog' title='Note' style='display:none'>
<p id='dialog_link'>This is a very large number. Are you sure?</p>
</div>
<form name='myForm' action='result.php' method='post'
onsubmit="return checkclick('Yes', 'No', this)">
<input type='text' name='mybox'>
<input type='submit'>
</form>
The problem is, when the user clicks either of the Yes or No button, it will go back to the same page. However, if I change the 'return false' to 'return true' inside the 'if' part, once the Submit button is clicked, the page will go directly to result.php without waiting for the user to click the Yes or No buttons. Is there any way to check which button is being clicked by the user, so that the page will go to result.php after clicking Yes, but remaining at the current page after clicking No?

jQuery dialog has the option buttons which can be used to describe the required buttons and it's action.
function checkclick(button1, button2, theForm) {
var val;
val = theForm.mybox.value;
v = parseInt(val) || 0;
if (v >= 1000) {
$('#dialog').dialog({
autoOpen: true,
modal:true,
buttons:{
"Yes":function() {
alert('Yes has been clicked'); //Your coding here
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
});
return false;
}
return true;
}

I don't have the "Reputation" to comment on your follow up so I had to post as an answer. Apologies for the breach in protocol.
If I understand your goal correctly, you just need to conditionally submit the form. I believe you can accomplish this by preventing the default behavior if the user decides the form submission is too long. Something like this:
<form id="target" action="destination.html">
<input type="text" value="string value">
<input type="submit" value="Submit">
</form>
$( "#target" ).submit(function( event ) {
if (//result of dialog is false) {
event.preventDefault();
} else {
return;
}
});

jQuery to submit a form

I have the following code which is not working. I hope you can help me with this.
basically I have a form that i want to confirm using jQuery Dialog first before submitting it. so when i click on submit i get the dialog but when i press yes to confirm nothing happens!!
$(function() {
$('#massform').submit(function(e){
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
$( "#dialog-mass-confirm" ).dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:180,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
$("#massform").submit();
}
}
});
});
<form id="massform" method="post" action="new.php">
<input type="text" name="email" size="41">
<input type="submit" value="Submit">
</form>

It appears that you may have a circular reference because you are rebinding the submit function for the form, and then calling submit from the modal which will fire the same event that opened the modal in the first place. I would suggest the following to avoid this problem:
$(function() {
$('#submitButton').click(function(e){
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
$( "#dialog-mass-confirm").dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:180,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
$("#massform").submit();
}
}
});
});
<form id="massform" method="post" action="new.php">
<input type="text" name="email" size="41">
<input ID="submitButton" type="button" value="Submit">
</form>

You shold look up scopes and event trigering in more detail so you understand the problem you are facing.
1.st you have created an jqery function which is bound to your form submit event.
$('#massform').submit(function(e){
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
When you use the submit button your event gets fired, and the dialog opens. When you however submit the form with
"Yes": function() {
$("#massform").submit();
It fires the bound function pointed out earlier... which prevents the form it self from being submitted. To be precise you just reopen the dialog. but that happens so fast that you don`t notice it.
If you are forced to use the submit action for compatibility reasons... you could use a loc variable to do the dirty job...
$('#massform').submit(function(e, lock){
if(lock)
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
while you may set the lock in the submit. Have never tried it tht way, but it should work. i usually end up using a variable from the document ready scope.
This is a dirty solution when you cant modify the form. Ugly but it works.