Search code examples
jqueryajaxtwitter-bootstrapsummernote

Summernote not initialized on even ajax requests for bootstrap 3 modal

Example: http://jsfiddle.net/atfb8huL/

  • When you first click "Open Summernote" link. Ajax loaded successfully and summernote is initialized as expected.
  • Close the modal box and click "Open Summernote" link. Nothing happens.
  • Close the modal box and click "Open Summernote" link. Summernote is initialized as expected.
  • Close the modal box and click "Open Summernote" link. Nothing happens.

.... and it will going on like this.

I don't know if recieved ajax content will contain summernote editor before loading the content. So initializing summernote in ajax success function is not an option.

Body: 

<body>
    <a href="modal.html" class="ajaxPopup">Open Summernote</a>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                     <h4 class="modal-title">Modal title</h4>

                </div>
                <div class="modal-body">
                    <div class="te"></div>
                </div>
            </div>
        </div>
    </div>
<script type='text/javascript'>
var $myModal = null;
$(document).ready(function () {
    $myModal = $('#myModal');
    $('.ajaxPopup').on('click', function () {
        $.ajax({
            url: 'modal.html',
            type: 'GET',
            context: this,
            success: function (response) {
                $myModal.find('.modal-title').html("Summernote");
                $myModal.find('.modal-body').html(response);
                $myModal.modal({
                    show: true,
                    backdrop: true
                });
            }
        });
        return false;
    });
});
</script>
</body>

modal.html content

<div id='commentBox'></div>
<script type='text/javascript'>
    $(function () {
        $('#commentBox').summernote();
    });
</script>

Any suggestions?

Solution

  • Emptying your modal body content prior to opening it fixes this issue.

    http://jsfiddle.net/gze70ov2/

    var $myModal = null;
$(document).ready(function () {
    $myModal = $('#myModal');
    $('.ajaxPopup').on('click', function () {
        $myModal.find('.modal-body').html('');
        $.ajax({
            url: '/echo/html/',
            data: {
                html: "<div id='commentBox'></div>" + "<script type='text/javascript'>$(function () {$('#commentBox').summernote();});<\/script>"
            },
            type: 'POST',
            context: this,
            success: function (response) {
                $myModal.find('.modal-title').html("Summernote");
                $myModal.find('.modal-body').html(response);
                $myModal.modal({
                    show: true,
                    backdrop: true
                });
            }
        });
        return false;
    });

    });