专栏首页用户画像bootstrap模态框之加载页面至modal-boby

bootstrap模态框之加载页面至modal-boby

一、效果图

思路:使用$("#reserveForm").html(result); result为Ajax请求controller所返回的页面

二、预订会话框Modal

<button id="reserveDialog" class="btn btn-primary btn-large" href="#reserveDialogModal"  data-toggle="modal">预订</button>
<div class="modal fade"  style="width:auto;" id="reserveDialogModal" tabindex="-1" style="display: none"  aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">场地预定</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <div class="reserve_top_line">

                </div>
                <div class="modal-body form-horizontal" id="reserveForm">
                    <!--预定表单-->
                    <!--end 预定表单-->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="closeBtn" class="btn btn-default btn-flat md-close" data-dismiss="modal">
                    取消
                </button>
                <button type="button" id="saveBtn" class="btn btn-primary btn-flat">确定</button>
            </div>
        </div>
    </div>
</div>

三、会话框的主体内容:reserveForm.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<form id="reserveFormBean" class="form-horizontal">
    <input type="hidden" name="token" value="${token}"/>
    <input type="hidden" name="project.id" value="${reserveField.reserveProject.id}"/>

    <div class="content text-justify" style="text-align: center;vertical-align: middle;">
        <div class="row">
            <div class="col-lg-6  reserve_mid_line">
                <div class="row">
                    <div class="form-group">
                        <label for="reserveFieldName" class="col-sm-2 control-label"> 场地:</label>
                        <div class="col-lg-4">
                            <input readonly="readonly" id="reserveFieldName" class="form-control"
                                   value="${reserveField.name}"/>
                            <input type="hidden" id="consDate" name="consDate"
                                   value="${date}"/>
                            <input type="hidden" name="projectId" value="${reserveField.reserveProject.id}"/>
                            <input type="hidden" name="reserveVenue.id" value="${venueId}"/>
                            <input type="hidden" id="fieldId" name="venueConsList[0].reserveField.id"
                                   value="${reserveField.id}"/>
                            <input type="hidden" name="venueConsList[0].reserveVenue.id"
                                   value="${reserveField.reserveVenue.id}"/>
                            <input type="hidden" name="venueConsList[0].consPrice" value="${reserveField.actualPrice}"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label for="startTime" class="col-sm-2 control-label">时间:</label>
                        <div class="col-sm-4">
                            <select id="startTime" class="form-control input-sm" name="venueConsList[0].startTime">
                                <c:forEach items="${times}" var="t">
                                    <option
                                            <j:if test="${t eq startTime}">selected="selected"</j:if>
                                            value="${t}">${t}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="endTime" class="col-lg-2 control-label" style="text-align: center">至</label>
                        <div class="col-sm-4">
                            <select class="form-control input-sm" id="endTime" name="venueConsList[0].endTime">
                                <c:forEach items="${times}" var="t">
                                    <option
                                            <j:if test="${t eq endTime}">selected="selected"</j:if>
                                            value="${t}">${t}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label for="frequency" class="col-sm-2 control-label">频率:</label>
                        <div class="col-sm-4">
                            <select class=" form-control input-sm" id="frequency" name="frequency" class="select2">
                                <option value="1">单次</option>
                                <option value="2">每天</option>
                                <option value="3">每周</option>
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <label for="halfCourt" class="control-label">类型:</label>
                        </div>
                        <div class="col-lg-2">
                            <input type="radio" id="halfCourt" name="halfCourt" value="1" class="icheck"/>半场
                        </div>
                        <div class="col-lg-2">
                            <input type="radio" id="allCourt" name="halfCourt" value="0" class="icheck" checked="checked"/>全场
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <label for="tutorId" class="col-sm-2 control-label">教练:</label>
                        <div class="col-sm-4">
                            <select id="tutorId" name="tutor.id" class="form-control input-sm">
                                <option value="">请选择</option>

                                <c:forEach items="${tutors}" var="t">
                                    <option data-price="${t.price}" value="${t.id}" onclick="">${t.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <label for="tutor_price" class="control-label">价格:</label>
                        </div>
                        <div class="col-lg-4">
                            <input readonly="readonly" id="tutor_price" class="form-control"
                                   value="0元/小时"/>
                        </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label for="tutorId" class="control-label col-sm-2">备注:</label>
                        <div class="col-sm-9">
                            <textarea id="remarks" name="remarks" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="row">
                    <div class="form-group">
                        <label for="isMember" class="control-label col-lg-3">顾客类型:</label>
                        <div class="col-lg-3">
                            <input type="radio" id="isMember" class="icheck" value="1" checked="checked"
                                   name="memberType"/>会员
                        </div>
                        <div class="col-lg-3">
                            <input type="radio" class="icheck" value="0" name="memberType"/>非会员
                        </div>
                    </div>
                </div>
                <div class="row" id="memberSelect">
                    <div class="form-group">
                        <label for="memberId" class="control-label col-lg-3">会员姓名:</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="memberId" name="member.id">
                                <option value="">--请选择--</option>
                                <c:forEach items="${memberList}" var="m">
                                    <option value="${m.id}">${m.mobile}-${m.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label for="userName" class="control-label col-lg-3">姓名:</label>
                        <div class="col-lg-6"><input id="userName" name="userName"
                                                     type="text" readonly="readonly"
                                                     class="form-control input-sm"/></div>
                    </div>
                </div>
                <div class="row" id="deposit" style="display: none">
                    <div class="form-group">
                        <label for="consPrice" class="control-label col-lg-3">押金:</label>
                        <div class="col-lg-6">
                            <input type="text" id="consPrice" name="consPrice"
                                   class="form-control"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label for="consMobile" class="control-label col-lg-3">手机:</label>
                        <div class="col-lg-6"><input id="consMobile" name="consMobile"
                                                     type="text" readonly="readonly"
                                                     class="form-control"/></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $("#reserveDialogModal").draggable({
            handle: ".modal-header"
        });
        $("input[name='memberType']").click(function(){
            var memberType=$(this).val();
            if(memberType=="1"){
                $("#deposit").hide();
                $("#userName").attr("readonly", "true");
                $("#consMobile").attr("readonly", "true");
                $("#memberSelect").show();
            }
            if(memberType=="0"){
                $("#deposit").show();
                $("#userName").removeAttr("readonly");
                $("#consMobile").removeAttr("readonly");
                $("#memberSelect").hide();
            }
        })
        $("#memberId").on('change', function () {
            var mid = $(this).attr("value");
            var text = $(this).find("option:selected").text();
            var mobile = text.split('-')[0];
            var username = text.split('-')[1];
            $("#userName").attr("value", username);
            $("#consMobile").attr("value", mobile);
        });

        $("#startTime").on('change', function () {
            var startTime = $("#startTime").attr("value");
            var endTime = $("#endTime").attr("value");
        });

        $("#endTime").on('change', function () {
            var startTime = $("#startTime").attr("value");
            var endTime = $("#endTime").attr("value");
        });

        //频率
        $("#frequency").on('change', function () {
            var frequency = $(this).val();
            if ('1' != frequency) {
                $("#date_div").show();
            } else {
                $("#date_div").hide();
            }
        });

        //教练
        $("#tutorId").on('change', function () {
            var price = $(this).find("option:selected").attr("data-price");
            if (price == undefined || price == '') {
                $("#tutor_price").val("0元/小时");
            } else {
                $("#tutor_price").val(price+"元/小时");
            }
        });
    });

