How to load a form/page into a div via AJAX?

Question

I want to open the create user form (/admin/people/create) into a specific div via AJAX. I can currently open such forms into a modal window using the following link format:

<a href="/admin/people/create" class="use-ajax" data-dialog-type="modal">
    Add user
</a>

Is there any way to load this form/page into a div instead of into a modal window?

Answer 1

Core does not provide an HTML format for non-dialogs, but you can create your own custom format.

mymodule/js/custom-ajax-loader.js:

(function ($, Drupal) {
  Drupal.behaviors.myCustomAJAXStuff = {
    attach: function (context, settings) {
      $("a.use-custom-ajax", context).once('mymodule-ajax').each(function(i, ajaxLink) {
        const $linkElement = $(ajaxLink);

        const elementSettings = {
          url: $linkElement.attr("href"),
          event: 'click',
          progress: {type: 'throbber'},
          element: ajaxLink,
        };

        const myAjaxObject = Drupal.ajax(elementSettings);

        // Declare a new Ajax command specifically for this Ajax object.
        myAjaxObject.commands.insert = function (ajax, response) {
          let target = $linkElement.attr("target");
          $(target).html(response.data);
        };
      });
    },
  };
})(jQuery, Drupal);

mymodule.libraries.yml:

mymodule.ajax:
  js:
    js/custom-ajax-loader.js: { }
  dependencies:
    - core/drupal.ajax

Add the library wherever needed: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal module

Then when you create your link

<a href="/admin/people/create" class="use-custom-ajax" target="#some-div-id">
    Add user
</a>