Drupal 8 ajax form load error, context.querySelectorAll is not a function

Question

I have created a custom module with ajax call, which are sending render form data that I receive in my ajax prototype in a js file like below.

Drupal.AjaxCommands.prototype.loadCommentFormCommand = function (ajax, response, status) {
    if ($('#comment-form-wrapper').length === 0) {
        $('.wall-posts').prepend(response.html);
          Drupal.attachBehaviors(response.html);
        }
      };

But it's showing me

context.querySelectorAll is not a function 

Error. Does anyone face similar error or have some solutions for this?

Answer 1

The first argument to Drupal.attachBehaviors is an object representing a DOM element, context. You're currently providing it with a string.

In your case the correct code will probably be something like:

Drupal.attachBehaviors($('#comment-form-wrapper').get(0));

You don't pass data to behaviours through the attachBehaviors method, instead stash it somewhere in a global scope and pick it up later.

For example you might choose the window, drupalSettings, or some other object, depending on your general requirements and any other required uses of that HTML data.