Impromptu is an excellent JQuery plug-in to show beautiful message boxes in web forms. Its is easy to use and can be used to make any kind of message boxes such as alerts, confirm boxes, prompts, popup login boxes, popup input wizards etc
Confirmation message box
From their site
JQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm.
Click here to see the DEMO and DOWNLOAD the source
Setting up an asp.net page to use JQuery Impromptu (The download zip has all this included)
Include the latest jquery.js file
Include the latest jquery-impromptu.js file
Include the latest impromptu.css file
<script src="jquery.js" type="text/javascript"></script> <script src="jquery-impromptu.2.6.min.js" type="text/javascript"></script> <link href="impromptu.css" rel="stylesheet" type="text/css" />
Although the Impromptu site http://trentrichardson.com/Impromptu/index.php provides excellent code samples and demos on how to use this plug-in, its not straight forward to use confirm messages for Asp.Net submit buttons or link buttons. This is because you will get the result of confirm box (OK or Cancel) only in a callback result function rather than directly in the OnClientClick of the asp.net button.
Matt Berseth has an excellent blog about Customizing the Delete Confirmation Dialog in Dynamic Data using JQuery thick box. I used the same method to implement Impromptu confirm boxes for normal forms and Gridviews.
Basically the idea is - show the confirm message on the click of an html button/link and if the user opted OK in the confirm box click a hidden asp:button using JavaScript.
Scenario 1 - Showing a confirm message on the submit of a web form
HTML
<!-- The button which will display in the UI and show the confirmation --> <input type="button" onclick="return confirmSubmit();" value="Submit" /> <!-- Hidden asp.net command button that actually issues the submit --> <asp:Button runat="server" ID="btnSubmit" style="display:none;" OnClick="btnSubmit_Click" />
JavaScript
<script language="javascript" type="text/javascript">
function confirmSubmit()
{
$.prompt('Are you sure you want to submit?'
, {
buttons: { Ok: true, Cancel: false }
, callback: confirmSubmitResult
}
);
return false;
}
function confirmSubmitResult(v,m,f)
{
if( v) //post back if the user clicked OK
$('#<%= btnSubmit.ClientID %>').click();
}
</script>
Scenario 2 - Show message after a postback (for example success or error messages after registration)
To show Impromptu message after postback we will make the JavaScript in the code behind and add to the page using ClientScript manager
Codebehind
//Showing JQuery prompt after Postback
protected void btnSubmit_Click(object sender, EventArgs e)
{
//The prompt function shlould be called inside $(document).ready() function inorder to avoid
//IE's "Operation aborted" error
//in this script we are using {{ for JQuery code becuase the string need to be used inside a String.Format
function - otherwise you need to use only one {
string prompt = "<script>$(document).ready(function(){{$.prompt('{0}!');}});</script>";
string message = string.Format(prompt, "This message is coming after postback.<br />Hello " + txtName.Text);
ClientScript.RegisterStartupScript(typeof(Page), "message", message);
}
Scenario 3 - Showing confirm messages in list controls such as Gridview, datalist and repeater
HTML
In the Gridviews TemplateField add the hidden and visible controls as we saw in Scenario 1
<asp:TemplateField> <ItemTemplate> <!-- The link which will display the delete confirmation --> <a id="linkDelete" runat="server" href="#" title="Confirm delete">Delete</a> <!-- Hidden command button that actually issues the delete --> <asp:Button runat="server" CommandName="Delete" ID="btnDelete" Style="display: none;" /> </ItemTemplate> </asp:TemplateField>
Javascript
<script language="javascript" type="text/javascript">
function confirmDeleteResult(v,m,f)
{
if( v) //user clicked OK
$('#' + f.hidID).click(); //the delete button id of each row will be passed to this function from the confirm box
}
</script>
Now in the RowDataBound function of GridView write the following code in the code behind
Codebehind
//making the confirm box for each delete link.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// we are using a html anchor and a hidden asp:button for the delete
HtmlAnchor linkDelete = (HtmlAnchor)e.Row.FindControl("linkDelete");
Button btnDelete = (Button)e.Row.FindControl("btnDelete");
//for each delete link - the corresponding submit buttons id will be passed to delete call back as a hidden field
string prompt = "$.prompt('Are you sure you want to delete the selected item?"
+ "<input type="hidden" value="{0}" name="hidID" />'"
+ ", {{buttons: {{ Ok: true, Cancel: false }}, callback: confirmDeleteResult}} ); return false; ";
linkDelete.Attributes["onclick"] = string.Format(prompt, btnDelete.ClientID);
}
}
Click here to see the DEMO and DOWNLOAD the source
Please comment on bugs or enhancements on this asp.net javascript message box implementation.
June 17th, 2009 at 2:46 AM
[...] The rest is here: ClientSideAsp.Net » Blog Archive » Showing beautiful message boxes … [...]
June 17th, 2009 at 5:33 AM
[...] original post here: ClientSideAsp.Net » Blog Archive » Showing beautiful message boxes … SHARETHIS.addEntry({ title: “ClientSideAsp.Net » Blog Archive » Showing beautiful message boxes [...]
June 18th, 2009 at 2:57 AM
Showing beautiful message boxes in Asp.Net web forms using JQuery Impromptu…
Thank you for submitting this cool story - Trackback from DotNetShoutout…
June 22nd, 2009 at 11:55 PM
Thank you for this story great.
These messageboxes are beautiful and easy to add to web applications to add some visual experience for the users.
You can use JQuery and ASP.NET in online IDE like coderun.com and share your projects with others. Very usefull.
July 17th, 2009 at 2:13 AM
Any ideas why this might not work when inside of a user control?
I can get the dialog window to show, but it doesn’t fire the click event of the hidden button.
July 17th, 2009 at 2:31 PM
@jdn,
if can you send me your code I will check why its not working…
July 23rd, 2009 at 7:00 PM
Hi, I tried this control and I think its really cool. the only error I av with it is that it doesnt function properly with ajax update panel. The message shown after postback does not display at all if called within the update panel. Any ideas pleeeeasseee.
July 23rd, 2009 at 7:14 PM
@jdn. I used the controls inside user control and they functioned well. to do this, u’ll av to put the reference for the downloaded .js files i.e jquery.js, jquery-impromptu.2.6.min.js and impromptu.css in the page where ur user controls are loaded. then the function calls itself should be inside the user controls. i.e
function confirmSubmit()
{
$.prompt(’Are you sure you want to submit?’
, {
buttons: { Ok: true, Cancel: false }
, callback: confirmSubmitResult
}
);
August 1st, 2009 at 2:57 PM
[...] Impromptu: Showing beautiful message boxes in Asp.Net web forms using JQuery Impromptu [...]
August 1st, 2009 at 3:12 PM
[...] Impromptu: Showing beautiful message boxes in Asp.Net web forms using JQuery Impromptu [...]
August 1st, 2009 at 9:20 PM
@sean
i never tried it with AJAX update panels.. for now am in really really busy with some project launch.. i will try to do a AJAX sample may be next week..
August 1st, 2009 at 9:41 PM
@sean
The following links may be helpful for you to solve the update panel issue..
http://forums.asp.net/p/1189519/2039138.aspx
http://forums.asp.net/t/1232120.aspx
http://stackoverflow.com/questions/504464/how-to-show-a-lightbox-dialog-from-an-asp-net-ajax-response
http://imak47.wordpress.com/2008/10/18/jquery-effects-not-working-after-updatepanel-asynchronous-request-is-over/
http://stackoverflow.com/questions/301473/rebinding-events-in-jquery-after-ajax-update-updatepanel
August 4th, 2009 at 8:34 AM
[...] Impromptu: Showing beautiful message boxes in Asp.Net web forms using JQuery Impromptu [...]
August 30th, 2009 at 4:49 PM
Showing beautiful message boxes in Asp.Net web forms using JQuery Impromptu…
Thank you for submitting this cool story - Trackback from ADDBeats…
October 26th, 2009 at 10:54 PM
Hi, The show was absolutely wonderfull but i wonder does it work on linkbutton… because on rendering linkbutton shows a property href=”javascript_doPostback” which can cause problem. Please clarify me with code. The linkbutton is in repeater. My email id is mohinder82@gmail.com. Thanks.
October 26th, 2009 at 11:04 PM
@Mohinder
Please have a look at the sample shown..
http://www.clientsideasp.deynu.com/alerts/Asp-net-jquery-confirm-gridview.aspx
You can simulate a link button using a simple link and input type button..
You can easily do the same method in a repeater..
January 13th, 2010 at 11:39 AM
Hi,
I am using Asp.net 2005.It is working fine in Firefox.but if try in IE 8. it is not working properly. I do not know the reason.Please can you guide me.
I am waiting for your response.
Thanks and Regards,
Venkat
January 16th, 2010 at 6:13 PM
@venkat.
Run the demo in IE 8.0 and see.. I just tried and it worked fine.. it may be some other issue..
January 30th, 2010 at 11:43 PM
Hi, I tried the technique as shown in your article in a Repeater control but it’s not working for me. The dialog shows up, but the event handler in the code-behind file is never called.
Any idea?
aspx code:
<asp:LinkButton ID=”deleteFile” runat=”server”
CommandArgument=”>
Delete
————————————————————-
code-behind:
LinkButton linkDelete = (LinkButton)e.Item.FindControl(”deleteFile”);
Button btnDelete = (Button)e.Item.FindControl(”btnDelete”);
string prompt = “$.prompt(’Are you sure you want to delete the selected item?”
+ “‘”
+ “, {{buttons: {{ Ok: true, Cancel: false }}, callback: confirmDeleteResult}} ); return false; “;
linkDelete.Attributes["onclick"] = string.Format(prompt, btnDelete.ClientID);
———————————————————
script:
function confirmDeleteResult(v, m, f) {
if (v) //post back if the user clicked OK
$(’#').click();
}
February 20th, 2010 at 2:42 PM
@Kris
Please note that you script part iss wrong.. it should be like following..
function confirmDeleteResult(v,m,f)
{
if( v) //user clicked OK
$(’#’ + f.hidID).click(); //the delete button id of each row will be passed to this function from the confirm box
}
March 2nd, 2010 at 10:04 PM
Thanks, that works perfectly!
Another question if you don’t mind: how would I trigger this from code behind, ie, without the user clicking a link? What I want to do is look up an email address in a db, and prompt the user to send a mail to the address if it’s not found.
I have already made the code to execute and a hidden button, but I don’t know how to code the if(addressNotFound){???} part…
March 19th, 2010 at 6:28 PM
HI I tried the above given code but it is not working ..
my
java script is
function confirmDeleteResult(v, m, f) {
if (v) //user clicked OK
$(’#’ + f.hidID).click();
}
and
i used the same c# .. codes .. but it is not working ..
May 31st, 2010 at 11:35 PM
Ho do I change the theme when call from code behind?
Any idea?