I have a Zend Form generated form that I display inside a jQuery dialog. The first time the dialog is created, the form displays correctly as an inner element to the dialog. However, if form validation fails, I redisplay the form and it appears as part of the dialog instead of as an inner element. I suspect that the dialog div container has changed somehow and this may be the problem. I have tried countless solutions and all have failed. I would appreciate it if someone could help identify the exact source of the problem.
Here is the JS function:
- $(document).ready(function() {
- showPartnerSettings = function(e) {
- e.preventDefault();
- var post = (e.type == "click") ? false : true;
- if($("#partner-settings-form").length == 0) {
- var $dialogForm = $("<div />");
- } else {
- var $dialogForm = $(".partner-settings-class").unbind("submit").dialog();
- }
- $dialogForm.attr("id", "partner-settings-form")
- .append($loading.clone());
- if(post) {
- /* HERE IS WHERE THE FORM APPEARS MERGED WITH THE DIALOG */
- var formData = {};
- $(e.target).each(function(){
- formData[this.name] = this.value;
- });
- $dialogForm.load(envPath + "/partner/settings", formData, function(response, status, xhr){
- /*
- if(data.status == "error") {
- $("#partner-settings-form").html(data.form);
- $(document).unbind("submit").on("submit", ".sign_in_form", function(event) {
- return showPartnerSettings(event);
- });
- $("#partner-settings-form").css("display", "block");
- } else {
- */
- if(response.status == "success") {
- $dialogForm.dialog("destroy");
- }
- //return false;
- })
- .dialog("open")
- .css("display", "block");
- } else {
- /* HERE IS WHERE THE FORM APPEARS EMBEDDED IN THE DIALOG */
- var partnerId = e.data.partnerId;
- $dialogForm.load(envPath + "/partner/settings?partnerid="+partnerId, null, function(){
- $("#partner-settings-form").css("display", "block");
- $dialogForm.dialog({
- title: "Partner Settings",
- modal: false,
- resizable: false,
- width: 580, //CPB 04.11.13
- position:['middle',130],
- dialogClass: "partner-settings-class",
- "close" : function(){
- var dialogid=$(this).parent("div").attr("id");
- $("#Tabs ul li."+dialogid).remove();
- $(this).remove();
- $("#alertmod").remove();
- //$link.removeClass('preventclick');
- },
- })
- .dialog("open")
- .css("display", "block");
- $(document).on("submit", ".sign_in_form", function(event) {
- event.preventDefault();
- return showPartnerSettings(event);
- });
- return false;
- })
- }
- return false;
- };
I have attached 2 screenshots. The first shows the form correctly embedded in the dialog. The second shows the form incorrectly merged with the dialog.