Jquery Dialog - extra dialog opening

Question

I have a dialog opening after a form is submitted using the ajaxForm plugin. The ajaxForm updates the dialog content.

The problem is that an extra dialog is opening. Here's the javascript code:

function formSubmit(target, form, success){
    var formoptions = { 
        target: target,
        success: success
    }; 
$(form).ajaxForm(formoptions);
}

function createDialog(element){
    $(element).dialog({
      modal: true,
      autoOpen: false,
      buttons: {
       Ok: function() {
        $(this).dialog('close');
       }
      }
     });
}

in my load function:

createDialog(".formresponse");
$(".contact_submit").click(function(){
    formSubmit('.formresponse', '.submitform', function(){
        $('.formresponse').dialog('open');
    });
});

Answer 1

Is .contact_submit a <input type="submit">? I think maybe when clicking it's submitting twice, once via normal means and once via ajax. Try using <input type="button"> instead and see if you still get 2 dialog boxes.

Answer 2

Actually, someone on the JQuery-Ui Google group pointed me in the right direction. I had two divs with the same classname of .formresponse in my page.

I moved it out of the php while loop so that it's only on the page once and now it works.

Silly me.

Oh, and it was only submitting once, I checked that in Firebug.

Jquery does a nice job of issuing return false on buttons.