Popup < node entity via ajax > broken

Created on 24 June 2024, 5 days ago
Updated 25 June 2024, 4 days ago

Problem/Motivation

Problem for map markers where the popup contents are set to "< node entity via ajax >".

Clicking on a map marker results in an AJAX request which returns the popup contents correctly, but the popup only flashes very briefly before disappearing.

The browser console has error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at e._updateContent (DivOverlay.js:285:9)
    at e.update (DivOverlay.js:187:8)
    at e.setContent (DivOverlay.js:170:8)
    at Object.<anonymous> (leaflet.drupal.js?v=10.3.0:109:29)
    at c (jquery.min.js?v=3.7.1:2:25304)
    at Object.fireWith [as resolveWith] (jquery.min.js?v=3.7.1:2:26053)
    at l (jquery.min.js?v=3.7.1:2:77782)
    at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.7.1:2:80265)

Problem confirmed on two different Drupal 10 sites, one using OpenLitespeed and one using Apache. Chrome-based browser (Vivaldi).

Firefox error is:

Uncaught TypeError: Node.appendChild: Argument 1 does not implement interface Node.

Steps to reproduce

  1. Create a map with "< node entity via ajax >" popup contents.
  2. Click on a marker to view the popup.

Workaround

To work around this issue, change the map popup settings to use "< node entity >" and everything works.

🐛 Bug report
Status

Closed: cannot reproduce

Version

10.2

Component

Code

Created by

🇬🇧United Kingdom fonant

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

Comments & Activities

  • Issue created by @fonant
  • 🇬🇧United Kingdom fonant
  • 🇬🇧United Kingdom fonant
  • Status changed to Closed: cannot reproduce 4 days ago
  • 🇮🇹Italy itamair

    Thanks for reporting this @fonant
    BUT I cannot reproduce the this Bug you report.

    This Leaflet Demo View Page:
    https://www.geodemocracy.com/drupal_geofield_stack_demo/web/geoplaces-ma...

    is indeed using:

    Drupal Core: 10.2.2
    Drupal Leaflet Version: 10.2.18

    and < node entity via ajax > as Leaflet View Popup settings (screenshot attached),
    and it doesn't report any Leaflet Popup functional issue (even in its inspector).

    The issue you report doesn't look like a general Leaflet module bug, but might depend by/from you specific Drupal app instance configuration ...

    Closing this as "Cannot Reproduce".
    Please reopen ONLY if you find (and can prove) evidence of a general Leaflet module Bug on this functionality.

    Regards.

  • 🇬🇧United Kingdom fonant

    More information, although I haven't narrowed down the symptoms enough yet:

    I have a map that has working popups in the node view page (it's a View Reference field), that fails in exactly the same way when I edit the View (without making any changes) and try to get the popups in the View Preview.

    Working:

    • Leaflet map view, added to Node display as a View Reference.
    • Map displays entity references from four different Node reference fields from the current node.
    • Four contextual filters using "Content ID from URL" defaults for "When the filter value is NOT available".
    • Popups loading content using "< node entity via ajax >".

    Fails:

    • Edit the above View.
    • Enter the NID four times in the Preview arguments (e.g. 1234/1234/1234/1234).
    • Click on a marker in the Preview: popup appears for an instant then disappears. Same error as in summary.
  • 🇬🇧United Kingdom fonant

    Could it be that the AJAX mechanism needs the page to be for a node?

    The other maps that break with "< node entity via ajax >" are those for a View that's not embedded in a node display.

    These views used to work in previous versions of Leaflet and Drupal. Only broke in the last few days.

  • 🇬🇧United Kingdom fonant

    Hmm... another difference I've found:

    The maps that fail to open popups contain an additional command in the AJAX returned:

        {
            "command": "add_css",
            "data": [
                {
                    "rel": "stylesheet",
                    "media": "all",
                    "href": "\/core\/themes\/claro\/css\/classy\/components\/node.css?sfkw3v"
                }
            ]
        },

    whereas the maps the work only contain the popup HTML insert command:

        {
            "command": "insert",
            "method": "replaceWith",
            "selector": "[data-leaflet-popup-ajax-entity=\u0022node-2294-map_popup_balloon-en\u0022]",
            "data": "<pop-up-html-here>",
            "settings": null
        }
    
Production build 0.69.0 2024