How do I AjaxResponse on a custom AJAX call?

Question

I have some custom Javascripts. at the part of code I want to leverage Drupal AjaxResponse but looks like it's only working when there Triggered by Drupal Form's ajax element. ( my ajax call verb is POST)

I mean when I can this endpoint from js, I see the response in browser network, but it does not work and not applied.

Response:

[{"command":"alert","text":"just to test trigger Drupal command"}]

Route:

picture_park.preset_selector:
  path: '/admin/media/picture-park/preset-selector'
  defaults:
    _title: 'Preset Selector Picture Park images as Media'
    _controller: '\Drupal\media_entity_remote_picture_park\Controller\MediaController::presetSelector'
  requirements:
    _permission: 'Remote Image Picture Park: Create new media'

Controller method:

  public function presetSelector(): AjaxResponse
  {
    $response = new AjaxResponse();
    $response->addCommand(new AlertCommand("just to test trigger Drupal command"));

    return $response;
  }

JS:

  function postData(data) {
    return jQuery.post("/admin/media/picture-park/preset-selector?_wrapper_format=drupal_ajax", {
      "data": data,
      "js": true,
      "_drupal_ajax": 1,
    })
  }

So, what I'm looking for is, how can I make Drupal AjaxResponse runs and get executed when the endpoint is called from a custom js?

Answer 1

You should be able to trigger the commands with the following:

ajaxObject = Drupal.ajax({
  url: "",
  base: false,
  element: false,
  // Use the 'submit' key to pass data.
  // Leave this key out if not passing any data.
  submit: {"data":"test"},
  progress: false
});

// Trigger ajax commands.
ajaxObject.success(data, "success");

Add the above to a success callback of your Ajax response. Note you may also need to add the following to process any Ajax inserted content:

Drupal.attachBehaviors();