Problems with jQuery Modal Dialogs problem can happen in a number of ways (see some of my other articles on the subject). This time, it was that I used a jQuery Modal Dialog inside of an ASP.NET UpdatePanel. After some looking around, what seems to be happening is that the dialog invisibly duplicates fields to the end of the document sent to the browser.
I learned the hard way that you cannot mix using a .NET UpdatePanel (or other non-complete postback technology) with a jQuery UI Modal dialog widget. If you do try it, you just end up with a mess. Bottom line here is that unbeknownst to the programmer, the dialog widget developers duplicate the dialog and all of its components onto somewhere in the HTML sent to the browser. You can’t easily detect it, but if you do test adding a dialog in an UpdatePanel, you can use a JavaScript loop to check the number of instances of each HTML element contained in the dialog. You will quickly see that with each partial postback, the controls are duplicated.
For a quick workaround, you can try addressing your page controls in your JavaScript by class instead of by id, but this is a hack, and you may see immediate problems with this with your jQuery calendar controls. Specifically, the calendar will pop up, but the date returned will not go into the version of the text box that you clicked, but into a duplicate version the jQuery modal dialog has created.
You can also try writing a JavaScript function that runs on startup of your UpdatePanel to remove duplicate instances of the Modal dialog and its controls. I was not successful in getting this working properly, and it is more of a hack workaround that might cause trouble for your application in future.
The best way of dealing with this poorly designed behavior of the jQuery Modal dialog widget is to just not use it if you are using asynchronous postbacks. I’ve had a number of problems with dialogs in the past, including random positioning issues on larger pages that I mentioned earlier.
There are a number of other options available as libraries, but it’s just as easy to style a hidden div to act like a modal dialog. This way it is your own code and you can handle things as you see fit. My experience has been that jQuery dialogs are easy to work with most of the time, but its when they mess up that they end up being a real headache.
Justin Cooney 