Jquery UI Generic Dialog Opener
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="partial-view-dialog"></div>
JavaScript
var dialogManager = dialogManager || {};
dialogManager = (function() {
function OpenPartialViewDialog(partialViewUrl, dialogTitle, dialogHeight, dialogWidth) {
if (!dialogWidth) {
dialogWidth = 500;
}
if (!dialogHeight) {
dialogHeight = 600;
}
$.ajax({
type: "GET",
async: false,
url: partialViewUrl,
success: function(result) {
$("#partial-view-dialog").html(result);
$("#partial-view-dialog").dialog({
height: dialogHeight,
width: dialogWidth,
closeOnEscape: true,
modal: true,
hide: 'fade',
title: dialogTitle,
buttons: {
OK: function() {
var actionUrl;
if ($('form').length > 1)
actionUrl = $($('form')[1]).attr('action');
else {
actionUrl = $('form').attr('action');
}
$.ajax({
type: "POST",
data: $('form').serialize(),
url: actionUrl,
dataType: "json",
success: function(responseObj) {
// TODO: Handle Response From FORM Post
// If success show success message
// If error show error Message
},
error: function(results) {
$("#partial-view-dialog").html(results);
}
});
return false;
},
Cancel: function() {
// Close Dialog
$("#partial-view-dialog").dialog('close');
}
}
});
},
error: function(response) {
//TODO: Handle Error
}
});
};
return {
...