Facets with AJAX not working in most of situations

I did a patch for version 2.0.6.
The former one was not working for this version.

Fix a bug in Facets Summary. The facet was not displaying anymore.

I updated the patch to make it work for views embeded as blocks. The pushstate was changing the URL to the views page URL.
I've added support for pushstate navigation. The reload workaround only worked for one history iteration.
I've also included @jmaerckaert's latest update for the facets summary.

Just a note that you may also need https://www.drupal.org/project/drupal/issues/3132456 🐛 Views Ajax issue on deleting instances Needs work to handle some scenarios.

Not sure if this should be handled here or in a separate issue, but I ran against a problem with facets, ajax and a custom filter key.

On your facet source, you can configure a filter key to update "f" used in the get params to something else. But this parameters is hardcoded in facets-ajax-view.js to "f", which results in broken filters.

Thank you for patch #174!

Was previously using #151, but patch stopped applying while upgrading drupal/facets 2.0.5 => 2.0.6.

Switching to #174 fixed it for me.

I was using #174, but with Facets Pretty Paths paging did not work, the Facets filters were lost on page change.

The attached change plus https://www.drupal.org/project/facets_pretty_paths/issues/3129632#commen... 🐛 FPP lost path context on ajax request RTBC solved it.

Hi @DonAtt,

Changing window.location.pathname with url.pathname breaks embedded views. If you have the view and the facets embedded in a page, your code will push in history the url of the view not the url of the current page.
I think you should find a way to manage the parameters needed by Facets Pretty Paths in the url.search variable.

Hi @bogdan.dinu,

Thank you for the feedback, and the great work with this issue!

The trick is that the url.search is the query string (?param=x...) and Facets Pretty Paths is exactly to get rid of the cryptic query parameters and produce nice URLs with the filters in the URL's path part (window.location.pathname).

