Title: [SOLVED] enter in modal window, and page will refresh
Post by: LoreYun on May 11, 2016, 02:15:40 AM
Hello every I have a toolbar for a panel, and I use a toolbutton to open a modal window. There is a validatebox and two linkbuttons in that window. If you press enter in that window, the browser will be refreshed. Point out my mistakes, please. Thanks. <!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>enter</title>
<link rel="stylesheet" type="text/css" href="../components/easyui_1.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../components/easyui_1.4/themes/icon.css">
<script type='text/javascript' src='../components/easyui_1.4/jquery.min.js'></script>
<script type='text/javascript' src='../components/easyui_1.4/jquery.easyui.min.js'></script>
</head>
<body>
<script type='text/javascript'>
function op_w_create_group() {
var $w_group = $('#w_maintain_group');
$w_group.window({title: 'Create group', iconCls: 'icon-add'});
$('#submit_group').linkbutton({text: 'add'}).unbind('click').removeAttr('onclick').click(function () {
do_create_group()
});
$('#from_maintain_group').form('clear');
$w_group.window('open');
$('#new_group_name').focus();
}
function do_create_group() {
$('#from_maintain_group input.easyui-validatebox').validatebox('enableValidation');
alert('create group');
}
$(function () {
console.log('init');
$('input.easyui-validatebox').validatebox('disableValidation')
.focus(function () {
$(this).validatebox('enableValidation');
})
.blur(function () {
$(this).validatebox('validate')
});
$('#new_group_name').keydown(function (e) {
console.log('keydown');
if (e.which === 13) {
$('submit_group').click();
}
})
});
</script>
<div id="w_maintain_group" class="easyui-window" data-options="modal:true"
closed="true" collapsible="false" minimizable="false" maximizable="false" class="easyui-layout"
style="width:500px;height:200px;padding:5px;">
<form id="from_maintain_group" method="post" novalidate>
<div data-options="region:'North'" style="padding:10px;">
</div>
<div data-options="region:'center'" style="padding:10px;">
<input id="maintain_group_id" type="hidden"/>
<table>
<tr>
<td>group nameļ¼</td>
<td>
<input id="new_group_name" class="easyui-validatebox"
data-options="required:true,missingMessage:'is null'">
</td>
</tr>
</table>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
<a id="submit_group" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"
href="javascript:void(0)"
onclick="" style="width:80px"></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)"
onclick="closeWindow('w_maintain_group',true);" style="width:80px">cancel</a>
</div>
</form>
</div>
<table>
<tr valign="top">
<td>
<div class="easyui-panel" title="My Group" style="width:175px;height:400px;padding:10px;"
data-options="tools:'#tb_myGroup'">
</div>
<div id="tb_myGroup">
<a href="javascript:void(0)" class="icon-add" onclick="op_w_create_group();"></a>
</div>
</td>
</tr>
</table>
</body>
</html>
Title: Re: enter in modal window, and page will refresh
Post by: stworthy on May 11, 2016, 06:49:12 PM
Please try this code to prevent from submitting your form. $('#new_group_name').keydown(function (e) {
if (e.which === 13) {
$('#submit_group').click();
e.preventDefault();
}
})
Title: Re: enter in modal window, and page will refresh
Post by: LoreYun on May 11, 2016, 07:21:17 PM
Hi stworthy,
It's worked! Thank you very much! :)
|