tags:

views:

85

answers:

3
+1  Q: 

clicking a button via javascript does not cause a post

hi there!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<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"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"&gt;&lt;/script&gt;
</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() {
                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');
                        }
                    }
                });

                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.

can anybody help me out?

thanks in advance!

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"&gt;
<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"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"&gt;&lt;/script&gt;
</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.

any help for me please?

A: 

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');
                        }
                    }
                });
Béres Botond  2010-06-14 09:21:51
thanks for this hint, but you may try it yourself - just adapt my example ... and nope, this won't help!!
Andreas Niedermair  2010-06-14 09:25:26
cannot submit the form, due to needing the explicit causer of the post ... i've mentioned that in a cmt!!
Andreas Niedermair  2010-06-14 09:34:38
+1  A: 

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();
};
graphicdivine  2010-06-14 11:02:29
well, the submit will work, but it won't cause the submit-event of the form to be triggered.
Andreas Niedermair  2010-06-14 11:31:56
also: why for god's sake is the inline-eventHandler triggered if modal is used
Andreas Niedermair  2010-06-14 11:33:42
see my update an the answer
Andreas Niedermair  2010-06-14 12:49:35
A: 

just to give a little more detail than graphicdivine:

line 9153ff:

events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
    function(event) { return event + '.dialog-overlay'; }).join(' '),

line 9162ff:

if ($.ui.dialog.overlay.instances.length) {
    $(document).bind($.ui.dialog.overlay.events, function(event) {
        // stop events if the z-index of the target is < the z-index of the overlay
        return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ);
    });
}

but still strange, that the orignal eventHandler triggers...

Andreas Niedermair  2010-06-14 12:21:31

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript