django界面上弹出bootstrap modal对话框，对话框中包含iframe并请求一个新的页面

1、首先，需求是这样的，点击编辑学生信息的操作，弹出个添加学生课程的对话框，在对话框中需要一个选择学生课程的输入框，点击时，弹出选择课程的对话框并包含iframe，这个iframe是请求一个view的get方法，获取到课程列表的数据，返回一个页面，选择完后，再把数据返回给对话框里学生课程的输入框，也就是学生选择课程的一个操作，这些通通在一个页面完成。

2、这里主要附上如何弹出个选择课程列表的对话框，课程对话框中包含一个iframe的相关代码，具体的要看业务需求进行修改操作。

（1）、首先，附上选择课程的对话框代码，里面包含了一个iframe：

<!-- 选择课程列表对话框 -->
<div class="modal fade" id="stuClassModal" tabindex="-1" role="dialog" aria-labelledby="stuClassModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">&times;</span></button><h4 class="modal-title" id="stuClassModalLabel">选择课程</h4></div><iframe id="stu_class_iframe" class="col-md-12 box-inner" style="height: 600px"></iframe><div class="modal-footer"></div></div></div>
</div>

（2）、上面的对话框要弹出来，还有iframe的src需要指定，也就是我们在点击选择学生课程输入框时触发的操作，js代码如下，其中需要获取到选择学生课程列表的所请求的url，并且指定src，并打开这个对话框：

var stu_class_change = function (e, row_flag) {var sel_class_url = $("#sel_class_url").val();$("#stu_class_iframe").attr("src", sel_class_url + '?row_flag=' + row_flag);$("#stuClassModalLabel").text("选择课程");$("#stuClassModal").modal();
}

（3）、其中sel_class_url是用表单隐藏域来添加的，代码如下：

<input type="hidden" id="sel_class_url" value="{% url 'stu:class_sel' %}">

（4）、其中url配置的路径我就不写出来了，请求的view逻辑，get方法主要是获取到课程列表的数据，并显示出一个新的页面，这个页面就是上面iframe显示的页面，post方法主要是选择一个课程后，返回选择课程的数据，后面跟界面js做交互：

class SelClassView(View):def get(self, request):# 获取分页参数以及查询参数index = request.GET.get('index')  # 页码limit = request.GET.get('limit', 5)  # 分页条数row_flag = request.GET.get('row_flag')stu_class_name = request.GET.get('stu_class_name', '')class_list = StuClass.objects.all()if stu_class_name:class_list = StuClass.objects.filter(classname__contains=stu_class_name)page, page_range = page_util(class_list, limit, index)  # 分页query = {'name': stu_class_name}content = {'page': page, 'page_range': page_range, 'query': query, 'row_flag': row_flag}return render(request, 'stu/select_class.html', content)def post(self, request):try:class_chk = request.POST.get('class_chk')  # 选中的课程：格式 课程id_课程名称_课时class_chk_arr = corp_chk.split('_')  # 分割class_id = class_chk_arr[0]  # 课程idclass_name = class_chk_arr[1]  # 课程名称class_time = class_chk_arr[2]  # 课时return JsonResponse({'code': RET.OK, 'msg': '选择课程成功', 'class_id': class_id, 'class_name': class_name, 'class_time': class_time})except Exception as e:return JsonResponse({'code': RET.DATAERR, 'msg': '选择课程失败'})

（5），其中select_class.html主要代码如下，主要是一个表格数据，单选框选择数据，点击确定按钮，通过ajax请求上面第四步的post方法，将获取到的数据返回给页面：

<form id="sel_class_form" action="{% url 'stu:class_sel' %}" method="post">{% csrf_token %}<table class="table table-bordered table-hover"><thead class="bg-thead"><tr><th width="10%">选择</th><th>课程名称</th><th>课时</th></tr></thead><tbody id="tbody">{% for item in page %}<tr onclick="tr_click_checked('index_{{ item.classid }}')"><td><input type="radio" id="index_{{ item.classid }}" name="class_chk"value="{{ item.classid }}_{{ item.classname }}_{{ item.classtime }}"{% ifequal item.classname query.name %}checked{% endifequal %}></td><td style="text-align: left">{{ item.classname|default:'' }}</td><td style="text-align: left">{{ item.classtime|default:'' }}</td></tr>{% endfor %}</tbody></table>
</form><div class="col-md-12 text-right"><button class="btn btn-success" type="button" onclick="class_form_submit('sel_class_form', {{ row_flag }})"/>确定</div>

