Jquery dialog postback - javascript

I have one dialog like this
$(document).ready(function () {
$('#<%=updateBI.clientID%>').click(function confirm () {
$('div#thedialog').dialog({
autoOpen: false,
buttons: {
"Yes": function () { $('div#thedialog').dialog('close'); $("[id*=ButtonUPBI]").click(); },
"No, save draft": function () { $('div#thedialog').dialog('close'); $("[id*=ButtonINBI]").click();},
"No": function () { $('div#thedialog').dialog('close'); alert('Change has not been updated!')}
}
});
$('div#thedialog').dialog('open');
return false;
});
})
I have asp buttons in visual studio.
After I click the button updateBI, the JQuery box shows up and stays there because of "return false". Now the problem is that suppose I click one button inside teh jquery dialog, the website doesn't postback, and I have to refresh by myself. I wonder how to handle that?
Thanks for advice!

Related

Remove requirement for a click event from existing javascript

I have a modal popup that used to have a submit button.
As the content of the form is now pre filled, I want to remove the submit and have the form auto submitted.
The section of javascript that deals with this is below
afterShow: function () {
$(document).on('submit', '#back-in-stock-popup-wrapper form[name="back_in_stock"]', function () {
$.post('ajax/back_in_stock_subscribe_pop_up.php', $('#back-in-stock-popup-wrapper form[name="back_in_stock"]').serialize(), function (data) {
$('#contact_messages').html(data);
if ($('.messageStackSuccess').length) {
$('.back-in-stock-popup-wrapper-button-row').hide();
$('.back-in-stock-popup-content-wrapper').hide();
}
});
return false;
});
}
Instead of it waiting for a submit event, I want it to follow the code.
I'm hopeless with javascript and I thought I could just change it to
$(document)('#back-in-stock-popup-wrapper form[name="back_in_stock"]', function () {
but that didn't work.
How do I tell javascript to just proceed without waiting for the submit from the button click?
Just remove the outer call like so:
afterShow: function () {
$.post('ajax/back_in_stock_subscribe_pop_up.php', $('#back-in-stock-popup-wrapper form[name="back_in_stock"]').serialize(), function (data) {
$('#contact_messages').html(data);
if ($('.messageStackSuccess').length) {
$('.back-in-stock-popup-wrapper-button-row').hide();
$('.back-in-stock-popup-content-wrapper').hide();
}
});
return false;
}

Prevent Postback with custom jQuery confirm implementation on asp:LinkButton

I have a LinkButton that executes on the server and changes the page. Historically, I've had a confirm message box that executes OnClientClick to ensure the user would like to navigate away.
So far it looks like this:
ASP.NET:
<asp:LinkButton runat="server" ID="ChangePage" Text="Change page"
OnClientClick="confirm('are you sure you want to change page?');"
OnClick="Navigate" >
Change Page
</asp:LinkButton>
HTML Output:
<a id="MainContent_ChangePage"
onclick="confirm('are you sure you want to change page?');"
href="javascript:__doPostBack('ctl00$MainContent$ChangePage','')" >
Change page
</a>
This all works fine like this. The trouble is that I'm trying to replace all confirm boxes with a prettier jQuery-UI implementation like this:
window.confirm = function (message, obj) {
$('<div/>')
.attr({ title: 'Webpage Confirm'})
.html(message)
.dialog({
resizable: false,
modal: true,
width: 500,
buttons: {
"OK": function () {
__doPostBack(obj, '');
$(this).dialog('close');
return true;
},
"Cancel": function () {
$(this).dialog('close');
return false;
}
}
});
};
I believe this has to do with the fact that the confirm dialog operates synchronously, while jQuery dialogs occur asynchronously. However, I thought setting modal: true would cause it to wait for a response.
How can I override window.confirm to get consistent behavior?
Add this to OK action:
var href = $(obj).attr("href");
window.location.replace(href);
window.navigator.location(href);
return true;
And remove __postback line
it works with me

Creating a suitable replacement for prompt

My users may use IE7 and I want to avoid using the prompt function. I have working code using prompt but am unsure of a good way to replace it.
My usage requirement is this. User clicks an image button and then has to OK/Cancel a prompt. If OK is pressed, a Reference is requested which is assigned to RemovePalletReference for use in code behind.
<asp:imagebutton id="ibRemoveFromPallet" runat="server" ImageUrl="../Images/Icons/removefrompallet.gif" OnClientClick="return ConfirmReroute();"></asp:imagebutton>
<asp:HiddenField ID="RemovePalletReference" runat="server" value="" ></asp:HiddenField>
You can see above that I first call ConfirmReroute() which is the following js function.
function ConfirmReroute()
{
if (confirm("Confirm Remove Unit From Pallet") == true)
{
var pmt;
do {
pmt = prompt("Please Enter a Reference:", "");
}
while ( pmt == null || pmt.length < 1);
document.getElementById('<%= RemovePalletReference.ClientID %>').value = pmt;
return true;
}
else
return false;
}
I wish to replace the code where the user has pressed OK to the confirm. I tried with jquery UI modal dialog but could not work it out. I think it may be workable using callbacks but this is a new subject to me and I'm struggling.
Please in answers show some code to help me out. Grateful for any assistance.
Ex
function confirmDialog(title, message, confirm, reject) {
var dialog = $('<div />').html(message).dialog({
appendTo: 'body',
title: title,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
confirm();
},
"cancel": function () {
$(this).dialog("close");
if ($.isFunction(reject)) {
reject();
}
}
},
close: function (event, ui) {
$(this).dialog('destroy');
$(this).remove()
}
})
}
function test(notes) {
confirmDialog('Confirm', 'Confirm Something', function () {
console.log('ok');
//what ever you want to do on confirmation has to go here
}, function () {
console.log('cancelled')
});
//any code added here will get executed before the confirm box is displayed
}
Demo: Fiddle

