clicking a button via javascript does not cause a post_问答_开发者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
    <form id="fooForm">
        <script type="text/javascript">
            function FooMethod() {
                alert('hello');
            }
            var fooButton;
            var fooForm;
            var fooDialog;
            $(document).ready(function() {
                InitializeVariables();
                InitiliazeDialog();
                InitiliazeForm();
            });
            function InitializeVariables() {
                fooBu开发者_开发技巧tton = $('#fooButton');
                fooForm = $('#fooForm');
                fooDialog = $('#fooDialog');
            }
            function InitiliazeDialog() {
                var dialogOpenMethod = function () {
                    fooDialog.dialog('open');
                    return false;
                };
                var submitMethod = function () {
                    fooButton.unbind('click', dialogOpenMethod);
                    fooButton.click();
                };

                fooDialog.dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        'Ja': submitMethod,
                        'Nein': function () {
                            fooDialog.dialog('close');
                        }
                    }
                });

                fooButton.bind('click', dialogOpenMethod);
            }
            function InitiliazeForm() {
                fooButton.button();
                fooForm.submit(function () {
                    alert('doing a submit');
                });
            }
        </script>
        <input type="submit" id="fooButton" value="submit it!" onclick="FooMethod();"></input>
        <div id="fooDialog">
            Dialog info
        </div>

    </form>
</body>
</html>

what am i doing?

i want a modal-confirmation: user clicks on button, confirmation "do you really want to...?", user clicks "yes", this click unbinds the original click-handler and clicks the button again (which should cause a submit).

what/why is not working?

indeed you need a special case. this demo won't work, unless you set modal: false.

interesting to mention: the original handler (onclick="FooMethod();") is called in modal and non-modal dialog.

EDIT:

i adapted my sample due to graphicdivines answer, to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
    <form id="fooForm" method="POST" action="">
        <script type="text/javascript">
            var fooButton;
            var fooForm;
            var fooDialog;
            $(document).ready(function() {
                InitializeVariables();
                InitiliazeDialog();
                InitiliazeForm();
            });
            function InitializeVariables() {
                fooButton = $('#fooButton');
                fooForm = $('#fooForm');
                fooDialog = $('#fooDialog');
            }
            function InitiliazeDialog() {
                var dialogOpenMethod = function () {
                    fooDialog.dialog('open');
                    return false;
                };
                var submitMethod = function () {
                    fooButton.unbind('click', dialogOpenMethod);
                    fooButton.click();
                };

                fooDialog.dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        'Ja': submitMethod,
                        'Nein': function () {
                            fooDialog.dialog('close');
                        }
                    }
                });
                var dialogZ = fooDialog.dialog('option', 'zIndex');

                fooButton.bind('click', dialogOpenMethod);
            }
            function InitiliazeForm() {
                fooForm.submit(function () {
                    alert('doing a submit');
                });
            }
        </script>
        <input type="submit" id="fooButton" value="submit it!" style="z-index: 9999;"></input>
        <div id="fooDialog">
            Dialog info
        </div>

    </form>
</body>
</html>

why?

as you can see here, there's a nasty z-index-checker which i tried to avoid. but it wont' work.

Seems to me that you need to close the dialog, before you re-click the submit. Since modal disables everything on the page, the dialogue must be closed or the submit is not clickable. So your submit method becomes:

var submitMethod = function () {
    fooDialog.dialog('close'); // add this line ==============
    fooButton.unbind('click', dialogOpenMethod);
    fooButton.click();
};

Why are you not specifying HTML form method? The default form method is GET. So you should have:

<form id="fooForm" method="post" action="">

Action can be something else, it depends on what URL your submission handling logic is.

Edit: Also instead of clicking the submit button, just submit the form directly.

fooDialog.dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        'Ja': function() { $('#fooForm').submit(); },
                        'Nein': function () {
                            fooDialog.dialog('close');
                        }
                    }
                });