Invalid HTML, duplicate IDs

Created on 27 February 2025, 4 months ago

Problem/Motivation

First want to state... I came across an issue I'm trying to debug on, where, when I place a FullCalendar view on a page with views_embed_view($view, $display), the events are printing on the page twice. At first, I started to think I was seeing two containers in the HTML with the same ID, and maybe that was related, but I'm not sure that's related...
So when I place the calendar on the page, I am seeing that output HTML contains two divs with the same IDs, like:

<div class="views-element-container contextual-region">
  <div  class="contextual-region js-view-dom-id-09cd3014f0f58f8f4cbe9c3ac3aef8cbe6ee51a3b48b36a381816941fbbede91">
    <div id="js-view-dom-id-09cd3014f0f58f8f4cbe9c3ac3aef8cbe6ee51a3b48b36a381816941fbbede91" class="fullcalendar--wrapper">  <!-- ***** <<< ****** HERE ****** -->
      <div >
        <div id="js-view-dom-id-09cd3014f0f58f8f4cbe9c3ac3aef8cbe6ee51a3b48b36a381816941fbbede91" class="fullcalendar--wrapper"></div><!-- ***** <<< ****** AND HERE ****** -->
      <div id="fc-message"></div>
    </div>
  </div>
  <div id="fc-message"></div>
</div>

Steps to reproduce

Place a fullcalendar on a page.
View the source, or run the page through a validator like https://validator.w3.org/.

Proposed resolution

Not 100% sure I follow how this works... but ultimately, the `views-view--fullcalendar.html.twig` file, when it prints the {{ rows }} variable, it's re-printing the entire VIEW again. I'm actually not sure I understand what's happening here, or how it's not recursive (infinite).

Remaining tasks

Fix it?

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Active

Version

3.0

Component

Code

Created by

🇺🇸United States dpagini

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @dpagini
Comment 17 days ago →
🇺🇸United States dcam
I'm able to reproduce the issue. You don't need to use views_embed_view(). It happens with a regular, old Page display.

It can only be seen in the raw HTML, which is also what a validator looks at. When the FullCalendar JS is executed it replaces the offending DIVs.

I tried to figure out how to solve it too, but didn't get anywhere. Since the problem doesn't exist after the JS runs, then one could argue there's no problem. But I empathize with anyone who doesn't want to have to deal with validation errors on their pages, especially if they have to explain them to supervisors.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024