0

I am working with the laravel framework and trumbowyg (javascript rich text editor, see: https://alex-d.github.io/Trumbowyg/). I am building a page where the user can edit his post and save it immediatly after he change something.

To achieve my goal that the user must not reload the page I am using AJAX to save the changes, but I am getting the error "trumbowyg is not a function" each time I click on my save button.

This is my javascript code:

$(document).ready(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        }
    });

    $(document).on('click', '#save', function(){
        $.ajax({
            method: 'POST',
            url: '/user/documents/{{$document->id}}/edit',
            data: {
                'created_post': $('#editor').trumbowyg('html'),
            },
            success: function(response){ 
                console.log(response);
            },
            error: function(jqXHR, textStatus, errorThrown){ 
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + + ' : ' + errorThrown);
            }
        });
    })


})

Is there anything I can do to fix this error?

The normal function: $('#editor').trumbowyg('html', '{!! $document->old_version !!}'); is working fine so the order of loading the javascript files should be correct, but the kind of this error speeks against this.

Robert Wolf
  • 191
  • 1
  • 11
  • This works for me: https://jsfiddle.net/khrismuc/srtkvcfn/ (if you check the XHR in the console, you'll find the parameters contain the HTML content of the editor) –  Jun 24 '19 at 09:45
  • I am getting the error: "edit:345 Uncaught TypeError: $(...).trumbowyg is not a function at HTMLAnchorElement. (edit:345) at HTMLDocument.dispatch (jquery.min.js:3) at HTMLDocument.q.handle (jquery.min.js:3)" – Robert Wolf Jun 24 '19 at 09:50
  • We can't debug this without access to your live code as far as I can see. How and where are you including the ` –  Jun 24 '19 at 09:54
  • Unfortunately I can not give you live access to the code. The scripts are loaded in the header of my document, my code above is at the end of my document. As I said above, the trumbowyg functions works outside of my document.ready function. – Robert Wolf Jun 24 '19 at 10:09

1 Answers1

0

Solution was adding $.noConflict(); to the first line after the definition of the function inside of the document ready call.

Robert Wolf
  • 191
  • 1
  • 11