Contrib.social

AJAX Error when toggling the flag link in an added language version of Drupal

Open on Drupal.org →
Created on 11 December 2023, 7 months ago
Updated 22 December 2023, 6 months ago

Problem/Motivation

On a multilingual Drupal 10.1.6 with latest `flag_lists` module, the "Remove this item from the [My Flagging Collection Test list]" link is throwing an AJAX error when clicked to either flag or unflag when the site language is not the default language. The following error is thrown in the browser console and the flagging/unflagging (add/remove) fails. No such issue with other flag types.

I tested this on my dev site with more than a new language and then tested on simplytest.me and I could reproduce it. 

Uncaught 
Object { message: '\nAn AJAX HTTP error occurred.\nHTTP Result Code: 403\nDebugging information follows.\nPath: /fr/flag/unflag/relflag_1_1/1/1?destination=/fr/node/1&token=e_yxc6itScwa7Ac7J-fPdvJsfS1limNj1vfZmebIjHg\nStatusText: error\nResponseText: {"message":"\\u0027csrf_token\\u0027 URL query argument is invalid."}', name: "AjaxError", stack: "@https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:60:2411\n@https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:60:19298\n" }
​
message: '\nAn AJAX HTTP error occurred.\nHTTP Result Code: 403\nDebugging information follows.\nPath: /fr/flag/unflag/relflag_1_1/1/1?destination=/fr/node/1&token=e_yxc6itScwa7Ac7J-fPdvJsfS1limNj1vfZmebIjHg\nStatusText: error\nResponseText: {"message":"\\u0027csrf_token\\u0027 URL query argument is invalid."}'
​
name: "AjaxError"
​
stack: "@https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:60:2411\n@https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:60:19298\n"
​
<prototype>: Error: 
js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js:60:2411
    error https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:60
    complete https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:60
    c https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:3
    fireWith https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:3
    l https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:3
    o https://master-o6uhlyvfepy9jmzas6uuautue8l7l9e0.tugboatqa.com/sites/default/files/js/js_54Xng77mT6HIDHdZynvZKVOTk2NbFi_QPxOzOonO7ec.js?scope=footer&delta=0&language=fr&theme=olivero&include=eJx9UVtywyAMvJCJz9CTdASothpAjARxffvi1NiNp9MvVrsr9HIsOHqpGcItC0-CqoPbSE4Of1Bg8J87u1s9Wq6HYSchpU6mgl-lQujSyZhA6a6Drlowjhb08ocr9MCnaeDQoPCYeUFBb-xqbGB3Ch-IfphJC8s6QqYDR5C7ATWC4A-34xgxlVZ7Zimull6zx4ezgNUjSPCgCQpxMoptDg-y_iVmofhbUgRxs1nI45VLIMLL60JJc4C2u8IcLMi4v0NVlG7a8I1aD_sxqC1V0nMCzDOKb9l1S61itKxtidPJvJRrE9qmRkgwofx_sN7JpbMbqoOMbz5SGixN75kyjh18A-FY6QY:3

Steps to reproduce

  1. Create an instance on https://simplytest.me/ with Drupal 10.1.6 and add the `flag_lists` module.
  2. Go to the side admin > Extend, enable all `Multilingual` modules
  3. Add a new language and enable it. Go to /admin/config/regional/content-language and select all boxes related to flag lists.
  4. Add flagging collection e.g. "My Flagging Collection Test"
  5. Make sure the flag list is enabled for the content type you want to test on.
  6. Create a new node of that content type to test.
  7. Click on the "Add this item to the My Flagging Collection Test list" > This works fine and add the node to the flag list if in default or any other language.
  8. Try clicking the now "Remove this item from the My Flagging Collection Test list" and this works only if in default site language while throws the above error if node is in any other language. (e.g. /fr/node/1)

UPDATE: If I refresh the page and click the link again, it works and toggles the flag status without errors.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Needs review

Version

4.0

Component

Code

Created by

cestmoi

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

Comments & Activities

  • Issue created by @cestmoi
  • Comment 7 months ago →
    cestmoi
  • Assigned to sl27257
  • Comment 7 months ago →
    🇸🇪Sweden sl27257 Stockholm

    Hi,

    thank you for your report!

    Do you have any information on when this worked. I.e. did this work on D9 for instance? The reason is that I am trying to figure out if there is a change in Drupal or if this is an bug that has not been found yet?

    But anyhow I have seen other modules where this has been an issue, so I guess it is only a matter of finding the culprit...

    /Thomas

  • Issue was unassigned.
  • Comment 7 months ago →
    cestmoi

    Thank you @sl27257
    This is the first time I use the module but I jut tested it on SimplyTest.me with Drupal 9.5.11 and it seems to work fine without such issues.

  • Comment 7 months ago →
    🇸🇪Sweden sl27257 Stockholm

    Thanks for the info.

    I started trying to find the bug yesterday but bumped into the following problem.

    🐛 Deprecated function: mb_strtolower(): Passing null to parameter Active

    In worst case I need to patch the core to temporary get rid of it. Anyhow another question:

    /fr/node/1

    Is the /fr the language selector (French) or is that a sub directory?

    /Thomas

  • Comment 6 months ago →
    🇸🇪Sweden sl27257 Stockholm

    Now I have managed to recreate the error. I must say that I have never on any of my sites run the site in a mode / way so that this error will occur.

    /Thomas

  • Comment 6 months ago →
    cestmoi
    Is the /fr the language selector (French) or is that a sub directory?

    You probably have the answer by now but to confirm, it's the language selector not sub dir.
    Yes it seems one wouldn't have this issue if not on a multilingual site and happened to test it.

  • Assigned to sl27257
  • Comment 6 months ago →
    🇸🇪Sweden sl27257 Stockholm

    Changing status

  • Comment 6 months ago →
    🇸🇪Sweden sl27257 Stockholm

    I now know what is causing this.

    Sometimes the token is calculated with the language selector included and sometimes without. In the flag_lists module it calculated with the selector but in the flag module, which I inherit a lot of functionality from, it is done without.

    So the question is which fix to go for. I need to check the documentation for which is the proper way to do it...

  • Status changed to Needs review 6 months ago
  • Comment 6 months ago →
    🇸🇪Sweden sl27257 Stockholm

    This is an interesting bug. I wonder how many other modules that uses AJAX that will pass your test. If you use the path as an argument to the token they will fail on this as it is not handled in core in a good way I would say.

    But for the flag_lists I think it will be OK now.

  • Comment 6 months ago →
    cestmoi

    I confirm this patch seems to have fixed it, Thank you @sl27257
    Yes, I already had some AJAX headaches with Webform but apart from the multilingual factor which I have yet to test (fingers crossed).

  • Comment 6 months ago →
    System Message
    • sl27257 → committed 8599de04 on 4.0.x 
      Issue #3407806 by sl27257, cestmoi: AJAX Error when toggling the flag...
contrib.social Blog FAQ Discussions
Production build 0.69.0 2024