How to apply the shake effect to a dialog with an embedded form
I'm newbie on this, I'm trying to apply the shake effect to a dialog that has an embedded form but not success on this.
When I try to trigger the effect
$("#restore_password").effect("shake", {times: 3}, 80);
only the fields inside the form tag is taking the effect but the dialog box itself doesn't.
My div
<html>
<body>
<div id="restore_password" title="Confirmation code" class="ui-widget-content ui-corner-all" >
<form> <fieldset> <label for="code">Code</label> <input type="text" name="codecon" id="codecon" class="text ui-widget-content ui-corner-all" /> </fieldset>
</form>
</div>
</body>
</html>
My dialog
$("#restore_password").dialog({
height: 220,
width: 310,
autoOpen: false,
modal: true,
draggable: false,
resizable: false,
show: 'puff',
hiden: 'puff',
buttons: {
"Confirm": function(){
$("#change_password").dialog('open');
},
"Cancel": function(){
$(this).dialog('close');
$("#forgot_data").dialog('close');
$("#dialog-form").di开发者_高级运维alog('open');
setTimeout(function(){
$("#name").focus();
}, 800);
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
Any ideas?, it would be helpful.
Nalum's solution worked, but was a little ugly. Try this one:
$('#restore_password').parent().effect("shake", {times: 3}, 80);
$(...).dialog(...); creates a new element without an id.
e.g.
<div id="testingDiv">...</div>
becomes
<div style="..." class="..." tabindex="..." role="dialog" aria-labelledby="ui-dialog-title-testingDiv">
...
<div id="testingDiv">...</div>
...
</div>
So your code is working. What you need to do is target the dialog div e.g.
$('div[aria-labelledby=ui-dialog-title-testingDiv]').effect("shake", {times: 3}, 80);
加载中,请稍侯......
精彩评论