How to use a JQuery UI modal box with

View Demo | Download Source

I was recently asked to look into making a JQuery UI dialog box (aka a modal box) work with I thought it would be straight forward but as with anything in it turned out to be a little bit trickier than I had initially thought. Part of the problem was that I wanted to put the dialog box on an submit button and depending on the user's choice either submit the page or cancel the action.

Thankfully I stumbled across this great article over at DeviantPoint. It was pretty much exactly what I needed. However, for my example I needed to only show the dialog box if any of the checkboxes on the screen were not selected. In other words a normal postback would occur if every check was selected but if there were any checkboxes not selected the user would be asked to confirm their action.

If you take a look at my very basic demo page you will see exactly what I'm talking about. You will find all of the code within the source files I have posted for download but below is a brief overview of what is going on.

View Demo | Download Source

HTML used:

This is a top class widget. Features include...

Below are the required items for this product to function correctly:
Required Item 1 Required Item 2
Required Item 3 Required Item 4

Javascript used:

C# Codebehind:

if (!Page.IsPostBack)
            //this line is used to hold the exact postback function call used by the button
            this.MsgBoxContinue.Value = Page.ClientScript.GetPostBackEventReference(AddToBasket, string.Empty);

            //ensure the postback message is blank on load
            PostBackMsgTest.Text = ""; 

        if (Page.IsPostBack)
            PostBackMsgTest.Text = "Content posted back successfully.";

blog comments powered by Disqus

Get In Touch

Follow me online at TwitterFacebook or Flickr.

You can also contact me by email.

Buy Me A Coffee

Latest Tweets

Buy Me A Coffee