/** 选择课程提交表单验证 */
var class_form_submit = function (form_id, row_flag) {var val = $('input[name="class_chk"]:checked').val();   // 获取选中单选框if (val === undefined || val === '') {toastr.warning('请选择课程');return false;} else {var form = $("#" + form_id);$.ajax({cache: false,type: form.attr('method'),url: form.attr('action'),async: true,data: form.serialize(),headers: {"X-CSRFToken": $.cookie("csrftoken")},success: function (resp) {if (resp.code == "200") {window.parent.$('#class_id' + row_flag).val(resp.class_id)window.parent.$('#class_name' + row_flag).val(resp.class_name)window.parent.$('#class_time' + row_flag).val(resp.class_time)window.parent.$('#stuClassModal').modal('hide');} else {alert(resp.msg);}},error: function () {alert('error：请求失败');}});}
};

3、以上内容仅供大家，学习参考，谢谢！

django界面上弹出bootstrap modal对话框，对话框中包含iframe并请求一个新的页面相关推荐

写了一段VBA代码后， Excel每次保存时都弹出警告：”此文档中包含宏、Activex控件、XML扩展包信息“（office 2007）
前言:今天在写一段VBA代码之后,遇到一个问题, Excel每次保存时就报一个警告(使用的是office 2007): 此文档中包含宏.Activex控件.XML扩展包信息用起来很不爽! ----- ...
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 参考文章: (1)Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) (2)https://www. ...
酒店wifi代理服务器没有响应,wn10连接酒店wifi的登录界面无法弹出如何处理
通常情况下,我们在连接酒店wifi后都会出现登录验证界面.不过,最近一位windows10系统用户在连接wifi后打开网页却遇到无法显示登陆界面情况,该怎么办呢?接下来,就随小编一起看看wn10连接酒 ...
获取弹出式窗口（对话框）句柄
原文: 获取弹出式窗口(对话框)句柄 http://www.vbgood.com/thread-103057-1-1.html 昨天遇到了这个问题:碰巧今天在MSDN上看到了这方面的内容,记录下. 假 ...
计算机无法跳转登录页面,电脑连接校园网后CMCC登录界面不能弹出的解决方法...
电脑连接校园网后CMCC登录界面不能弹出怎么办?这是近来不少朋友都向小编反馈的问题.他们表示自己的计算机在连接校园网CMCC后登录界面无法弹出,并且无法通过手动打开网页的事,多次尝试笔者发现这是LSP ...
android r 新建分区_Android实现从下往上弹出视差效果(Activity)
先看下效果背景现在很多App设计会存在浏览模式,在没有登录情况下点击相关用户操作会跳转到登录页面LoginActivity,登录页面跳转常见的为从左向右,从下往上等视差效果,下面就来讲讲开启时从下 ...
JavaFX弹出窗口和消息对话框代码示例
弹出窗口弹窗类 package cn.zxl.AlertWindow;import javafx.geometry.Pos; import javafx.scene.Scene; import ja ...
C# ie通过打印控件点打印，总是弹出另存为xps的对话框
用的是lodop打印控件,点打印后,总是弹出另存为xps的对话框,后来在网上查到可能是把windows自带的Microsoft XPS Document Writer设为默认打印机的原因. 但现在没有 ...
【wpf】在win10系统上弹出toast和notification
原文:[wpf]在win10系统上弹出toast和notification 老规矩,先看效果右下角的notification: 操作中心的notification: 整体效果: 前提条件 1.需要在 ...

django界面上弹出bootstrap modal对话框，对话框中包含iframe并请求一个新的页面

django界面上弹出bootstrap modal对话框，对话框中包含iframe并请求一个新的页面相关推荐

最新文章

热门文章