Bootstrap4, JQuery3 and FOS Comment Bundle => $.get(...).error is not a function

Question

This is more a fix I found rather than a question.

On a Symfony 3 project, I decided to upgrade to bootstrap 3 to 4. It implied using JQuery3 which is not fully compatible with the asynchronous comments display of Fos Comment Bundle 2.0.14 (and probably earlier).

You'll probably get a JS error:

TypeError:$.get(...).error is not a function

Answer 1

This is due to the fact that the '.error' called in the js is deprecated in jQuery3 (see at the bottom of https://api.jquery.com/jQuery.Ajax/).

To correct this cleanly, without modifying the bundle files:

STEP1:

copy the file

web/bundles/foscomment/js/comment.js

to

web/js/foscomments-fix-jquery-3.js

(or whatever name you want)

STEP 2:

update the lines

$.post(url, data, success).error(wrappedErrorCallback).complete(wrappedCompleteCallback);

to

$.post(url, data, success).fail(wrappedErrorCallback).done(wrappedCompleteCallback);

and

$.get(url, data, success).error(wrappedErrorCallback);

to

$.get(url, data, success).fail(wrappedErrorCallback);

STEP 3:

copy

vendor/friendsofsymfony/comment-bundle/FOS/CommentBundle/Resources/views/Thread/async.html.twig

to

app/Resources/FOSCommentBundle/views/Thread/async.html.twig

STEP 4:

modify the line

fos_comment_script.src = '{{ asset('bundles/foscomment/js/comments.js') }}';

like this:

fos_comment_script.src = '{{ asset('**js/foscomments-fix-jquery-3.js**') }}';