1. 程式人生 > >bootstrap modal呼叫codemirror探索實踐

bootstrap modal呼叫codemirror探索實踐

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獲取繫結資料

<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">&times;</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並無任何反應。