jQuery UI 1.10.3 Dialog Box, dragging moves away dialog box
Question
I am using jQuery 1.10.1 with migrate, jQueryUI 1.10.3, jQueryValidate 1.11.1.
Just using a simple form, it has two fields. On submit if values are not provided then a dialog box is displayed with a message.
Issue: In IE 10 When user tries to move (drag) the error message dialog box it just moves down. This only happens when vertical scroll bar is appears in the browser window. Verified in Chrome 27 it works. Sometimes gives the same issue in Firefox 21 and Opera 12.15.
Note: It works fine with jQuery UI 1.10.2 only issue is there in 1.10.3.
Sample Source
<html>
<head>
<style type="text/css">
.label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;}
.label1 {width:350px; text-align:right; padding-top:300px;padding-bottom:30px; font-weight:bold; }
</style>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function() {
$("#register-form").validate({
rules: { firstname: "required", lastname: "required" },
messages: { firstname: "Need First Name", lastname: "Need Last Name" },
showErrors: function(errorMap, errorList) {
$("#diverror").dialog({ modal: true });
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<form method="post" id="register-form">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
<div id="diverror" title="Basic dialog"><p>This is the default DIVERROR which is useful for displaying information.</p></div>
</body>
</html>
1 answers
solution1
5 ACCPTED 2013-06-05 07:20:42
Verified jQuery UI website, its a bug in jQuery UI.
Ticket# 9354: http://bugs.jqueryui.com/ticket/9354
Ticket# 9315: http://bugs.jqueryui.com/ticket/9315
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.