How to create a view with a list of items and item clicked?

Question

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.

Answer 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.

Answer 2

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.

Answer 3

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.

Answer 4

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.