Resubmitting form data when closing simple modal.

Question

I'm opening a simple modal and making an Ajax call with the following function.

function TransactionModal($id, $s) {
        jQuery("#dialog").load("/chat/rejoin", { 'id': +$id, 's': +$s }, function()
        {
          jQuery("#dialog").modal({
          overlay:80,
          autoResize:false,
            containerCss: {width: "490px", height: "538px"},
          overlayCss: {backgroundColor:"#000"}
          });
        });
    }

Because I have some Javascript running in the page I want to load, I need to use iframes, so the rejoin page has the following in it.

<IFRAME SRC="/chat/join/id/<?php echo $id; ?>/cid/<?php echo $cid;?>" width="500" height="535">
    <!-- Alternate content for non-supporting browsers -->
    Upgrade Browser to support iframes
</IFRAME>

That all works great.

The problem that I'm having is that when I click on the close button, it is resubmitting form data.

I have no idea why but it's driving me nuts.

If I refresh the page the modal goes away and doesn't resubmit.

If I click the X image to close it it does resubmit.

Please help if you have any idea why it's doing this!

Answer 1

function rejoinModal($id) {

var src = '/chat/join/id/'+$id ;


jQuery.modal('<iframe src="' + src + '" height="555" width="510" style="border:0">', {
    containerCss:{
        backgroundColor:"#000",
        height:555,
        width:510,
        overFlow: "hidden",
    },

});

}

i solved it by not calling the iframe from withing the ajax call.

it is working now.