Why can not I pass the summernote name="" via ajax

0

After some test I saw that summernote does not pass the name via ajax request, can someone tell me why this?

$(document).ready(function(){
    $(document).on('click', '#submit_btn', function(){
        var titulo = $('#titulo').val();
        var dica = $('#dica').val();
        $.ajax({
            url: 'salvar_dica.php',
            type: 'POST',
            data: {
                'save': 1,
                'titulo': titulo,
                'dica': dica,
            },
            success: function(response){
                $('#titulo').val('');
                $('#dica').val('');
                $('#display_area').append(response);                
            }
        });
    });
});

<textarea type="text" name="dica" id="dica" class="summernote"  class="form-control"></textarea>

$(document).ready(function() {
    $('.summernote').summernote();
});

I ran without ajax and it worked fine, so I realized I can not seem to pass HTML tags via ajax!

    
asked by anonymous 13.04.2018 / 17:49

3 answers

2

When typing the text via summernote it will not be inserted into <textarea> , but in the generated editor, then when trying to get textarea with .val it will return empty.

To get summernote use their API as indicated in the documentation: link

Example:

var dica = $('<seu elemento>').summernote('code'); //Pega o conteudo HTML gerado

Test:

$(document).ready(function() {
    var editor = $("#editor");
    editor.summernote();
    
    $("#getText").click(function () {
        console.log( editor.summernote('code') );
    });
});
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script><textareaid="editor"></textarea>

<button id="getText">Ver texto</button>
    
13.04.2018 / 17:57
1

Ajax normally sends the contents of the textarea used by Summernote, and in the backend , for example PHP, the contents of textarea is received by its name , as in any element of form, with $_POST['dica']; .

I see that in this part $('#dica').val(''); of response of Ajax you want to clear the text in the editor, however this will only clear the contents of textarea .

To clear the text of the Summernote editor (newer versions) you can use:

$("#dica").summernote("reset");

So your code looks like this:

$(document).ready(function(){
    $(document).on('click', '#submit_btn', function(){
        var titulo = $('#titulo').val();
        var dica = $('#dica').val();
        $.ajax({
            url: 'salvar_dica.php',
            type: 'POST',
            data: {
                'save': 1,
                'titulo': titulo,
                'dica': dica,
            },
            success: function(response){
                $('#titulo').val('');
                $('#dica')
                .val('')  // apaga o texto do textarea usado pelo summernote
                .summernote("reset"); // apaga o texto do editor
                $('#display_area').append(response);                
            }
        });
    });
});

Functional sample

    
13.04.2018 / 19:48
0

textarea does not return in .val() , use:

var dica = $('#dica').text();
    
13.04.2018 / 17:54