Dialog + Ajax

Dialog + Ajax

Trying to add in dialog functionality to our internal system and I just can't get it working quite correctly.

Background: Been using Ajax to create "zones" on a page so when you click a link, the data is populated into that zone, and if you click an edit link in that zone, the data is replaced with a form.  When you submit the form (via ajax), that zone is refreshed with the updated information (and sometimes other zones are refreshed as well) but the page doesn't refresh.

The system has been working very well, but I am exploring the possibility of moving all of the forms into dialog boxes (modal).  The concept is sound, but running into a couple of issue trying to make things work.

Universal ajax function:
  1. function getData(divId,script)
  2. {
  3.     $(divId).before("<div id=\"loading\">&nbsp;</div>");
  4.     $(divId).FadeOut("fast",function(){
  5.         $(divId).html("");
  6.         $.ajax({
  7.             type: "GET",
  8.             url: script,
  9.             cache: false,
  10.             success: function(data){
  11.                 $(divId).html(data).FadeIn(500);
  12.                 $("#loading").remove();
  13.             }
  14.         });
  15.     });
  16. }
Basically: Loading Gif in, html out, get html, paint in html, remove loading gif.

The forms are AJAX in nature and look like this:
  1. <div id="dialog" title="test" style="display: none;">
  2.   <form method="POST" id="frmEdit" onSubmit="return ProcessForm(this,\'#divForm\',\'?view=divForm&Campaign_ID='.$campaign_id.'\');">
Submit:
  1. <input class="check positive" type="submit" value="Save Changes">
The main issue I am stuck on right now is how to get the "button" portion of dialog to act like the above input button.  I changed the JS to look like this:
  1. function showModal(divId,script)
    {
        $.ajax({
            type: "GET",
            url: script,
            cache: false,
            success: function(data){
                $(divId).html(data);
                $("#dialog").dialog({
                    buttons: {
                       "Submit": function() {
                        $("frmEdit").submit();
                       },
                       "Cancel": function() {
                        $(this).dialog('close');
                       }
                      }
                });
            }
        });
    }




















The problem with this, is that it appears to submit the form natively and disregard the "onSubmit()" declaration stored in the <form> tag. 

I am trying to keep this as self contained as possible, and I really don't want to even handle the buttons in the shared javascript library (nor do I want to embed java script in every form object.

While I am here, am I going to have issue with validate() and dialog()? As most all of my forms use that .validate() plugin.

Thanks in advance for any help you can provide.