Mark Mintoff My superpower is common sense

3Mar/110

Wrapped JQuery Show Dialog Revisited

As a follow up to this post, I have added extra functionality by utilizing the jquery-dialogextend extension. What is achieved is the ability to treat the JQuery Dialog very much like a regular window, with the option of Maximize and Minimize thrown in. Also, double-clicking the title bar maximizes the Dialog. Awesome! I wanted to create a seamless transition from my old code to the new code, in order to minimize things which I'd have to update. This is what I came up with: As you can see, it's exactly the same as it was before, with two new parameters; showMinimize and showMaximize; (which are completely optional) and a check for whether the function exists before executing it. This allows for a seamless transition. The icons I am using were drawn by me onto the existing JQueryUI Spritesheets and into the JQueryUI Stylesheet. And the CSS changes: That's all there really is to it! Enjoy!
VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)
21Feb/110

Wrapped JQuery Show Dialog

One of the things I like doing best in programming (even if it is client-side) is encapsulating code into simple method/function calls, in order to prevent writing the same code over and over. My ShowDialog method is an example of such.

I like the JQuery Dialog, especially since an IFrame can be loaded into it and I am in the habit of utilizing this. The reason I prefer using an IFrame in this manner, is that I can segregate the code into another .aspx page, allowing me to keep everything neat and tidy. It is also worth noting that I have a preference for making these kind of dialogs modal. If you do not prefer using modal dialogs, then you will have to tweak the coding a little bit.

To this end, my sequence of coding for showing a dialog is to append a DIV containing my IFrame to the body, calling the JQuery Dialog code and removing the div onClose:

And there you have it! (for String.Format please refer here)

A simple wrapping function call to load a modal dialog with a specified page url, a specified width and height and an optional onClose function to be executed on closing the dialog. The latter is useful for cases where you wish to refresh the page or do a redirect.

An example of using this method, from server side C#:

As you can see, I am using String.Format to specify two arguments:
  • path.ToString
  • Page.ClientScript.GetPostBackEventReference

path.ToString in this case, is a StringBuilder which assembles the path to the Dialog page (I am using a StringBuilder because a dynamic querystring is being constructed for it) and the Page.ClientScript.GetPostBackEventReference is being used in order to cause a page refresh on closing the dialog.

A simpler example:

In this example, I am not passing in an onClose function, hence nothing special will happen after the dialog is closed.

Happy Coding!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)