</script>

三、JS

核心代码: $("#reserveForm").html(result);

$(document).ready(function () {
    //-------预定---------
    $(".table-chang tbody td").on('dblclick', function () {
        if (!$(this).hasClass("access")) {
            return;
        }
        var fieldId = $(this).attr("data-field");
        var time = $(this).attr("data-time");
        var price = $(this).attr("data-price");
        var isHalfCourt = $(this).attr("data-isHalfCourt");
        if (price == null || price == "" || price == undefined) {
            errorLoding("抱歉,该时间段价格尚未设定");
            return;
        }
        var date = consDate;//日期
        jQuery.postItems({
            url: ctx + '/reserve/field/reserveForm?math='+Math.random(),
            data: {fieldId: fieldId, time: time, date: date, venueId: venueId, isHalfCourt: isHalfCourt},
            success: function (result) {
                if (result) {
                    $("#reserveForm").html(result);
                    $("#reserveDialog").click();
                    $("#reserveForm .select2").select2({
                        width: '100%'
                    });
                    $('#reserveForm .icheck').iCheck({
                        checkboxClass: 'icheckbox_square-blue checkbox',
                        radioClass: 'iradio_square-blue'
                    });
                }
            }
        });
    });
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 条件选择css

    week
  • Html 收银页面设计

    week
  • 一个简单的卡动车排队系统

    week
  • ztree实现左边动态生成树,右边为具体信息功能

    王小婷
  • Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结

    授客
  • Django的主体页面抽取(七)

    在潦草的完成了注册与登录之后,下面开始编写平台的主体部分了。 忘记密码和恢复密码部分在最后完善的时候补上。

    zx钟
  • github博客Hexo引流到微信

    相信有不少小伙伴都在github上创建了属于自己的博客,其中用Hexo的Next主题应该不少,那么,我们究竟该如何将博客的流量引流到微信呢?今天就来带你看一看。...

    健程之道
  • iOS NSMutableArray和NSArray实例执行mutableCopy和copy方法的区别?

    赵哥窟
  • bootstrap

    花了一天时间学了下bootstrap入门,想必大家用css写前端页面的时候都很痛苦,bootstrap就是来解决这个问题的,它封装了css的很多样式,开发的时候...

    用户3112896
  • elasticSearch学习(九)

    此次项目实战采用java爬虫爬取京东的数据放在es数据源中,然后通过页面来模拟京东搜索。

    崔笑颜

扫码关注云+社区

领取腾讯云代金券