2

I have a View of taxonomy terms (categories of books). This View lists all of the categories available to the user. Now I would like that, when the user clicks on the Category, a div will appear with a few books (another View, with contextual filter). By clicking on a link, I can go to the full View or to the details of the book, but if I do not click on any link, and go to another section and click on the title, I would like the earlier section to close the div, and another div with new books will appear in this new section.

The schema would be something like this:

  • Category 1
  • Category 2
  • Category 3

When clicking on Category 1, with AJAX there will appear:

  • Category 1 ---> the next part appears retrieved with AJAX
    • Book 1
    • Book 2
    • Book 3 See more books on Category 1 <--- END of content thrown by AJAX call.
  • Category 2
  • Category 3

I have been able to make it work without AJAX, using both modules Views Field View and Views Accordion.

However, I cannot find out how to make it work with AJAX, so no tab content is loaded it will be loaded in AJAX when clicking and opening one tab category, so the browser memory/speed/server requeriment is not impacted if I just want to see books in one category.

enter image description here

10
  • why you need make it work with ajax? Are you dynamically updating any content in that section?
    – Cool
    Commented Aug 23, 2016 at 10:40
  • It is part of a more advanced feature. I would like to scroll down and make a "infinite scroll page" effect, loading more books. Obviously, I need to do it via AJAX (not from the beginning, but it could be), or I could crash the server loading hundreds of books at once. I will allow for a limit of AJAX calls, but seriously I need the possibility to achieve the effect.
    – Cesar
    Commented Aug 23, 2016 at 10:43
  • did u check Views Dynamic Fields?
    – Cool
    Commented Aug 23, 2016 at 10:44
  • in Book view can't we use infinite scroll?
    – Cool
    Commented Aug 23, 2016 at 10:48
  • 1
    @Cesar bounty is not important for me, I just want help another person use drupal , I love drupal and try to help the others use drupal. i think your case is every custom and there is not way to completely achieve it with modules.
    – Yuseferi
    Commented Aug 25, 2016 at 11:16

2 Answers 2

1
+50

You can try using Module 'Views Ajax Get'

https://www.drupal.org/project/views_ajax_get

Or you can also implement it on your own using below sample code, as Views itself provides callback /views/ajax for getting any view through Ajax -

PHP:

$view = views_get_view('taxonomy_term');
$view->set_display('page');
$view->set_use_ajax(TRUE);
$view->set_arguments(array($tid));
$settings = array(
  'views' => array(
    'ajax_path' => url('views/ajax'),
    'ajaxViews' => array(
      array(
        'view_name' => $view->name,
        'view_display_id' => $view->current_display,
        'view_args' => check_plain(implode('/', $view->args)),
        'view_path' => check_plain($_GET['q']),
        'view_base_path' => $view->get_path(),
        'view_dom_id' => 1,
        'pager_element' => $view->pager['element'],
      ),
    ),
  ),
);
drupal_add_js($settings, 'setting');
views_add_js('ajax_view');

JavaScript:

$.ajax({
  url: Drupal.settings.views.ajax_path,
  type: 'GET',
  data: data,
  success: function(response) {
    var viewDiv = '.view-dom-id-' + data.view_dom_id;
    $('#content > div.limiter').html(response.display);
    // Call all callbacks.
    if (response.__callbacks) {
      $.each(response.__callbacks, function(i, callback) {
        eval(callback)(viewDiv, response);
      });
    }
  },
  error: function(xhr) {
    $('#content > div.limiter').html('<p id="artist-load-error">Error text.</p>');
    $('#block-request-0').hide();
  },
  dataType: 'json'
});

Reference: https://stackoverflow.com/questions/4932523/embed-a-view-using-ajax

2

Views Megarow sounds like it would be ideal for this situation as it opens up a new "accordion" page in the middle of your view like you desire.

You would need to build a new view page / panel page for the parent terms which list the books. This can be done in many ways but I guess a view for /categories/%tid would be the easiest.

The benefit is that you can really do a lot of stuff inside that page.. Blocks / Comments / Multiple Views etc. along with just listing books. If you already have pages for each category, it would be a case of creating a version suitable for loading inside the megarow.

It doesn't close the last category but I guess you could get past that with some basic jQuery.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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