2019独角兽企业重金招聘Python工程师标准>>>
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染,不可点击的解决办法
layer 实现弹窗提交信息
function confirmUpdateAward(i) {
layer.open({
type: 1,
closeBtn: false,
shift: 7,
shadeClose: true,
content: "<div style='width:350px;'>"+
"<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入货架号</p><input id='frame' class='form-control' type='number' name='frame' value='"+awards[i].awName+"'/></div>" +
"<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入行号</p><input id='row' class='form-control' type='number' name='row' value='"+awards[i].awDescription+"'/></div>"+
"<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入列号</p><input id='col' class='form-control' type='number' name='col' value='"+awards[i].awUserCount+"'/></div>"+
"<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入闪光灯</p><input id='light' class='form-control' type='number' name='light' value='"+awards[i].awKind+"'/>" +
"<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入安全开关</p><input id='switch' class='form-control' type='number' name='switch' value='"+awards[i].awKind+"'/>" +
"<button style='margin-top:5%;' type='button' class='btn btn-block btn-success btn-lg' onclick='updateAward("+awards[i].id+")'>提交</button></div>"
});
}
function updateAward(awardId){
var awardUserCount = $("#awardUserCount").val();
if(awardUserCount*1>8888 || awardUserCount*1<1){
layer.msg('人数必须是1到8888', {
time: 500, //0.5s后自动关闭
// btn: ['明白了', '知道了']
});
var awardName = $("#awardName").val();
var awardDescription = $("#awardDescription").val();
var awardKind = $("#awardKind").val();
$.ajax({
type: "post",
url : getContextPath() + "/award/updateAward",
dataType:'json',
data: {
"awardId":awardId,
"awardName":awardName,
"awardDescription":awardDescription,
"awardUserCount":awardUserCount,
"awardKind":awardKind
},
success: function(data){
var updateSuccess = data.data;
if(updateSuccess){
layer.msg('修改成功', {
time: 500, //0.5s后自动关闭
// btn: ['明白了', '知道了']
});
refreshPage();
}else{
layer.msg('修改失败', {
time: 500, //20s后自动关闭
// btn: ['明白了', '知道了']
});
}
}
});
layer.closeAll();
}
var html = '<form class="layui-form" action="">'
+ '<div class="layui-form-item"><label class="layui-form-label">角色名</label><div class="layui-input-block"><input type="text" name="rolename" required lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input"></div></div>'
+ '<div class="layui-form-item layui-form-text"><label class="layui-form-label">角色描述</label><div class="layui-input-block"><textarea name="roledesc" placeholder="请输入角色描述" class="layui-textarea"></textarea></div></div>'
+ '<div class="layui-form-item"><label class="layui-form-label">是否启用</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭"></div></div>'
+ '<div class="layui-form-item" hidden><div class="layui-input-block"><button id="addRole" class="layui-btn" lay-submit lay-filter="formDemo">提交</button></div></div>'
+ '</form>';
layer.open({
type : 1,
title : '添加角色',
area : [ '500px', '400px' ],
shadeClose : true, // 点击遮罩关闭
content : html,
btn : [ '确认', '取消' ],
success : function(index, layero) { // 成功弹出后回调
form.render('checkbox'); // 刷新checkbox开关渲染(否则开关按钮会不显示)
},
yes : function(index, layero) { // 确认按钮回调函数
layero.find('#addRole').click();
},
btn2 : function(index, layero) { // 取消按钮回调函数
layer.close(index); // 关闭弹出层
}
});
//弹出一个页面层
$('#addCustomer').on('click', function(){
layer.open({
type: 1,
area: ['800px', '600px'],
shadeClose: false, //点击遮罩关闭
content: '<form class="am-form">\n' +
' <br>\n' +
' <label for="username">姓名:</label>\n' +
' <input type="text" name="name" id="name"/>\n' +
' <br>\n' +
' <label for="username">账号:</label>\n' +
' <input type="text" name="username" id="username"/>\n' +
' <br>\n' +
' <label for="password">密码:</label>\n' +
' <input type="password" name="password" id="password"/>\n' +
' <br>\n' +
' <label for="password">手机号:</label>\n' +
' <input type="text" name="phone" id="phone"/>\n' +
' <br>\n' +
' <label for="password">找到密码问题:</label>\n' +
' <input type="text" name="phone" id="question"/>\n' +
' <br>\n' +
' <label for="password">找到密码问题:</label>\n' +
' <input type="text" name="phone" id="answer"/>\n' +
' <div class="am-cf">\n' +
' <input type="submit" id="submit" value="注 册" class="am-btn am-btn-primary am-btn-sm am-fl">\n' +
' </div>\n' +
' </form>'
});
});
$('body').on('click', '#submit', function(){
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var phone = $("#phone").val();
var question = $("#question").val();
var answer = $("#answer").val();
$.ajax({
url: "/customer/register.do",
data: {
CustomerName:name,
CustomerLoginName: username,
CustomerPassword: password,
CustomerPhone:phone,
CustomerPwdQuestion:question,
CustomerPwdAnswer:answer
},
success: function(data) {
//注册成功
if(data.status === 0) {
layer.msg('注册成功!');//保存成功提示
} else {
layer.msg("用户名已存在");
}
layer.closeAll('iframe');//关闭弹窗
}
});
});