文档章节

layer

mickelfeng
 mickelfeng
发布于 2018/12/19 18:17
字数 854
阅读 27
收藏 0

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');//关闭弹窗
            }
        });
    });

 

© 著作权归作者所有

共有 人打赏支持
mickelfeng

mickelfeng

粉丝 234
博文 2737
码字总数 590882
作品 0
成都
高级程序员
私信 提问
iOS开发UI篇—CAlayer(创建图层)

iOS开发UI篇—CAlayer(创建图层) iOS开发UI篇—CAlayer(创建图层) 一、添加一个图层 添加图层的步骤: 1.创建layer 2.设置layer的属性(设置了颜色,bounds才能显示出来) 3.将layer添加到界...

法斗斗
2016/03/18
8
0
Direct2D教程(十二)图层

什么是Layers? Layer,中文译成图层,在Direct2D中可以用来完成一些特殊效果,使用Layer的时候,先将Layer Push到render target,然后进行绘制,此时是直接绘制在Layer上的,绘制完毕后,将...

吞吞吐吐的
2017/10/26
0
0
关于Cocos2dx 3.6 触摸事件 中 setSwallowTouches 的疑惑

假设Layer1的ZOrder大于Layer2的ZOder,则 Layer1和Layer2的触摸事件回调函数调用情况如下 Layer1 setSwallow: false false true true Layer1 touchBegan ret: false true false true ------......

Yuan_Z
2015/10/11
101
0
Jcanvas文档-2(图层和动画)

Drawing layers The method clears the canvas, and draws the canvas's layers. The layers are drawn from first to last, so the last layer will be drawn above all the others. Howeve......

安世博
2016/03/08
217
0
Layer从入门到精通-01你好,layer!

引言 通过本节学习,您将收获以下知识点: 1, layer是什么! 2, 如何引入layer! 3, 如何使用layer! 我们结合实际操作,通过一个简单的案例,让您切实感受到:layer的学习既有趣又简单! 和我一...

lizisir
2017/04/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
1
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部