Vesica Blog - Taking museum and art collections to the cloud

March 23, 2013

Simplifying JQuery Dialogs

Filed under: Tech Talk — Tags: , , , , , , — Asif N @ 12:08 am

Working on a web application that uses multiple JQuery dialogs?

You’re probably sick of rendering dialog boxes with JQuery’s .dialog() function and all of its parameters.

So here’s a tiny little function that you can include in your AJAX application at the top level via a <script></script> tag, and then simply call each time you need to render a dialog. So you can effectively accomplish what you need to do in one line instead of 10.

The function below requires multiple parameters:

  1. target_class – This is the name of the class you want the dialog rendered in. It doesn’t have to exist in the DOM, the function will create it.
  2. title – The title of your dialog
  3. width – The width of the dialog
  4. height – the height of the dialog
  5. load_file – An external file or view that you want to load inside your dialog
  6. buttons – A JavaScript array containing all the buttons your dialog needs. This array should contain a button id and button text, and can be formatted as:
    buttons[0]['id'] = ‘save’ ;
    buttons[0]['id'] = ‘Save this Content’ ;
    buttons[1]['id'] = ‘default_cancel’ ;
    buttons[2]['id'] = ‘button3′ ;
    buttons[2]['text'] = ‘A 3rd Button’ ; 

As shown above, you can add as many buttons as you want using an array.  The function also created a default cancel button that will close and destroy the dialog if you pass the id ‘default_cancel’ to it.

Note that once you have the dialog rendered, you can use more JavaScript driven by the ID of each button to decide what happens when that ID gets clicked. This should ideally go in a JS file tied to the view or page you load into the load_file parameter of the function.

There are several ways to to tweak and improve the function depending on what you are rendering your dialogs for,  so please feel free to make any changes and / or share your thoughts. If you have any questions, please don’t hesitate to ask.

 

Subscribe to RSS Feed Follow Vesica on Twitter Join us on Facebook Join he Vesica LinkedIn Group

Home    •    Blog    •    Contact Us    •    Developers    •    Education    •    Partners    •    About    •    Help & Support    •    News    •    Privacy Policy    •    Terms of Use

Follow us on Twitterk Join Vesica on Facebook