Javascript innerHTML messing with html attributes

Question

I'm trying to have a select inside a materialize modal. So far everything works fine but when I refresh the content of the modal select with an ajax request, the select disappears.

After investigating, I find that the innerHTML is not proper HTML.

Here is what I have :

let modal = htmlResponse.find('#modal')
let modal_old = document.getElementById('modal')
console.log(modal)
console.log(modal.innerHTML)
modal_old.innerHTML = modal.innerHTML

The console log is the following :

<div class="modal-content">
  <h4>Title</h4>
  <p>Some Text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled selected>Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

Followed by

<div class="modal-content">
  <h4>Title</h4>
  <p>Some text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled="" selected="">Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

As we can see, the disabled and selected are replaced with disabled="" and selected="" .

The modal is still opening after the innerHTMl replacement but the select is not visible.

When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.

Is this caused by innerHTML or a bad usage from me?

By the way, I'm testing on macOS High Sierra (10.13.2) with Chrome (63.0.3239.108) which are both in the latest available update. The website is hosted in a docker container but I don't believe the problem could come from here.

Answer 1

After investigating, I find that the innerHTML is not proper HTML.

It is proper HTML.

See boolean attributes :

A boolean attribute without a value assigned to it (eg checked) is implicitly equivalent to one that has the empty string assigned to it (ie checked=""). As a consequence, it represents the true value.

So the two sets of HTML express the same information and both do it correctly.

Converting HTML to a DOM and then asking the browser to convert a DOM to HTML will give you normalised HTML, not the original HTML. So the change is normal.

---

When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.

None of the code in the question would explain it not being displayed. That must be caused by some other part of your code.

Answer 2

The problem was due to the implementation of select in Materialize.

I haven't had any problems with it yet so I didn't read the documentation properly. It's written that a select must be initialized with jQuery.

So I added

$('select').material_select()

and reinitialized the modal

$('.modal').material_select()

and now everything is working.