I am getting " Uncaught TypeError: Cannot read property 'top' of undefined in ajax_views.js line no 200"

Steps to reproduce -

Create a content view block Add exposed form filter Make views filter ajaxfiy Save and enable the views on any page Do search and see on browser console.

Tracked the issue is coming from ajax_views.js file

if (offset.top - 10 < $(scrollTarget).scrollTop()) {
      $(scrollTarget).animate({scrollTop: (offset.top - 10)}, 500);
    }

offset.top is causing this issue.

Comments

• Log in or register to post comments

Component: ajax system » views.module

• Log in or register to post comments

• Log in or register to post comments

I'm experiencing this exact problem in a view that uses both a pager and an exposed filter (specifically, a fulltext search box). The pager works perfectly, but the exposed filter gets hung up on this error.

I've found that the exposed filter works correctly once, immediately after a cache refresh. But when the page gets refreshed, the error comes back and doesn't go away.

Through liberal use of log messages, I've found that after a cache refresh, a single dom_id is generated and works correctly. When the page gets refreshed, a new dom_id is generated, but that original dom_id still persists somewhere. The view is still using the old dom_id in its selector instead of the new one, so the selector doesn't actually point to anything on the page, resulting in "offset" being unset.

Applying the patch in this issue seems to completely resolve our bug, at least on the surface:

2771361: Ajax views leave obsolete Drupal.Ajax instances

It prevents the old dom_id from being used, so it resolves our error. However, discussion in that issue indicates that this patch may be papering over the deeper issue that old AJAX instances (and thus, dom_ids) aren't being removed correctly. It looks like there's still more investigation/work that needs to be done.

• Log in or register to post comments

Which patch are you referring to? Did you read this related issue?

• Log in or register to post comments

I'm referring to the patch in this other issue:

2771361: Ajax views leave obsolete Drupal.Ajax instances

(There are technically two patches; they both contain the lines that work, so either one is fine.)

I did read the related issue you're referring to, but couldn't figure out how to reproduce the patches in the D8 version of views. I tried to copy the work over from the patches there, but my attempts didn't have any effect.

• Log in or register to post comments

• Log in or register to post comments

DO NOT remove attributes from the "views" in the twig file (for themers), because Drupal and some third parties modules uses it to populates some datas...

I was getting this error "Uncaught TypeError: Cannot read property 'top' of undefined in ajax_views.js" because of what i mentionned above.

• Log in or register to post comments

Status: Closed (duplicate) » Closed (works as designed)

Had the same issue in a custom theme. Exposed filter works in the preview of the view, works in a standard theme, but switching to a custom theme broke my exposed filter, giving the same error in my console. Now

9 fixed my problem!

DO NOT remove attributes from the "views" in the twig file

Be sure to add the extra classes in the twig file where your exposed filter shows. As the duplicate post Ajax views leave obsolete Drupal.Ajax instances doesn't show a hard solution: following you will find the solution that fixed my error. Start the twig file with the set classes as you will find in core/themes/stable/templates/views/views-view.html.twig

{%
  set classes = [
    dom_id ? 'js-view-dom-id-' ~ dom_id,
    'any-other-custom-class-you-want',
  ]
%}

and below that your can print it out in your first div:

{% if exposed %}
  <div {{ attributes.addClass(classes) }}>
    {{ exposed }}
  </div>
{% endif %}

Clear your cache, and go back to the page with your exposed filter. Should be working now ;-)

Cheers!

• Log in or register to post comments

Version: 8.1.7 » 10.0.x-dev

10 worked for me. I had altered the view layout and hence did not have the expected classes in the view wrapper. The wrapping div for the view must have the classes generated by js-view-dom-id-' ~ dom_id

• Log in or register to post comments

Hi,

I have exposed filter and ajax enable.

I am getting exact same issue atm and have applied patch above but no success.

Way to produce.

create view with exposed filter and ajax enabled.

When doing a first click ajax does work and content gets filtered as requested but second click wont filter and issue error same as above.

further debuging shows that dom_id attach to html element is different to ajax request so not able find the element to replace it.

How do you fix undefined properties Cannot be read?

Another way to catch "Cannot read properties of undefined" errors is by using static type checkers like TypeScript. TypeScript provides type annotations for your JavaScript code, allowing you to define the shape of your data and catch type-related errors at compile time.

How do I fix uncaught TypeError in JavaScript?

To resolve this issue, ensure that the properties you're trying to access are properly initialized. You can use the optional chaining operator ( ?. ) to avoid the error when trying to access a nested property that might be undefined: console.

How to avoid TypeError in JavaScript?

You can prevent a TypeError from occurring by using a static type checker, like Flow, or by writing your code in TypeScript. Make sure the type annotations you write are accurate and not too broad. You should assume that a TypeError will inevitably sneak through, so use try... catch blocks to catch and handle them.

How to handle Cannot read properties of undefined reading length?

How to Avoid TypeError: Cannot Read Property Length of Undefined. When such an error is encountered, it should be ensured that the variable causing the error is assigned a value. The length property is supported by data types such as arrays and strings. Custom objects can also have this property.