How to have loader widget block only some content

Question

The loader widget allows a developer to block page content while an AJAX request is ongoing. The devdocs describes it as:

The Loader widget blocks page content (all content or a part of it).

I'm having trouble figuring out how to block "a part of it."

By using showLoader: true in jQuery AJAX calls, you can have the widget automatically show and hide the loader through the lifetime of the request. Further, the loaderContext property is supposed to give the ability to have the loader appear in a specific area on the site - which seems like a good lead. (You can see an example in the reviews processing JS).

$.ajax({
  url: url,
  showLoader: true,
  loaderContext: $('.elem')
  // snip
)};

This doesn't work at all, in my experience – I just get a warning of Expected to start loader but did not find one in the dom when I use my own element there.

What gives? Do I need to make another instance of the Loader widget for every section I want it to hide?

Answer 1

try this, I have this working on my code and it seems to be the easiest way to have the loader going nicely

   $.ajax({
      url: url,
      beforeSend: function () {
         $('body').trigger('processStart');
      },
      success: function (res) {
         // snip 
         $('body').trigger('processStop');
       }
      )};