5

I have a view of 6 news items on my front page. These get rendered in teaser mode. I enabled a pager of 6 items, and also enabled AJAX as you can see in the settings below. AJAX is enabled in the Drupal modules, I am not blocking Javascript and the ajax.js file is loaded fine when I inspect my site. I have checked the console for errors, but no errors were shown. I tried to disable semantic views, but to no avail.

The view export can be found here, and the site can be found here. This is just a test environment: some other pages may not work.

A bigger image can be found here enter image description here

Improve this question
4
  • From quickly replicating your view as displayed, it functions as expected. You may need to provide more information in order to get a useful response - either a URL where the view is accessible (JS can be debugged in the browser), or an export of the view ("Export View" from the "Edit View Name/Description" menu in top right when editing view).
    – Chris Burgess
    Commented Aug 6, 2013 at 5:35
  • Thank you for comment - I added more information (export and site) to the description.
    – Tom Naessens
    Commented Aug 6, 2013 at 9:12
  • Are you positive "Use AJAX" is still enabled for that view? It is acting like that option has been unset (or it's falling back to default mode).
    – Chris Burgess
    Commented Aug 6, 2013 at 21:41
  • Yes, I am absolutely sure. I even checked the database: "use_ajax";b:1;
    – Tom Naessens
    Commented Aug 7, 2013 at 6:56

3 Answers 3

Reset to default
18
+50

I can't (yet) answer your question, but I can see where I think it's going wrong.

The Views JS is loading for your site, but the Views classes aren't being applied the same on your site and the test I'm using. I expect if you swap to another theme, you'll see the View start working. (That doesn't mean you need to abandon your theme, but it may help you track the problem down.)

In your JS console, you can inspect variables - and the relevant variable for you looks like Drupal.views.instances.GENERATEDNAMEHERE.element_settings.selector.

On a working test site, I see this (zoom in to see the JS). Note that the value in selector can then be used to obtain the wrapper div for the view HTML.

(To test: Copy the value from selector, and use it as a jQuery() selector. You can do this in your JS console.)

JS console on working site

On your site, I see a value set in the same (similar, due to the generated ID) location, but that same value doesn't match an element in your HTML - jQuery returns an empty array, instead of an array populated with (one) matching HTML element.

JS console on non-working site

So ... you need to work out what about your theme is preventing that DIV being applied. If your theme is from Drupal Contrib, you might check the issue queue. If you're using a module which strips extraneous DIV elements, that might be a place to look. And so forth.

Hope this helps ... it's not really an answer, but I hope it moves you closer to one!

Improve this answer
4
  • In the JS console, don't be confused by the fact that there are values set in both Drupal.Views and Drupal.views - you want the latter!
    – Chris Burgess
    Commented Aug 7, 2013 at 8:52
  • 6
    Thank you very much, this solved my question: The exact problem was as follows: I tried to make the site as lightweight as possible by stripping all "unnecessary" divs. I deleted for example <div class="<?php print $classes; ?>"> in views-view.tpl.php. However, this div contained the views-dom-class that was necessary for the AJAX to work. I put it back and all works now. Accepted & bounty awarded.
    – Tom Naessens
    Commented Aug 8, 2013 at 8:55
  • 1
    Yay! Good luck with kick off :)
    – Chris Burgess
    Commented Aug 9, 2013 at 10:27
  • Worked for me in Drupal 8. I did stripped out few classes which are unwanted from views.view.twig.
    – Akshay Sawant
    Commented Jan 16, 2019 at 13:08
1

Remove JS aggregation from admin/config/development/performance - This will resolve the issue for the meantime...

Improve this answer
0

It's because of your templates files. Due to the default classes. Please check with views related files (views-view tpl files) or pager related twig files (pager.html.twig)

For Example: inline js-pager__items

 <ul class="pagination inline js-pager__items">
           {# Print previous item if we are not on the first page. #}
           {% if items.previous %}
             <li class="previous">
Improve this answer

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.