bootstrap modal调用codemirror探索实践
2017-07-24 10:55
204 查看
datatables中的button触发modal事件
datatables中的button
<td> <button type="button" data-toggle="modal" data-target="#editor" data-whatever={{ script.name }} class="btn btn-info" style="margin-right: 5px;">查看</button> <button type="button" class="btn btn-warning" style="margin-right: 5px;">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td>
{{ script.name }}是django的queryset
data-whatever绑定数据库数据通过modal的relatedTarget获取绑定数据
modal
<div class="modal fade" id="editor" tabindex="-1" role="dialog"> <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"><span aria-hidden="true">×</span></button> <h4 class="modal-title">查看脚本</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="scriptname" class="col-sm-2 control-label">脚本名称:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="scriptname" placeholder="unknown" readonly> <textarea id="cm" name="cm">test 4 chenqian.</textarea> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
<script type="text/javascript"> $(document).ready(function(){ $('.btn-info').click(function () { $('#editor').on('shown', function(){ alert("opened"); var textarea = document.getElementById('cm'); setTimeout(function(){ var editor = CodeMirror.fromTextArea(textarea, { mode: 'text/css', lineNumbers: true, lineWrapping: true }); }, 500); alert("code init"); }).on('hidden', function(){ editor.refresh(); }); }); }); </script>
此时可以正常弹出modal窗口,但是alert/console.log并无任何反应。
相关文章推荐
- 工业自动化软件产业发展的探索与实践
- 深度探索C++对象模型---Function语义学之Member的各种调用方式
- 远程调用服务的设计构思(zookeeper的一种应用实践)
- JVM高级特性与实践(十一):方法调用 与 字节码解释执行引擎(实例解析)
- 用WinDbg探索CLR世界 [4] 方法的调用机制之动态分析 - 下
- iOS开发 之 转场时 appear 与 disappear 的调用顺序探索
- 运维自动化的最佳实践探索 | 高效运维
- 深入探索c/c++函数(2)---普通成员函数调用的基本过程
- JNA调用C语言动态链接库学习实践总结
- 函数是如何被调用的?-探索代码背后的故事
- 用WinDbg探索CLR世界 [4] 方法的调用机制
- 李刚:服务外包产业转型期人才培养及服务的探索不实践
- Android中的HashMap原理实践探索,重写equals(),为什么重写hashCode() 和 ==
- Kafka 在华泰证券的探索与实践
- 调用非.net系统的Webservice的探索 ( 二 ) -WSE
- MySQL Cluster集群探索与实践
- 创建SvcHost.exe调用的服务原理与实践
- 架构设计:一种远程调用服务的设计构思(zookeeper的一种应用实践)
- 创建SvcHost.exe调用的服务原理与实践(1)
- MVVM探索:从ViewModel关闭Window的最佳实践