Filter a view by clicking on a link on another view

Question

I have been searching all over the internet for a solution to my requirement with no success at all.

I am working on a Drupal 7 website using the latest version of views where i have one content type under the name of Hotel Room which contains the below fields:

• Title (= Room Nbr)

• Room images

• Room description

• Room Size

• Floor Nbr

• Bed Nbr

1) View name: View A

I have created a block view of format fields and displaying only the content:title of the content type Hotel Room

2) View name: View B

I have created another block view of format table and displaying all the fields available for the content type Hotel Room

3) I have placed both views on the homepage, where the View A is placed above View B.

4) What i need to accomplish is:

When i click on any Title inside the View A, View B will show me all the information related to the clicked title. And of course without the page being reloaded .

Here is an image describing what i need:

On the above image:

when i click on Room Nbr 18 inside View A, all the details about that Room Nbr will show up inside the below View (View B) without reloading of the page.

Update: The below image is what exactly i am trying to achieve in my drupal 7 website.

Is that possible to be done using Drupal 7 and views ?

Any help is much appreciated...

Thank you !

Answer 1

There are several considerations in your question, using Ajax, filtering one view with another, displaying Exposed filter as a grid. Since you posted your desired goal I'll address it directly without much discussion about various issues raised.

To achieve this in D7 you need:

• Entity reference,
• Views Reference Filter and
• Better Exposed Filters.

Filtering one View with another View

1. Create Views of type Content showing Hotel room nodes.
2. Add Fields you want to be used in View A, as information for the filter
3. Add Entity reference Display to the Views and configure it to use at least one field (Title for example)
4. Save the View
5. Edit the View again and add Page display, configure the Path, and add the Fields you want in View B
6. Add a new Filter Content: Nid (reference filter), expose it to visitors, and set the View used to select the entities to the Entity reference Views display we created in above steps. (It will be available as a choice if you saved the View after creating it.)

You should now have the Dropdown of your Hotel info from View A, and when you choose one choice from it, it will update the View B to show only that Room info.

Next we make it display in a list.

Style it a little more closer to grid

1. Change Exposed form style: from Basic to Better Exposed Filters and configure it:
   Autosubmit
   Hide submit button
   Under Display "nid_entityreference_filter" (Filter label: "Nid (reference filter)") exposed filter as select Checkboxes/Radio buttons or Links, whichever you like best or you think would be easier to style

Now you have a list of all your node titles, with additional information, and when you click on one, the results at the bottom will automatically update to show only that one room info.

You can use CSS in your theme to style it more like a grid from your screenshot.

If you don't want all the room results before a choice is clicked use the option Require input before results are shown.

---

Jump menu can be used as a method for filtering one view with another, but it won't be styled more easily to match your desired theme (it's a drop-down) so i won't document it here.