Confirmation with save and discard button

How can we create a confirmation alert in javascript with a save and discard button in it?
If we use the code
confirm('Do you want to save it?');
We will get an alert box with ok cancel.
How can we make the text of ok button as save and the other as discard?
You cannot modify the default javascript method "confirm". But, you can override it, for example, with jQuery UI dialog:
window.confirm = function (message) {
var html = "<div style='margin:20px;'><img style='float:left;margin-right:20px;' src='/img/confirm.gif' alt='Confirm'/><div style='display:table;height:1%;'>" + message + "</div></div>";
$(html).dialog({ closeOnEscape: false,
open: function (event, ui) { $('.ui-dialog-titlebar-close').hide(); },
modal: true,
resizable: false,
width: 400,
title: "Confirmation",
buttons: {
"Save": function () {
//Do what you need
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
}
this is not possible
more answers
Connect some of the tons JS framework. For example jQuery+UI
Overwrite window.confirm method, by makin it as wrapper to your favorite JS UI framework.
PROFIT!!!

How do I get a JQuery statement to wait until it's completed before continuing?>

Firstly, I'm new at Javascript / Jquery so it might be a stupid question...
I'm using the dialog box that is in the JQuery UI collection. I have a button that when clicked, it either shows a confirm box or an alert box. My code is like below...
function checkfn() {
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
dialogResult = true;
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close").slideUp();
}
}
});
// alert just debug code!
alert(dialogResult);
return dialogResult;
}
else {
$("#dialog-HomeInstitutionPrompt").dialog({
height: 140,
modal: true
});
}
}
My problem is in the confirm part, it seems the confirm box is not waiting for me to hit Continue or Cancel - it's just going straight to the alert part and returning dialogResult = false.
Is it possible to halt execution of until after I've run the $('#dialog-confirm') command?
Alternatively, is it possible to return true for the checkfn() function, in the Continue function? That way, I will not need a dialogResult var at all?
I haven't used the .dialog in jQuery UI before, but, in general with jQuery, functions are run asynchronously. What this means is that you need to put the code that you want run in the Continue function.
One possibility is to send a success/cancel function to checkfn that you would call from the Continue and Cancel functions.
function checkfn(success, cancel) {
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
if(success) success();
$(this).dialog("close");
},
Cancel: function () {
if(cancel) cancel();
$(this).dialog("close").slideUp();
}
}
});
}
You can call the function like this:
checkfn(function () {
alert('success!');
}, function () {
alert('failure!');
});
Just put everything you want to do inside "Continue" and "Cancel" button definitions. So, you will not need a dialogResult and alert will hit when it is needed.
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
alert('Dialog result is true. I can do whatever I want here');
$(this).dialog("close");
},
Cancel: function () {
alert('Cancel is clicked. I should go on my life');
$(this).dialog("close").slideUp();
}
}
});
}
else {
$("#dialog-HomeInstitutionPrompt").dialog({
height: 140,
modal: true
});
}
-- You can't return a value for your function, because after initialization of the function, the code goes on. You need to fill Continue button definition.
This is something I struggled with when I started too, The code doesn't run as it reads on the page. When you call the dialog function it executes asynchronously. The continue and cancel functions are bound to the click actions on the buttons, meanwhile the code below the dialog function runs without waiting for the events.
Long story short the result needs to happen in the cancel and continue callbacks.
Problem is you're trying to return a boolean value when you should really pass the resulting functions in instead. Alot of things in jquery and javascript in general work that way. Thankfully the language provides the ability to program in this way.
function checkfn( resultfn(boolval) ) {
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
resultfn.call( this, true );
$(this).dialog("close");
},
Cancel: function () {
resultfn.call( this, false );
$(this).dialog("close").slideUp();
}
}
});
}
Put the if statement in "resultfn"
I had a similar frustrating problem where the jQuery dialog box would submit a form before the user had a chance to choose Yes or No.
Example HTML:
<form id="myForm" method="POST" action="/Where/To/Go">
<input type="submit" value="Submit" onclick="submitForm()"/>
</form>
And jQuery:
function submitForm() {
$('<div title="Submit Form>Are you sure you wish to submit the form?</div>').dialog({
modal: true,
buttons: [
{
text: "Yes",
click: function () {
$('#myForm').submit();
$(this).dialog("close");
}
}, {
text: "No",
click: function () {
$(this).dialog("close");
}
}
]
});
}
To fix the issue I changed the button from a submit type to a button type which stopped it submitting and triggering the jQuery dialog at the same time:
<input type="button" value="Submit" onclick="submitForm()"/>

Categories

Resources