Summernote on dynamic Bootstrap modal

Question

I'm not so sure this is an issue with my code or a bug in Summernote. Thought I'd post here and see if anybody else is having this problem...

I have a Bootstrap modal for editing a form. When the modal is activated it pulls in content from mySQL and populates the form fields in the modal. If I change the text inside the textarea and click Submit, it works as it should: the new, updated text is sent to the server. However, if I add Summernote to that textarea and click submit the OLD, original text is sent to the server instead of the new, updated text.

Here's my code to attach Summernote to the dynamic modal. The Summernote editor does appear in the modal and I'm not receiving any javascript errors.

$('#modal-edit-post').on('shown.bs.modal', function() {
    if($('.summernote-edit').length > 0){
        $('.summernote-edit').summernote({
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'strike']],
                ['para', ['ul', 'ol']],
            ],
            styleWithSpan: false,
            onpaste: function(e) {
                var thisNote = $(this);
                var updatePastedText = function(someNote){
                    var original = someNote.code();
                    var cleaned = CleanPastedHTML(original);
                    someNote.code('').html(cleaned);
                };
                setTimeout(function () {
                    //this kinda sucks, but if you don't do a setTimeout, 
                    //the function is called before the text is really pasted.
                    updatePastedText(thisNote);
                }, 10);
            }
        });
    }
});

This is what I'm using to process the submit

$('#form-edit-post').submit(function(e) {

    var form = $(this);
    var formdata = false;
    if(window.FormData){
        formdata = new FormData(form[0]);
    }

    var id = 'edit-post';
    var formAction = form.attr('action');

    // testing to see the changes...
    var dd = form.serialize();alert(dd);return false;

    if($(this).valid()) {

        $('#form-edit-post :input').attr('disabled', true);
        $.ajax({
            type        : 'POST',
            url         : '/assets/ajax/post.php',
            cache       : false,
            data        : formdata ? formdata : form.serialize(),
            contentType : false,
            processData : false,
            dataType    : 'json',
            success: function(response) {
                if(response.status == 'success') {
                    modalSuccessMessage(id,'Your changes were saved');
                } else {
                    modalErrorMessage(id,response.message);
                }
                $('#form-edit-post :input').attr('disabled', false);
            },
        });
    }
    e.preventDefault();
});

Not sure if this is relevant, but this is how I'm pulling the dynamic content.

$('.edit-post').click(function(e) {

    var id   = $(this).data('id');
    var data = 'id=' + id;

    $.get('/assets/ajax/get-post-edit.php?id=',data, function(response) {
        if(response != 'fail') {
            $('#content-edit-post').html(response);
            $('#modal-edit-post').modal('show');
        }
    });

    e.preventDefault();
});

Answer 1

Summernote creates a new div to use when storing content from the Summernote editor. When submitting your form, you'll need to request that data from your Summernote instance, then insert into your textarea prior to serializing your form data. Assuming 'summernote-edit' is the class of your textarea:

$('#form-edit-post').submit(function(e) {

   var form = $(this);
   var formdata = false;
   if(window.FormData){
       formdata = new FormData(form[0]);
   }

   var id = 'edit-post';
   var formAction = form.attr('action');

   // Get content from Summernote
   var content = $(".summernote-editor").code();

   // Add content from summernote to textarea
   $("textarea.summernote-editor").html( content );

   // testing to see the changes...
   var dd = form.serialize();alert(dd);return false;

   if($(this).valid()) {

       $('#form-edit-post :input').attr('disabled', true);
       $.ajax({
           type        : 'POST',
           url         : '/assets/ajax/post.php',
           cache       : false,
           data        : formdata ? formdata : form.serialize(),
           contentType : false,
           processData : false,
           dataType    : 'json',
           success: function(response) {
               if(response.status == 'success') {
                   modalSuccessMessage(id,'Your changes were saved');
               } else {
                   modalErrorMessage(id,response.message);
               }
               $('#form-edit-post :input').attr('disabled', false);
           },
       });
    }
    e.preventDefault();
});

Answer 2

I think you should add onchange listener to your inputs, so you'll always received the correct text.

<textarea class="summernote" name="content"></textarea>

if its a textarea:

$('.summernote').summernote({
    height: 300
}).on('summernote.change', function(we, contents, $editable) {
    $(this).html(contents);
});

if its an input field:

$('.summernote').summernote({
    height: 300
}).on('summernote.change', function(we, contents, $editable) {
    $(this).val(contents);
});