Drupal 8, AJAX to update one block from another

Question

I have two blocks on a page, side by side. On the right is a custom block with an empty div, class="js-view-dom-id-ccd-update". On the left is a view that lists titles as links from a content type ("centers"). When a user clicks on one of those links, I'd like the details for that record to display in the block on the right.

I created a view ("center") that returns a single center as a page (machine name page_1"). The page can be accessed from the URL /center/## where ## is the node ID of the center. I used a template to get that to display just the center content without the rest of a normal page.

I created a .js file that, in theory, will attach an AJAX action to call that page view and put the results in the block on the right. This is based on a short tutorial I found here: https://www.thirdandgrove.com/rendering-view-ajax-drupal-8

(function ($) {
  Drupal.behaviors.ajaxContentCenter = {
    attach: function (context, settings) {
      $('#content-center-list-block-2 li').once('attach-links').each(this.attachLink) ;
    ),
    attachLink: function (idx, list) {
      // determine the node ID from the link (not ideal but should work for now)
      var link = $(list).find('a');
      var href = $(link).attr('href');
      var matches = /node\/(\d*)/.exec(href);
      var nid = matches[1];

      var view_info = {
        // the view to get one center's record
        view_name: 'center',
        // the display ID for that view
        view_display_id: 'page_1',
        // the nid to pass to the view (but doesn't seem to work)
        view_args: nid, 
        // the block to update has a class of js-view-dom-id-ccd-update
        view_dom_id: 'ccd-update'
      };

      // ajax action details
      var ajax_settings = {
        submit: view_info,
        // I'd have thought supplying the nid above would work but
        // it doesn't, so I've included it here
        url: '/center/'+nid,
        element: list,
        event: 'click'
      };

      Drupal.ajax(ajax_settings) ;
    }
  };
})(jQuery);

When I click on a link, I get the little spinner indicating that ajax is working and in my browser console I can see the ajax result being sent back to the browser. Unfortunately, it never gets put into the div in the block on the right. No error messages that I can see.

I've tried making the view for the block on the right a block instead of a page but then there is no URL that I can call to get to it, as far as I can tell.

Have I misunderstood how Drupal.ajax works? Any help would be most appreciated.

-- Henry

SOLVED:

I figured out what I was missing. The ajax_setting array needs 'wrapper' and 'method' elements (which are listed as optional in the documentation but which are required for what I'm doing, apparently). The document where I found them described is here: https://api.drupal.org/api/drupal/core%21core.api.php/group/ajax/8.2.x#sub_form. I needed to update the div in my target block with an id="ccd-update" to match the wrapper.

var ajax_settings = {
  submit: view_info,
  url: '/center/'+nid,
  element: list,
  wrapper: 'ccd-update',
  method: 'html',
  event: 'click',
} ;

With just the wrapper, the link worked the first time it was clicked but subsequent clicks failed to update the block. With the method set to html, it worked.

I'm not sure what, if any, of the view_info array is needed. That's left as an exercise for the reader.

-- HHH