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 setmodal: 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');
}
}
});
加载中,请稍侯......
精彩评论