Add AJAX support to Paragraphs

Created on 14 March 2019, over 5 years ago
Updated 29 September 2023, 9 months ago

Problem/Motivation

Business Rules makes it possible to configure a dependency between two fields β†’ in a node, i.e.: when the "triggering" field changes, new options can be selected from the "target" because it is updated in an AJAX call.

As a site builder, I might want to set up a dependent field inside of a paragraph, whose widget is embedded in a node. It is currently possible to configure this; but it does not work. More specifically, no JavaScript is listening for the triggering field to change, which is different when the two fields are in the node itself.

Steps to reproduce

  1. Clone drupal, branch 8.9.x - I was at commit 485d2a305f when I tried this.
  2. Install Drupal using the standard install profile.
  3. Download dBug-2.0.0, entity_reference_revisions-8.x-1.9, and paragraphs-8.x-1.12.
  4. Clone business_rules, branch 2.x - I was at commit bec01f4 when I tried this.
  5. Create a vocabulary named vocab1. Add 2 terms, named vocab1term1 and vocab1term2.
  6. Add a term reference field named field_user_term1 to the user entity. Configure it to use the Default Reference method, and accept terms from vocab1. Configure the form display to show this field as a Select list instead of an Autocomplete.
  7. Add a view named view1 that shows Users sorted by Unsorted. Add an Entity Reference display...
    1. Edit Format -> Format -> Entity reference list -> Settings, and check User: Name in Search fields.
    2. Add a contextual filter on field_user_term1. When the filter value is not available, Display contents of "No results found". When the filter value is available or a default is provided, check Specify validation criteria, set Validator to Taxonomy term ID, and check Vocabulary vocab1 (leave the remaining fields at their default).
  8. Create a paragraph type named paratype1...
    1. Add a term reference field named field_paratype1_termfield1 to the paragraph type. Configure it to use the Default Reference method, and accept terms from vocab1. Configure the form display to show this field as a Select list instead of an Autocomplete.
    2. Add a user reference field named field_paratype1_user1 to the paragraph type. Configure it to use the Business Rules: Make field dependent using views. Set View used to select the entities to view1 - Entity Reference and the Parent field to Entity reference: paratype1_termfield1 [field_paratype_termfield1] (leave the remaining fields at their default). Configure the form display to show this field as a Select list instead of an Autocomplete.
  9. Create a content type named nodetype1. Add a paragraph reference field named field_nodetype1_parafield1.
  10. Create four users: user1 and user3 referencing vocab1term1; and user2 and user4 referencing vocab1term2.
  11. Go to /node/add/nodetype1. You see the nodetype1_parafield1 field, with an empty paratype1 in it. You see the triggering paratype1_termfield1 field containing vocab1term1 and vocab1term2, and the target paratype1_user1 field, which is empty.
  12. Select vocab1term1 from paratype1_termfield1.
    • Expected behavior: paratype1_user1 changes to contain user1 and user3
    • Actual behavior: nothing happens
  13. Select vocab1term2 from paratype1_termfield1
    • Expected behavior: paratype1_user1 changes to contain user2 and user4
    • Actual behavior: nothing happens

... note that after applying the patch in #29 ✨ Add AJAX support to Paragraphs Fixed , an AJAX spinner appears after changing the value of paratype1_termfield1, but paratype1_user1 remains empty.

Proposed resolution

Modify src/Plugin/EntityReferenceSelection/BusinessRulesViewsSelection.php and js/update-options-command.js to identify and properly handle subforms.

Remaining tasks

  1. Review and feedback
  2. RTBC and feedback
  3. Commit
  4. Release

User interface changes

None.

API changes

  1. A required boolean $multiple parameter has been added to the signature of \Drupal\business_rules\Ajax\UpdateOptionsCommand::__construct()

Data model changes

None.

Original report by @lucius_nick

Following the guidelines in https://www.drupal.org/docs/8/modules/business-rules/advanced-usage/depe... β†’ I have created a dependent field in a paragraph.

The business rule works if I save the paragraph but changing the parent field does not trigger ajax.

✨ Feature request
Status

Fixed

Version

2.0

Component

Dependent fields

Created by

πŸ‡³πŸ‡±Netherlands lucius_nick

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡·πŸ‡΄Romania calinh

    This current topic is about the parent field inside the same paragraph with the dynamically dependent child field.

    I am very interested to have the parent field outside the paragraph - directly inside a node - and the dynamically dependent child field to be inside the paragraph, together with other normal fields.

    Any idea on how this scenario can be solved? Using what other modules? Thank you.

Production build 0.69.0 2024