Dynamically changing a portion of a Drupal page based on clicking links from a view

Question

Introduction

I'm a bit new to Drupal, so I'm still trying to wrap my head around how all the different ways of implementing dynamic content work. Let me explain my desired end state and explain some methods I have tried. Also, I'm using Drupal 7.

Desired end state

I want a page that pulls a context argument from the URL to display content (level 1) based on the Taxonomy Term ID in the URL. On this page, fields from the selected content node are displayed and a view displays associated sub-content (level 2) in a grid of icons. When one of the sub-content (level 2) icons are clicked, another region of the page updates with fields from the sub-content (level 2) node that match the icon selected. This pane should update with AJAX to prevent page reloads.

Current design

What I have so far is a PAGE that uses contextual filters to pass the Taxonomy Term ID as an argument in the URL to display the correct page content. This works.

To this page, I have added a panel for the content (level 1) I want to display. Additionally, I added a VIEW panel that displays only the sub-content (level 2) icons associated with the content (level 1). This works.

Attempted solutions

I am at a loss for how to display the NODE content for the selected sub-content (level 2) icon. I made a PAGE with the appropriate arguments to display exactly what I want. The intention being that I would add the PAGE as a panel to the existing PAGE and pass the arguments to this PAGE by rewriting the icon linking and setting the target parameter. I have not found a way to embed a page within a page.

My next thought was to create a VIEW that used contextual filters to display only the NODE content for the selected sub-content, but I haven't found a way to pass the contextual filters from a click of the icon to the VIEW.

Conclusion

I'm sure there are many ways to do this, but I am looking for the least invasive way. What I mean by that, is that I'm looking for a method using existing techniques within panels, panelizer, views, etc. if it exists. As a last resort, any custom code modifications would have to be contained within a module for ease of maintenance. I'm not exactly sure what I'm looking for because the terminology for everything in Drupal is still confusing to me, but some pointers in the right direction would be great.

Here's a mockup of what I'm describing: Wireframe mockup of what I'm describing

HasecBinUsr HasecBinUsr · Accepted Answer · 2014-08-06T19:22:57

I found a method of doing this that is working like a charm.

What I did:

I used Panelizer to modify the appearance of a node of content type 1, and added the fields I wanted displayed.
Next, I created a View for the sub-content icons. One of the fields for the sub-content is an Entity Reference to specific nodes of content type 1. I exploited this reference with a Views Relationship and a Views Contextual Filter to limit the output of my view to sub-content related to the specified node ID. I defined this node ID in the panel settings for the view in Panelizer Content by selecting "Content ID" as the context.
I added the "Nid" (Node ID) field to the view, but excluded the output. Next, I applied a rewrite rule to the Icon field and changed the link path to an absolute path of "ajax-viewer/nojs/[nid]".
Next, I created another view for the full display of the sub-content. I applied the same Views Relationship and Views Contextual Filter as the other view, however I didn't specify the context in the Panelizer Content settings, but I did add a CSS ID. I added a Content Pane to the view and set the name of the pane. Also I turned "Use AJAX" to "On".
I created one more view for the icons of sub-sub-content, but used the entity reference to sub-content instead of content. I also didn't define the context in Panelizer Content, but did define a CSS ID. I made the view a Content Pane and defined the name of the pane.

This set up all of the structure to the page, but I still had to make a module to power the AJAX call. I referenced this page for the idea. However, I made a second helper function for my second view. In Sean's example, the views call (which I used) has to be changed to match the view.

return views_embed_view ('machine-name-of-view','name-of-content-pane-in-view', $nid);

Since one function can only return one value, I modified the ajax_link_response() function a bit...

function ajax_link_response($type = 'ajax', $nid = 0) {
  /* These next two lines are different */
  $sub-content-output = _ajax_reader_load_noder_sub_content($nid);
  $sub-sub-content-output = _ajax_reader_load_noder_sub_sub_content($nid);
  if ($type == 'ajax') {
    $commands = array();
    /* These next two lines are different. The # and id= must match the CSS IDs set in Panelizer Content. */
    $commands[] = ajax_command_replace('#sub-content', '<div id="sub-content">' . $sub-content-output . '</div>');
    $commands[] = ajax_command_replace('#sub-sub-content', '<div id="sub-sub-content">' . $sub-sub-content-output . '</div>');
    $page = array(
      '#type' => 'ajax',
      '#commands' => $commands
    );
    ajax_deliver($page);
  }
  else {
    /* These next three lines are different. Same as above with the CSS IDs. */
    $sub-content-output = '<div id="sub-content">' . $sub-content-output . '</div>';
    $sub-sub-content-output = '<div id="sub-sub-content">' . $sub-sub-content-output . '</div>';
    $output = $sub-content-output + $sub-sub-content-output;
    return $output;
  }
}

One last thing I did was to not include the _init() function in Sean's example as the view was activating AJAX already since I set it on. Including the _init() function caused AJAX on my forms to break.

This set-up works like a charm. One last thing I did was to specify a default Node ID in the Views Contextual Filter for the sub-content and sub-sub-content so that initial content is displayed.

Dynamically changing a portion of a Drupal page based on clicking links from a view

1 Answers