Dialog form incorrectly integrated with dialog element after form validation

Dialog form incorrectly integrated with dialog element after form validation


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:

  1. $(document).ready(function() {
  2. showPartnerSettings = function(e) {
  3. e.preventDefault();
  4. var post = (e.type == "click") ? false : true;
  5. if($("#partner-settings-form").length == 0) {
  6. var $dialogForm = $("<div />");
  7. } else {
  8. var $dialogForm = $(".partner-settings-class").unbind("submit").dialog();
  9. }

  10. $dialogForm.attr("id", "partner-settings-form")
  11. .append($loading.clone());
  12. if(post) {
  13. /* HERE IS WHERE THE FORM APPEARS MERGED WITH THE DIALOG */
  14. var formData = {};
  15. $(e.target).each(function(){
  16. formData[this.name] = this.value;
  17. });
  18. $dialogForm.load(envPath + "/partner/settings", formData, function(response, status, xhr){
  19. /*
  20. if(data.status == "error") {
  21. $("#partner-settings-form").html(data.form);
  22. $(document).unbind("submit").on("submit", ".sign_in_form", function(event) {
  23. return showPartnerSettings(event);
  24. });
  25. $("#partner-settings-form").css("display", "block");
  26. } else {
  27. */
  28. if(response.status == "success") {
  29. $dialogForm.dialog("destroy");
  30. }
  31. //return false;
  32. })
  33. .dialog("open")
  34. .css("display", "block");
  35. } else {
  36. /* HERE IS WHERE THE FORM APPEARS EMBEDDED IN THE DIALOG */
  37. var partnerId = e.data.partnerId;
  38. $dialogForm.load(envPath + "/partner/settings?partnerid="+partnerId, null, function(){
  39. $("#partner-settings-form").css("display", "block");
  40. $dialogForm.dialog({
  41. title: "Partner Settings",
  42. modal: false,
  43. resizable: false,
  44. width: 580, //CPB 04.11.13
  45. position:['middle',130],
  46. dialogClass: "partner-settings-class",
  47. "close" : function(){
  48. var dialogid=$(this).parent("div").attr("id");
  49. $("#Tabs ul li."+dialogid).remove();
  50. $(this).remove();
  51. $("#alertmod").remove();
  52. //$link.removeClass('preventclick');
  53. },
  54. })
  55. .dialog("open")
  56. .css("display", "block");
  57. $(document).on("submit", ".sign_in_form", function(event) {
  58. event.preventDefault();
  59. return showPartnerSettings(event);
  60. });
  61. return false;
  62. })
  63. }
  64. return false;
  65. };


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.