1

I want to create a view which shows a list on the left side and the content of the item in the center. When a user clicks on an item in the list on the left side, the item must be shown in the center region or column. It should be done without page refresh.

Think of a view showing articles. The left side list will show a small image, title and trimmed description, whereas, the middle column will show the actual item clicked.

How to do that?

Note: I can use panels as well.

  • 1
    Is a page reload a total no go? – schlicki Apr 14 '17 at 18:52
  • @schlicki Yes. Page reload will make it less attractive and interesting for the user – Umair Apr 15 '17 at 10:17
  • I did something similar in the past, but it was not a trivial act. I've asked it already here and got no answer. I solved it after reading this blog post from web archive. – Елин Й. Apr 26 '17 at 13:23
  • The 'easiest' way I can think of would be to use another view/display to populate a custom exposed filter. That way you could use the native Views AJAX processes. You could then style it to look as you prefer. When I get time I can add an answer with a couple options for you. Let me know if you can't find an example and I will do so earlier. – sareed Apr 27 '17 at 13:56
1

Views does have an Ajax option in the advanced setting, although it may or may not be appropriate or have enough features for what is being described above.

See the previous answers https://stackoverflow.com/questions/3016747/drupal-use-ajax-to-update-views-content and How to load and display a view with Ajax in Drupal 7? and Using AJAX to access the content of a view .

Any solution may or may not require customization.

| improve this answer | |
1

Here are some pointers. You might have to write some code though:

Long answer

  • Setup the view (the list of content) as a block and place it in the sidebar.
  • You can display the above block for only the relevant node types in the node/* path. That way, you have nodes displaying in the main content area.
  • Create a MENU_CALLBACK using a custom module (or a view maybe?) which will accept an nid as input and return the rendered node (markup) as output.
  • Now, use Drupal.behaviors to add a click-listener to override clicks on the links in the sidebar block.
    • When the user clicks these links, read the node-id of the link clicked. Tip: You can re-write the views field output to include an attribute with the node ID, like <h2 data-nid="XXX">Node Title</h2> so that you can easily read the node ID using jQuery.
    • Make sure your click callback returns false so that the default click event dies in your callback.
    • Use this node-id and send it to the AJAX callback we prepared above. So, in the AJAX response, you will get the markup for the concerned node.
    • Now, simply place the rendered node markup in the #block-system-main .content (the main page content block)!

Short answer

  • list node previews / teasers in a views block placed in the sidebar.
  • the user clicks a link in the view.
  • node-id is sent to the server to fetch markup for the node and the default click event is killed.
  • markup for the node is displayed in the main content region (:

Hope this helps.

| improve this answer | |
1

Thank you for all the answers. It is amazing that someone once said that In drupal, there is a module for everything.

I found Views Vertical Tabs modules which does exactly what I wanted.

| improve this answer | |
0

No page refresh means you will have to either load all the data and hide it with JS or bring in data using AJAX. I'm personally not aware of anything like that in Views.

If you are ok with using Panels then 'Panels Ajax Tabs' might be what you are looking for though again I cant tell if it can do what you need right out of the box.

| improve this answer | |

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.