/**
* Open a popup which loads via ajax a separate view's component
*
* @param getId - Id of the component from the separate view to select to insert into popup.
* @param retrieveData - Object of data used to passed to generate the separate view.
* @param formAction - The action param of the popup inner form.
* @param popupStyle - Object of css styling to apply to the initial inner div of the popup (will be replaced with remote component)
* @param popupOptions - Object of settings to pass to the Bubble Popup jQuery Plugin.
* @param e - An object containing data that will be passed to the event handler.
*/
function openPopup(getId, retrieveData, formAction, popupStyle, popupOptions, e) {
stopEvent(e);
fnCloseAllPopups();
var popupOptionsDefault = {
themePath:"../ks-myplan/jquery-popover/jquerypopover-theme/",
manageMouseEvents:true,
selectable:true,
tail:{align:"middle", hidden:false},
position:"left",
align:"center",
alwaysVisible:false,
themeMargins:{total:"20px", difference:"5px"},
themeName:"myplan",
distance:"0px",
openingSpeed:5,
closingSpeed:5
};
var target = (e.currentTarget) ? e.currentTarget : e.srcElement;
var popupItem = (typeof popupOptions.selector == "undefined") ? jQuery(target) : jQuery(target).parents(popupOptions.selector);
if (!popupItem.HasPopOver()) popupItem.CreatePopOver({manageMouseEvents:false});
var popupSettings = jQuery.extend(popupOptionsDefault, popupOptions);
var popupHtml = jQuery('<div />').attr("id", "KSAP-Popover");
if (popupStyle) {
jQuery.each(popupStyle, function (property, value) {
popupHtml.css(property, value);
});
}
popupSettings.innerHtml = popupHtml.wrap("<div>").parent().clone().html();
popupItem.ShowPopOver(popupSettings, false);
popupItem.FreezePopOver();
var popupId = popupItem.GetPopOverID();
fnPositionPopUp(popupId);
clickOutsidePopOver(popupId, popupItem);
var retrieveForm = '<form id="retrieveForm" action="' + retrieveData.action + '" method="post" />'
jQuery("body").append(retrieveForm);
var elementToBlock = jQuery("#KSAP-Popover");
var successCallback = function (htmlContent) {
var component;
if (jQuery("#requestStatus", htmlContent).length <= 0) {
var popupForm = jQuery('<form />').attr("id", "popupForm").attr("action", formAction).attr("method", "post");
component = jQuery("#" + getId, htmlContent).wrap(popupForm).parent();
} else {
var pageId = jQuery("#pageId").val();
eval(jQuery("input[data-role='script'][data-for='" + pageId + "']", htmlContent).val().replace("#" + pageId, "body"));
var errorMessage = '<img src="/student/ks-myplan/images/pixel.gif" alt="" class="icon"><div class="message">' + jQuery("#plan_item_action_response_page", htmlContent).data(kradVariables.VALIDATION_MESSAGES).serverErrors[0] + '</div>';
component = jQuery("<div />").addClass("myplan-feedback error").html(errorMessage);
}
if (jQuery("#KSAP-Popover").length) {
popupItem.SetPopOverInnerHtml(component);
fnPositionPopUp(popupId);
if (popupOptions.close || typeof popupOptions.close === 'undefined') jQuery("#" + popupId + " .jquerypopover-innerHtml").append('<img src="../ks-myplan/images/btnClose.png" class="myplan-popup-close"/>');
jQuery("#" + popupId + " img.myplan-popup-close").on('click', function () {
popupItem.HidePopOver();
fnCloseAllPopups();
});
}
runHiddenScripts(getId);
elementToBlock.unblock();
};
ksapAjaxSubmitForm(retrieveData, successCallback, elementToBlock, "retrieveForm");
jQuery("form#retrieveForm").remove();
}
/**
* Gathers information for submission to the controller via ajax
*
* @param data - Variables and data to be submitted to the controller
* @param successCallback - Code block to run after a successful return from the controller
* @param elementToBlock - The html object being effected by the controller call
* @param formId - Id of the form the submit is being called on
* @param blockingSettings - Settings for the html object
*/
function ksapAjaxSubmitForm(data, successCallback, elementToBlock, formId, blockingSettings) {
data = ksapAdditionalFormData(data);
var submitOptions = {
data:data,
success:function (response) {
var tempDiv = document.createElement('div');
tempDiv.innerHTML = response;
var hasError = checkForIncidentReport(response);
if (!hasError) successCallback(tempDiv);
jQuery("#formComplete").empty();
},
error:function(jqXHR, textStatus,
errorThrown) {
hideLoading();
showGrowl(textStatus + " "
+ errorThrown,
"Error");
},
statusCode : {
400 : function() {
showGrowl(
"400 Bad Request",
"Fatal Error");
},
500 : function() {
showGrowl(
"500 Internal Server Error",
"Fatal Error");
}
}
};
if (elementToBlock != null && elementToBlock.length) {
var elementBlockingOptions = {
beforeSend:function () {
if (elementToBlock.hasClass("unrendered")) {
elementToBlock.append('<img src="' + getConfigParam("kradImageLocation") + 'loader.gif" alt="Loading..." /> Loading...');
elementToBlock.show();
}
else {
var elementBlockingDefaults = {
baseZ:500,
message:'<img src="../ks-myplan/images/ajaxLoader16.gif" alt="loading..." />',
fadeIn:0,
fadeOut:0,
overlayCSS:{
backgroundColor:'#fff',
opacity:0
},
css:{
border:'none',
width:'16px',
top:'0px',
left:'0px'
}
};
elementToBlock.block(jQuery.extend(elementBlockingDefaults, blockingSettings));
}
},
complete:function () {
elementToBlock.unblock();
},
error:function(jqXHR, textStatus,
errorThrown) {
hideLoading();
showGrowl(textStatus + " "
+ errorThrown,
"Error");
if (elementToBlock.hasClass("unrendered")) {
elementToBlock.hide();
}
else {
elementToBlock.unblock();
}
}
};
}
jQuery.extend(submitOptions, elementBlockingOptions);
var form = jQuery("#" + ((formId) ? formId : "kualiForm"));
form.ajaxSubmit(submitOptions);
}
Attaching a patch based on Rice 2.3.0-M3 for supporting inner views in KSAP 0.7. The way KSAP implements pop-up dialogs, a "popupForm" element is defined dynamically with an AJAX response then attached to a jquery-popover element. The content of the form is intended to be the full contents of the "kualiForm" <form> element on the dialog view to be rendered within the pop-up, but not the <form> element itself.
As of Rice 2.3.0-M3 (I haven't yet checked later versions), there is no <div> wrapper providing clean and convenient access within the response page to all of the form's inner elements. Therefore, hidden inputs needed in order to point the inner view at a different controller and form from the page containing the popover are lost.
This patch adds an "innerViewWrapperId" property to the PageGroup component, then when this property is set on the currentPage, renders a div with the provided ID directly inside the <form> element facilitating the use of a Uif-FormView child with multiple pages to drive pop-up dialogs on an unassociated page.
For reference, the openPopup() and ksapAjaxSubmitForm() JS functions from KSAP 0.7 are below. These functions were taken directly from UW My Plan 1.5, and have only be modified from the UW version to deal with HTTP errors a little differently. The value passed in the getId parameter of the openPopup() function corresponds to the innerViewWrapperId property on the page component of the inner view.
I hope this helps as a starting point for implementing this feature!
Best wishes,
Mark