title: Drupal 8, AJAX to update one block from another
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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: <a href="https://www.thirdandgrove.com/rendering-view-ajax-drupal-8" rel="noreferrer">https://www.thirdandgrove.com/rendering-view-ajax-drupal-8</a></p>
  
  <pre><code>(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);
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Have I misunderstood how Drupal.ajax works? Any help would be most appreciated.</p>
  
  <p>-- Henry</p>
  
  <p>SOLVED:</p>
  
  <p>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: <a href="https://api.drupal.org/api/drupal/core%21core.api.php/group/ajax/8.2.x#sub_form" rel="noreferrer">https://api.drupal.org/api/drupal/core%21core.api.php/group/ajax/8.2.x#sub_form</a>. I needed to update the div in my target block with an id="ccd-update" to match the wrapper.</p>
  
  <pre><code>var ajax_settings = {
    submit: view_info,
    url: '/center/'+nid,
    element: list,
    wrapper: 'ccd-update',
    method: 'html',
    event: 'click',
  } ;
  </code></pre>
  
  <p>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.</p>
  
  <p>I'm not sure what, if any, of the view_info array is needed. That's left as an exercise for the reader.</p>
  
  <p>-- HHH</p>