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?

  • is the view block already embedded in your view page? or will you be displaying it separately as part of that view page template? or is clicking on the filter redirecting the user to a totally different page? Commented Feb 9, 2017 at 20:25
  • I'd be displaying it separately, as part of the view page template.
    – cbcorbett
    Commented Feb 9, 2017 at 20:29

1 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) {
   // 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.