Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-65217

Conflict of element ids (html attribute "id") when there are several forms on one page

XMLWordPrintable

    • MOODLE_37_STABLE
    • MOODLE_37_STABLE
    • MDL-65217-master
    • Hide
      1. Create a custom form that has autocomplete elements and add it to a page twice. For example, use this test file: https://gist.github.com/marinaglancy/3e2a4210532edd9b7bc870616fc98315
      2. Make sure you can interact with each course selector properly
      3. Do not test form submit - it is not implemented via AJAX, the form elements names are still the same
      4. Make sure filepicker, editor and filemanager form elements still work. Visit any page where they are used (for example create a Page resource or restore a course from a backup)
      Show
      Create a custom form that has autocomplete elements and add it to a page twice. For example, use this test file: https://gist.github.com/marinaglancy/3e2a4210532edd9b7bc870616fc98315 Make sure you can interact with each course selector properly Do not test form submit - it is not implemented via AJAX, the form elements names are still the same Make sure filepicker, editor and filemanager form elements still work. Visit any page where they are used (for example create a Page resource or restore a course from a backup)

      This issue is similar to MDL-64324 but now it is about the element ids.

      Moodleforms create html id for the elements in the format "id_".$elementname
      this is unique for the form because all elements have different names (and _generateId() method is overridden in radio inputs to add a suffix).
      However when we add several forms on the same page and they have elements with the same name we end up with several elements in the DOM with the same "id" attribute.

      First of all, it breaks html validation:
      https://www.w3schools.com/tags/att_global_id.asp
      > The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

      Second, it breaks some JS, for example, 'autocomplete' form element attaches the selector to the wrong element.

        1. Screen Shot 2019-05-01 at 2.17.54 pm.png
          Screen Shot 2019-05-01 at 2.17.54 pm.png
          35 kB
        2. Screen Shot 2019-05-01 at 2.17.41 pm.png
          Screen Shot 2019-05-01 at 2.17.41 pm.png
          33 kB
        3. Screen Shot 2019-05-01 at 1.24.01 pm.png
          Screen Shot 2019-05-01 at 1.24.01 pm.png
          44 kB

            kabalin Ruslan Kabalin
            marina Marina Glancy
            Marina Glancy Marina Glancy
            Adrian Greeve Adrian Greeve
            Mathew May Mathew May
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 6 hours, 50 minutes
                6h 50m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.