-1

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: enter image description here

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.

Live Example

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

Any help is much appreciated...

Thank you !

  • "without reloading the page"... do you mean with Ajax? – longboardnode Jun 11 '18 at 3:55
  • Views Attachment Displays have the options to inherit contextual and exposed filters from the Views Display they are attached to. But it sounds like your situation doesn't require 2 Views. What you labeled as "View A" is actually just an Exposed Filter for field Title that you want to style in a particular way. You can adjust Exposed Filter settings to Autosubmit so the results change each time you change the Exposed filter. – prkos Jun 11 '18 at 21:33
  • @longboardnode yes i mean with ajax – Charbel El Azzi Jun 13 '18 at 21:50
  • 1
    @prkos you are right about the view A, but my problem is i want to add other field to view A and not only the Title field and exposed filters doesn't allow to do that. For example i would like the view A to have a title field, a background images field and so a tag field and the view B will be filtered by clicking on the link of the title field inside view A – Charbel El Azzi Jun 13 '18 at 21:54
  • 1
    @prkos to be honest this is my first time i hear about the jump menu, however i was taking a look on the module page and i did not really understand how such module could help my case ?! Could you please be kind and give more info ? If you see it to fit my needs – Charbel El Azzi Jun 15 '18 at 0:53
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:

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.

  • i read about such method somewhere around the web but i never thought about the better exposed filter module to chanhe the style from drop down list into links and then style them ! Anw, i will for sure try your answer later today and will let you know the results. Thank you for your kind help – Charbel El Azzi Jun 16 '18 at 9:47
  • 1
    Thank you so much for your kind help on the above subject, now everything is working as i imagine it. However, for later reference, i suggest you to remove "step 1 & 2" from the "Filtering one view with another View" section as they are useless. Also, please add to your answer one more step: change the "use ajax" option under advanced tab to "Yes" so the "page view" will be updated without page refreshing. Thank you again for your support – Charbel El Azzi Jun 16 '18 at 23:29
  • 1
    Better exposed filters changes how the options inside filters are displayed (radio buttons or links), and it make it work without a Submit button, as soon as you click on an option. The Ajax part that doesn't reload the page actually comes from the Views Reference Filter. You don't have to "Use AJAX" on your Page view for this to work (you can enable it if you need it for other parts of your Views). Your question was very specific referring to content types, so I included steps 1 and 2 even though you probably already have them. – prkos Jun 17 '18 at 22:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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