Question

I am having an issue with a modal form. I have a text link that opens the modal form(working). Once the form opens it shows a registration page(working). The buttons used to submit the form are through the modal form. For example:

$("#register-dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 450,
width: 400,
modal: true,
buttons: {
    Cancel: function() {
        $(this).dialog('close');
    },
    'Create an account': function() {
            //ajax request here
    }
    }});

The buttons are showing up. However, I have discovered an issue with them. If I click on the link that opens the modal form and then click on the cancel button it works fine. I can also click the x at the top and it works fine. But if I click on the “Create an account” button (which performs an ajax request) and then click on the cancel button it does not work anymore. The strange thing about this is that if I click the x at the top it closes it. But there is something even stranger, now the link to open the modal form does not work until I reload the page. The crazy part of all of this is that the ajax request will continue to work. It seems that the ajax request is causing the issues here. All that I am doing with the request is updating the database with there credentials and updating the form to show that they had registered. Any ideas why this might be happening?

Answer 1

I would try to separate the dialog and the buttons initialization codes.

So, I would do the following:

$("#register-dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 450,
width: 400,
modal: true
});

The form’s HTML:

<div id="register-dialog">
...
<div id="acceptButton"><a href="#">...</a></div>
</div>

And finally the button code like:

$("#acceptButton").click(function (event) {
...
});

Regards.