clicking a button via javascript does not cause a post
- by Andreas Niedermair
hi there!
<!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;
$(document).ready(function() {
InitializeVariables();
InitiliazeDialog();
InitiliazeForm();
});
function InitializeVariables() {
fooButton = $('#fooButton');
fooForm = $('#fooForm');
}
function InitiliazeDialog() {
var dialog = $('<div/>');
dialog.css('display', 'none');
var content = $('<p/>');
var icon = $('<span/>');
icon.addClass('ui-icon ui-icon-alert');
icon.css('float', 'left');
icon.css('margin', '0px 7px 20px 0px');
content.text('do you really want to hurt me?');
icon.prependTo(content);
content.appendTo(dialog);
var dialogOpenMethod = function () {
dialog.dialog('open');
return false;
};
var dialogOpenHandlerMethod = function (event, ui) {
var widget = dialog.dialog('widget');
widget.appendTo(fooForm);
var overlay = widget.prev();
overlay.css('z-index', 999);
overlay.appendTo(fooForm);
widget.css('position', 'fixed');
widget.css('top', '50%');
widget.css('margin-top', widget.height() / 2 * -1);
widget.css('left', '50%');
widget.css('margin-left', widget.width() / 2 * -1);
};
var submitMethod = function () {
dialog.dialog('option', 'closeOnEscape', false);
var widget = dialog.dialog('widget');
var yesButton = $(':button:eq(0)', widget);
var noButton = $(':button:eq(1)', widget);
var closeButton = $('a.ui-dialog-titlebar-close', widget);
noButton.remove();
closeButton.remove();
fooButton.unbind('click', dialogOpenMethod);
fooButton.click();
};
dialog.dialog({
autoOpen: false,
modal: true,
buttons: {
'Ja': submitMethod,
'Nein': function () {
dialog.dialog('close');
}
},
open: dialogOpenHandlerMethod
});
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>
</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!
i also opened a ticket on jqueryUI for this
