BlockUI problems only in Safari when button is contained in a form element
I have been struggling with an issue for a couple days and I am at an loss so I figured I would post here. On all browsers (Yes even opera) my BlockUI behaves as expected. Not in Safari though. When in safari the screen never renders the fade or message in the center.. Very perplexing. Here is the relevant code:
<script type="text/javascript">
$.ajaxSetup({
type: 'POST',
headers: { "cache-control": "no-cache" }
});
$(document).ready(function () {
$('#Submit1').click(function (e) {
var form = this.form;
e.preventDefault();
$.blockUI({
message: '<h1>Processing Registration, Please wait..</h1>',
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#ffffff'
}
});
setTimeout(function () {
form.submit();
}, 200);
});
});
</script>
If I move the form button out of the form the page then shows the blockUI in Safari (but of course does not perform my form button function).
Ideas?
Thanks!
-D-