Problem/Motivation

I have setup a view to show on a node, the view shows an entity with an editable field. This works with render cache disabled, but once I enable the render cache, it works the first time after a cache clear, then the js appears to not work.

Steps to reproduce

  1. Create a vanilla D10 site
  2. Install the 1.0.2 version of the module
  3. Setup a comments block view to use relationships of the content it is on
  4. Add the block to your pages
  5. Ensure you haven't got the render cache set to 'cache.backend.null'
  6. Flush the cache
  7. Test the fields (refreshing after first success)

Proposed resolution

Investigation then resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#4 editablefields-ajax-cache-fix-3547146.patch4.68 KBretrodans

Comments

retrodans created an issue. See original summary.

retrodans’s picture

retrodans commented

It appears to be something to do with the js line 208 in EditableFieldsForm.php

$js = 'document.querySelector("#' . $wrapper . ' [type=submit]").dispatchEvent(new Event("mousedown"));';

If I run the js in console (after the refresh) the command returns true, but doesn't actually update the form. If I change the code to use jQuery, the form gets submitted ONLY after the refresh, and the whole page refreshes (no nice ajax).

retrodans’s picture

retrodans commented

It also looks like on the submit button, 'data-once="drupal-ajax"' disappears in the render cache refresh. I am not sure why, but it feels like it might be related.

retrodans’s picture

retrodans commented
Status: Active » Needs review
StatusFileSize
new editablefields-ajax-cache-fix-3547146.patch4.68 KB

This caused a lot of headscratching, but I think we have a patch which appears to work.

🔧 What the Patch Does

The patch adds these files to the editablefields module:

  1. editablefields.libraries.yml - Library definition
  2. js/editablefields.js - JavaScript that ensures AJAX behaviors are attached
  3. Modified EditableFieldsFieldFormatter.php - Attaches the library to forms

🎯 How It Works

The JavaScript:

  • Detects editablefields submit buttons
  • Checks if AJAX settings exist in drupalSettings.ajax
  • Manually attaches AJAX behaviors if missing or not attached
  • Reconstructs settings from DOM if completely missing (cached scenario)
  • Uses once() to prevent duplicate attachments