Dynamically display view block based on based on different view filters

Question

I have a view as a page layout. That view allows the user to choose from a list of tags to filter content.

What I'm trying to do is - when someone selects one of the tags to filter content, a separate view block is displayed, based on the tag they select from the filter list.

Is there a way to do this?

Answer 1

We did something similar on our site -- on the left hand side we had a list of lesson plans, and when you clicked one, it used AJAX to dynamically update the lesson pane on the right. Sounds basically like what you want.

Here's the set up:

Make a view with both a block and a page, and configure the block so that the two show up on the same page. (example.com/my-view should show the block on the left side and the page on the right side.)

In the block body, he put the list of lessons alongside the following code in <script> tags:

$('.lesson').on('click', function(e) {
   e.preventDefault();
   // loads lesson into the content part of the page
   var contextualFilter = $(this).text(); // get the lesson title from the selection
   var AJAXPromise = AJAXLesson(contextualFilter); // get lesson from server and load into the content part of the page
   AJAXPromise.done(function() {
      // make promise, waiting for ajax call to return before changing URL and sending analytics page view
      window.history.pushState(contextualFilter, "", "http://example.com/my-view/" + SpaceEncodeString(contextualFilter)); // change URL to requested lesson with dashes instead of spaces
   })
});

Where AJAXLesson() is a function that returns a $.ajax({ ... }); object with the lesson plan data.

function AJAXLesson(lessonName) {
   // loads lesson from server
   return $.ajax({
      url: 'http://example.com/views/ajax',
      type: 'post',
      data: {
         view_name: 'myview',
         view_display_id: 'lessons', // this'll be different for you
         view_args: SpaceEncodeString(lessonName), // removes spaces and replaces with dashes
      },
      dataType: 'json',
      success: function(response) {
         if (response[1] !== undefined) {
            document.title = lessonName; // change page title
            $('#block-system-main').html(response[1].data); // CRITICAL: paste lesson in content
         }
      }
   });
}

Your code will look different, but that's the basic concept anyway.