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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
/**
* Fire openDialog() and prevent links from opening
*
* @see openDialog()
*/
function handleDialogEvent(event) {
openDialog(event.data.element);
event.preventDefault();
}
/**
* Display modal dialogs, populate dialog with trigger link's title and href
*
* @requires ui.core
* @requires ui.draggable
* @requires ui.resizable
* @requires ui.dialog
* @see handleDialogEvent()
*
* @todo Set ui-dialog-buttonpane button values equal to the original form button value
* @todo Display loading animation on form submit
*/
function openDialog(element, on_success) {
var sHref = $(element).attr("href");
var sTitle = $(element).attr("title");
var eDialog = '<div id="gDialog"></div>';
$("body").append(eDialog);
var buttons = {};
buttons["Submit"] = function() {
$("#gDialog form").ajaxForm({
dataType: "json",
success: function(data) {
if (data.form) {
$("#gDialog form").replaceWith(data.form);
}
if (data.result == "success") {
$("#gDialog").dialog("close");
if (on_success) {
on_success();
} else if (data.location) {
window.location = data.location;
} else {
window.location.reload();
}
}
}
}).submit();
};
buttons["Reset"] = function() {
$("#gDialog form").resetForm();
};
$("#gDialog").dialog({
autoResize: false,
draggable: true,
height: $(window).height() - 40,
modal: true,
overlay: {
opacity: 0.7,
background: "black"
},
resizable: true,
title: sTitle,
width: 600,
buttons: buttons,
close: function (event, ui) {
$("#gDialog").dialog('destroy').remove();
}
});
loading("#gDialog");
$(".ui-dialog-content").height(400);
$("#gDialog").html(sHref);
$.get(sHref, function(data) {
loading("#gDialog");
$("#gDialog").html(data).hide().fadeIn();
// Get dialog and it's contents' height
var contentHt = $(".ui-dialog-titlebar").height()
+ $(".ui-dialog-content form").height()
+ $(".ui-dialog-buttonpane").height()
+ 60;
// Resize height if content's shorter than dialog
if (contentHt < $("#gDialog").data("height.dialog")) {
$(".ui-dialog").animate({height: contentHt});
};
});
return false;
}
/**
* Toggle the processing indicator, both large and small
*
* @param element ID to which to apply the loading class, including #
*/
function loading(element) {
var size;
switch (element) {
case "#gDialog":
size = "Large";
break;
default:
size = "Small";
break;
}
$(element).toggleClass("gLoading" + size);
}
|