I guess if this patch (based on #174 then) gets merged, it's worth to look into a Facets Pretty Paths adjustment.
But as in #169 the way forward may rather be the solution based on views exposed filters.
Side-note: as of now 3.0.x with views exposed filters also has problem with paging, the exposed filters block disappear on page change according to my tests.

So, then take my approach in #178 only as a quick-fix for now if you don't have embedded views and need to use Facets Pretty Paths.

Hello,

I've a problem with this patch https://www.drupal.org/files/issues/2023-05-14/facets-with-ajax-not-work... → at this condition:

if (typeof settings.facets !== "undefined" && settings.facets.sliders && settings.facets.sliders[facetId])

when it patches this file js/facets-views-ajax.js

When I debug "settings.facets", I've always "undefined" propertiy

reroll of #174 to be compliant with PHP8.2 (and D10)

reroll of #182 add the missing facets_preprocess_block hook from #174

Adapted #174 to D10.1

Patch from #184 works well, except range slider, that throws the following javascript error:

TypeError: unencoded is undefined

I've changed the slider event from "change" to "stop" and it works as expected.

Patch on #185 is working fine unless the site is installed in a subdirectory. I'm adding a new patch covering that use case.

Under some circumstances the facet_link value is an absolute URL so the ajax request fails with a 500 error. Here is a patch fixing it.

None of the patches can be applied to version 2.0.6 by me. Is there a patch that can be applied?

The checkboxes become unresponsive after the first time selection.

Someone please correct me if I'm wrong, but AFAIR that was one of the pre-existing problems with the original code. Maybe triple-check that you actually have the patch applied in the code you're running / caches rebuilt / etc...? I would presume that the work here to date does address that issue.

Patch in #183 works for us to AJAXify everything for a facet regardless of where it's placed.

Patches #184 and onward will work with AJAX for list of links or checkboxes, but doesn't work for range sliders specifically, it triggers a page refresh.

Tried patch #187 some more ,but the situation is different from what I first reported.

I have 2 facets filters in my facets block with checkboxes.
When I click one of the filters the checkboxes appear and I can check a checkbox. The filter works, but the checkboxes remain visible.
I cannot hide them any longer and I cannot open the checkboxes of the other filter.
Checking and unchecking the checkboxes of the first filter does result in the correct display of the items in the view, but I cannot close the first filter nor open the second filter anymore.

Maybe this is a different issue?

When I applied the "configure filters" option for the view, the Ajax facets did not work well so it removed what I selected for the exposed filter in the backend. Has anyone faced this before?

Thanks to the changes in Drupal 10.1 and the fact that 10.0 will reach EOL in December, there's a lot of progress for AJAX in facets 3.0.x now, based on Drupal 10.1 AJAX in Views.

To be honest, I don't think that anyone of the maintainers will find time to to really fix the AJAX implementation in facets 1.x and 2.x.

I expect that we will release a new facets 3.0.0 beta soon. So I invite everyone to test and improve the new implementation.

Is there an upgrade path between 2.x and 3.x, or should we expect that to be a manual process?

I don't expect that there will be a fully automated update process that will work for all setups.

We keep the support of the classic blocks setup without AJAX. If you use this, the upgrade path already works. And maybe this will be the only upgrade path, which means manual work after the upgrade if you use AJAX.

AJAX will be View's AJAX. Using exposed filters which could be displayed in different ways, also as blocks.

I'm starting a new project in D10.1 where I would really like to have facets with AJAX (Facet 3-dev BEF 6).
I followed the steps roughly indicated here https://www.drupal.org/project/facets/issues/3353991 🐛 How to make AJAX work with facets 3? (issue with isRenderedInCurrentRequest) Active but I'm now getting an error:
Error: Object of class Drupal\facets\Entity\Facet could not be converted to string in Drupal\views\Plugin\views\filter\FilterPluginBase->prepareFilterSelectOptions() (line 1344 of core/modules/views/src/Plugin/views/filter/FilterPluginBase.php).
Are those steps corrects? I couldn't find any other guide.
I just would like to know at the current state if it's better to use v2 or v3, considering that AJAX would be great.

I'm getting the same error as #196

I was just experiencing the same as #196 but fortunately found the fix for that 🎉

It seems like you need to change your Facet's widget type to Views exposed filters so it can work properly.

I was just experiencing the same as #196 but it seems like you need to change your Facet's widget type to Views exposed filters so it doesn't break.

The next step to adjust your facet source configuration as well so it can read the new URL parameters:

What I have noticed is that there are just simple select lists and no more checkboxes :/

This issue seems to be conflating both 2.x and 3.x problems and solutions. For the most part the patches are 2.x, but there are so many of them and there are so many changes that it's near impossible to gather all of the contributions and changes. I know I've missed some so if there is an important change you have previously included in a patch, time to add it to the fork branch.

Both of the existing fork branches are stuck and unable to be rebased onto the existing 2.0.x branch so I've gathered as many of the changes as I could find which are working into a new branch. There are new tests since this issue was opened and they have changed things significantly so I have not worked on getting tests passed other than one or two changes found in patches.

This MR is in a working state for checkboxes in a block at least. I don't have the other types setup. The roadmap of 3.x branch of having blocks without ajax is a loss of an important feature which I can't work with at present, hence needing to get the 2.0.x branch working with the same. Until 3.x has blocks+ajax, it's a step backwards in features and not compatible with existing usage.

The many patches are extraordinarily difficult to work with - let's keep to the MR going forward. I'm sorry I couldn't salvage the other two but they had been merged with 2.x instead of fixed+rebased onto it which tangles them no end. Comparing !26 mergeable and !113 Draft to the latest patches and now this fork, the old MR should be closed off as they are well behind the current state.

Notable change is the adding of the session to the ajax response as I was getting "Session has not been set." for both anon+auth users as I have cookies for all users in use.

Failed to load resource: the server responded with a status of 400 (Bad Request): /facets-block-ajax?_wrapper_format=drupal_ajax:1
Uncaught Drupal.AjaxError: ajax.js?v=10.1.6:1194
StatusText: Bad Request
ResponseText: {"message":"Session has not been set."}

NB: Due to pick from #178, the fancy paths do not work on embedded views.

So this 2.0.x-3052574-ajax branch MR is:

• Patch from #187
• Added session to request as detailed above
• url.pathname change from #178
• baseUrl change from MR!113
• Pick test fixes from MR!113
• Fix indenting. Minor CS in edited files only.

Combined patches from Merge request !162 and Issue: Facets with ajax enabled and no source path results in /views/ajax 🐛 Facets with ajax enabled and no source path results in /views/ajax?f... urls RTBC

Patch doesn't work!!
When i check the first checkbox, all works fine.
When i check the second one i get this error:

Uncaught TypeError: Drupal.views.instances[("views_dom_id:" + current_dom_id)] is undefined
    updateFacetsView https://localhost/modules/contrib/facets/js/facets-views-ajax.js?s90eqh:141
    attach https://localhost/modules/contrib/facets/js/facets-views-ajax.js?s90eqh:115
    jQuery 7
        dispatch
        handle
        trigger
        trigger
        each
        each
        trigger
    makeCheckbox https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:82
    jQuery 8
    makeCheckbox https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:76
    jQuery 2
    makeCheckboxes https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:47
    jQuery 2
    makeCheckboxes https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:38
    attach https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:13
    attachBehaviors https://localhost/core/misc/drupal.js?v=10.2.3:166
    attachBehaviors https://localhost/core/misc/drupal.js?v=10.2.3:162
    insert https://localhost/core/misc/ajax.js?v=10.2.3:1387
    jQuery 2
    insert https://localhost/core/misc/ajax.js?v=10.2.3:1385
    commandExecutionQueue https://localhost/core/misc/ajax.js?v=10.2.3:1046
    promise callback*Drupal.Ajax.prototype.commandExecutionQueue/< https://localhost/core/misc/ajax.js?v=10.2.3:1039
    commandExecutionQueue https://localhost/core/misc/ajax.js?v=10.2.3:1036
    success https://localhost/core/misc/ajax.js?v=10.2.3:1095
    success https://localhost/modules/contrib/ajaxin/js/ajaxin.ajax.min.js?v=10.2.3:1
    success https://localhost/modules/contrib/blazy/js/base/io/bio.ajax.min.js?s90eqh:1
    success https://localhost/core/misc/ajax.js?v=10.2.3:584
    jQuery 6
    execute https://localhost/core/misc/ajax.js?v=10.2.3:707
    updateFacetsBlocks https://localhost/modules/contrib/facets/js/facets-views-ajax.js?s90eqh:230
    updateFacetsView https://localhost/modules/contrib/facets/js/facets-views-ajax.js?s90eqh:191
    attach https://localhost/modules/contrib/facets/js/facets-views-ajax.js?s90eqh:115
    jQuery 7
    makeCheckbox https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:82
    jQuery 8
    makeCheckbox https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:76
    jQuery 2
    makeCheckboxes https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:47
    jQuery 2
    makeCheckboxes https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:38
    attach https://localhost/modules/contrib/facets/js/checkbox-widget.js?v=10.2.3:13
    attachBehaviors https://localhost/core/misc/drupal.js?v=10.2.3:166
    attachBehaviors https://localhost/core/misc/drupal.js?v=10.2.3:162
    <anonymous> https://localhost/core/misc/drupal.init.js?v=10.2.3:32
    listener https://localhost/core/misc/drupal.init.js?v=10.2.3:20
    domReady https://localhost/core/misc/drupal.init.js?v=10.2.3:26
    <anonymous> https://localhost/core/misc/drupal.init.js?v=10.2.3:31
    <anonymous> https://localhost/core/misc/drupal.init.js?v=10.2.3:34
facets-views-ajax.js:141:50

the html is the same after first checkbox

<div class="view view-oto-commerce-catalog view-id-oto_commerce_catalog view-display-id-page_1 js-view-dom-id-3c1385dbbc4d626dc71152fff8473426ea72ab075f92cc908184afd3df177c09" data-once="ajax-pager">
      <div class="view-content row">

the current_dom_id variable at line 126 of facets-views-ajax.js file is 3c1385dbbc4d626dc71152fff8473426ea72ab075f92cc908184afd3df177c09 both time.

Drupal.views.instances has not this instance of the views.
Thank you

After remove module and re-apply patch i don't have no more this error but facet option is disabled after selection.
Why?
I can only select the option.
thank you

I can confirm, that now MR !162 solves it for me, szenario:

* Page manager page instead of views-page
* Layout builder layout / variant
* Facets and facet-summary rendered

Both - the facets and the summary - are updating correctly for me.

So we can hide the other MRs and only keep the MR162 as relevant and working though it's currently marked as draft?

MR162 is working fine with me, I created a patch from it.
Thank you!

#210 🐛 Facets with AJAX not working in most of situations RTBC resolved my issue. Thank you.

#210 fine, but i have a one more probleme.

If i have query parametter from exposed filter who start by 'f' letter like 'field_type', Facets range brake url.

exemple ?field_type=587 become ?f[0]=587&f[1]=range:(min:117,max:1000) and brake search...

Replace this code : if (paramName.substr(0, 1) === 'f') { by if (paramName.substr(0, 2) === 'f[') {

I have page with two different views blocks - one is the index view as a source for the facets, another one is just simple content views. And I have weird error which not always happened:

Cannot read properties of undefined (reading 'settings')

This is after selecting any second option from the facets.

At this moment (before selecting the 2nd option) drupalSettings.views.ajaxViews is empty, but drupalSettings.facets_views_ajax is not empty. Maybe there is some time delay in which the drupalSettings.views.ajaxViews is empty. not sure. Can't find source of the bug. Any ideas?

Notable change is the adding of the session to the ajax response as I was getting "Session has not been set." for both anon+auth users as I have cookies for all users in use.

Failed to load resource: the server responded with a status of 400 (Bad Request): /facets-block-ajax?_wrapper_format=drupal_ajax:1
Uncaught Drupal.AjaxError: ajax.js?v=10.1.6:1194
StatusText: Bad Request
ResponseText: {"message":"Session has not been set."}

Adding it to the request not the response but this is a good find. I ran into this testing 10.3 and my ajax facet blocks where suddenly broken. The block in FacetBlockAjaxController that does this solved the problem for us.

Noticed AjaxBehaviorTest phpunit tests are failing while working on the D11 compatibility issue against 2.0.x branch.
I believe tests should also be consider here to update them or provide new once. Also please rebase the MR so that gitlab pipeline would show the actual result.

Rebase done.

Thanks @vensires apart from these failures https://git.drupalcode.org/issue/facets-3052574/-/jobs/1903753#L873
I've covered all fixes in the Drupal 11 compatibility issue.

Requires to update the tests especially for AjaxBehaviourTest.php file ~~ hence moving into needs work.