当前位置: 首页 > news >正文

layer

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

 

转载于:https://my.oschina.net/mickelfeng/blog/2990627

相关文章:

  • RSA加密算法的简单案例
  • 第二次作业
  • Oracle数据库入门——初级系列教程
  • CentOS 网络基础:(4)设置单网卡多IP
  • PostgreSQL 9.6 for Centos7.4 最佳实践安装
  • charles抓包工具
  • OpenSL ES
  • C#.NET 剪切板复制粘贴泛型的例子代码参考 Clipboard Copy Paste List
  • 关于《停止学习框架》 - 讨论
  • Educational Codeforces Round 33 (Rated for Div. 2) E. Counting Arrays [数论II][组合数学]
  • [学习笔记]拉格朗日插值
  • 网络的分类
  • IIS 6.0/7.0/7.5、Nginx、Apache 等Web Service解析漏洞总结
  • Python3 标准库概览
  • C#进阶系列——AOP?AOP!
  • JS 中的深拷贝与浅拷贝
  • 【Linux系统编程】快速查找errno错误码信息
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • JavaScript DOM 10 - 滚动
  • Java的Interrupt与线程中断
  • Java教程_软件开发基础
  • JS正则表达式精简教程(JavaScript RegExp 对象)
  • Laravel5.4 Queues队列学习
  • log4j2输出到kafka
  • MySQL几个简单SQL的优化
  • PaddlePaddle-GitHub的正确打开姿势
  • React as a UI Runtime(五、列表)
  • spring boot 整合mybatis 无法输出sql的问题
  • 从零开始学习部署
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 简单实现一个textarea自适应高度
  • 前端攻城师
  • 如何解决微信端直接跳WAP端
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 数据结构java版之冒泡排序及优化
  • 听说你叫Java(二)–Servlet请求
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 详解移动APP与web APP的区别
  • 小程序测试方案初探
  • 看到一个关于网页设计的文章分享过来!大家看看!
  • ​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • #我与Java虚拟机的故事#连载10: 如何在阿里、腾讯、百度、及字节跳动等公司面试中脱颖而出...
  • (06)金属布线——为半导体注入生命的连接
  • (二)hibernate配置管理
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (全注解开发)学习Spring-MVC的第三天
  • (删)Java线程同步实现一:synchronzied和wait()/notify()
  • (一)u-boot-nand.bin的下载
  • (转)es进行聚合操作时提示Fielddata is disabled on text fields by default
  • (转)setTimeout 和 setInterval 的区别
  • (转)利用ant在Mac 下自动化打包签名Android程序