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 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:
- 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.
- title – The title of your dialog
- width – The width of the dialog
- height – the height of the dialog
- load_file – An external file or view that you want to load inside your dialog
- 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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/**
* Function to shorten the amount of JavaScript required to create multiple JQuery UI Dialogs
* Courtesy of Vesica
* This code is provided free of any and all warranties. Please use it at your own risk.
*/
function loadDialog(target_class,title,width,height,load_file,buttons) {
var loading = $('+ siteurl + 'images/ajax-loader.gif" alt="loading" class="loading">');
// Prepare the buttons parameter
var theButtons = {};
$.each(buttons, function(key, value) {
if (buttons[key]['id'] == 'default_cancel') {
var btname = 'Cancel';
theButtons[btname] = {};
theButtons[btname]['text'] = 'Cancel';
theButtons[btname]['click'] = function(){ $(this).dialog("close") };
} else {
var btname = buttons[key]['text'];
theButtons[btname] = {};
theButtons[btname]['id'] = buttons[key]['id'];
theButtons[btname]['text'] = buttons[key]['text'];
}
});
$('.' + target_class).dialog('option', 'title', title);
$('.' + target_class).load(load_file);
$('
+ title + '" class="' + target_class + '" id="' + Math.random()*1000001 + '">
').dialog({
modal: true,
open: function ()
{
$(this).append(loading.clone());
$(this).load(load_file);
},
width: width,
height: height,
buttons: theButtons,
close: function() {
$('.' + target_class).empty();
$('.' + target_class).remove();
}
});
}
|