Uncaught ReferenceError: almFilterComplete is not defined

Resolved

(@srikat)

I am trying to filter entries of a project CPT by its project_type taxonomy terms.

Got the entries appearing via the shortcode:


[ajax_load_more post_type="project" taxonomy="project_type" taxonomy_terms="art, buildings, commercial, illustrations, residential" scroll="false" transition="fade" posts_per_page="6" button_label="Load More"]

For the filters list, here’s the HTML:


<ul class="alm-filter-nav">
    <li><a href="#" data-post-type="project" data-taxonomy="project_type" data-taxonomy-terms="art, buildings, commercial, illustrations, residential">All</a></li>
    <li><a href="#" data-post-type="project" data-taxonomy="project_type" data-taxonomy-terms="art">Art</a></li>
    <li><a href="#" data-post-type="project" data-taxonomy="project_type" data-taxonomy-terms="buildings">Buildings</a></li>
    <li><a href="#" data-post-type="project" data-taxonomy="project_type" data-taxonomy-terms="commercial">Commercial</a></li>
    <li><a href="#" data-post-type="project" data-taxonomy="project_type" data-taxonomy-terms="illustrations">Illustrations</a></li>
    <li><a href="#" data-post-type="project" data-taxonomy="project_type" data-taxonomy-terms="residential">Residential</a></li>
</ul>

Enqueued alm.js with jQuery as a dependency.

Full code in alm.js: https://pastebin.com/raw/ipJW8b2p.

Note that I changed


[].forEach.call(buttons, function (button) {


[].forEach.call(filter_buttons, function (button) {

as I believe that’s how it should be plus was getting an error otherwise.

Anyway, back to the main issue: Browser console shows this error: https://d.pr/i/EpuK82.

Clicking on the filter buttons isn’t doing anything other than adding # to the page URL in the address bar.

Please advise.

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author Darren Cooney
(@dcooney)

4 years, 11 months ago

Hi @srikat
Can you show me a link to this?

The exact code found in the code example is in use on two dev sites and working.
https://connekthq.com/plugins/ajax-load-more/docs/public-functions/#filter

This line:
var filter_buttons = document.querySelectorAll('alm-filter-nav li a');

should be:
var filter_buttons = document.querySelectorAll('.alm-filter-nav li a');

It looks like you forgot the . of the class definition.
Thread Starter Sridhar Katakam
(@srikat)

4 years, 11 months ago
Hey @dcooney

URL: https://almfiltering.demo.site/projects/

Since jQuery is no longer needed, I am loading it like this:
```
wp_enqueue_script( 'alm-filtering', get_stylesheet_directory_uri() . '/js/alm.js', array(), CHILD_THEME_VERSION, true );
```
I added the missing dot in the selector.

Problem persists.
Plugin Author Darren Cooney
(@dcooney)

4 years, 11 months ago
@srikat Im not sure why that initial almFilterComplete error is happening, but your filters are not working because the following:
```
var activeEl = document.querySelector('.alm-filter-nav li.active');
if (active) {
   activeEl.classList.remove('active');
}
```
should be:
```
var activeEl = document.querySelector('.alm-filter-nav li.active');
if (activeEl) {
   activeEl.classList.remove('active');
}
```
- This reply was modified 4 years, 11 months ago by Darren Cooney.
Thread Starter Sridhar Katakam
(@srikat)

4 years, 11 months ago
That fixed it! Filtering now works.

Console error has disappeared by changing
```
almFilterComplete = function () {
```
to
```
var almFilterComplete = function () {
```
Is there a way to get rid of # from being added at the end of URL when a filter link is clicked?

Tried changing
```
function filterClick() {
```
to
```
function filterClick(event) {
event.stopPropagation();
```
with no luck.
Thread Starter Sridhar Katakam
(@srikat)

4 years, 11 months ago

Silly me.

e.preventDefault(); is what I should be using.

Thanks for all your help again, Darren.

Plugin Author Darren Cooney
(@dcooney)

4 years, 11 months ago

Thanks for following up!

I updated the callback docs to prepend window. to all functions… I think that may have been the issue.
https://connekthq.com/plugins/ajax-load-more/docs/callback-functions/

Thread Starter Sridhar Katakam
(@srikat)

4 years, 11 months ago

Cool.

You may want to update the JS at https://connekthq.com/plugins/ajax-load-more/examples/filtering/#code.

Plugin Author Darren Cooney
(@dcooney)

4 years, 11 months ago

Ah, yes. thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Uncaught ReferenceError: almFilterComplete is not defined’ is closed to new replies.