json-editor: object.js renders invalid HTML code

All themes render invalid HTML due to repeatedly using the same Id for different elements. This is repeated through all themes.

Code from src/themes.js

Note the dual use of “id=pName” in both functions.

  getTabHolder: function(propertyName) {
    var pName = (typeof propertyName === 'undefined')? "" : propertyName;
    var el = document.createElement('div');
    el.innerHTML = "<div style='float: left; width: 130px;' class='tabs' id='" + pName + "'></div><div class='content' style='margin-left: 120px;' id='" + pName + "'></div><div style='clear:both;'></div>";
    return el;
  },
  getTopTabHolder: function(propertyName) {
    var pName = (typeof propertyName === 'undefined')? "" : propertyName;
    var el = document.createElement('div');
    el.innerHTML = "<div class='tabs' style='margin-left: 10px;' id='" + pName + "'></div><div style='clear:both;'></div><div class='content' id='" + pName + "'></div>";
    return el;
  },

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (6 by maintainers)

Commits related to this issue

Merge pull request #243 from pmadril/master Solve Issue #214 — committed to json-editor/json-editor by schmunk42 6 years ago

Most upvoted comments

@schmunk42 @marc7000 @germanbisurgi I have been looking at the problem with categories not working in most themes and fixed one of the problems with invalid IDs. But there’s another related problem that might be the cause of the themes problems.

If you look at this example: (Doesn’t matter which theme you use), Then try to inspect the content of the first tab (category) and you’ll notice that the content is wrapped in 4 identical blocks.

<div class="col-md-12" role="tabpanel" id="First Tab">
  <div class="row">
    <div class="col-md-12" role="tabpanel" id="First Tab">
      <div class="row">
        <div class="col-md-12" role="tabpanel" id="First Tab">
          <div class="row">
            <div class="col-md-12" role="tabpanel" id="First Tab">
              <div class="row">
                <div data-schematype="object" data-schemapath="root.first" style="position: relative;" class="col-md-12">

I can’t see any reason why it has to be wrapped 4 times, and it clearly poses a problem with 4 identical IDs.

The problem is located in src/editors/objects.js. And it seems like the layoutEditors() function is called numerous times for each editor/field, stacking up the wrappers. And I guess this is the reason why a lot of the themes don’t work properly.

I can’t figure out if the layoutEditors() function is supposed to remove the previous wrappings, as the code is not documented very well. So I could use some help here 😜

pmk65 on Nov 15, 2018

Hi, I’m author of categories. As soon as possible I will take a look at the problem (just few hours, I’m in a rush rigth now).

pmadril on Dec 5, 2018