Checkbox not being rendered with correct gentelella css when added via javascript

Question

I'm trying to add some rows data in a datatable, first via Pug and then later on via javascript.

I add the first rows getting data via controller call, and then adding it via pug parse:

<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered bulk_action">
  <thead>
    <tr>
      <th>
        <th>Aprovado</th>
      </th>
      <th>Nome</th>
      <th>Email</th>
      <th>Data de nascimento</th>
      <th>Cidade</th>
      <th>Gênero</th>
      <th>Escolaridade</th>
      <th>Instituição de ensino</th>
      <th>Semestre</th>
      <th>Token</th>
      <th>Selection Status</th>
    </tr>
  </thead>

  <tbody>
    for candidate in candidates
      - var formatedCandidate = candidateService.formatCandidateForDataTable(candidate, newTrueCheckbox, newFalseCheckbox);
      <tr>
        <td>
          <th>
            if formatedCandidate.isCandidateApproved
              <input type="checkbox" id="check-all" class="flat" checked>
            else
              <input type="checkbox" id="check-all" class="flat">
          </th>
        </td>
        <td>
          = formatedCandidate.name
        </td>
        <td>
          = formatedCandidate.email
        </td>
        <td>
          = formatedCandidate.bornDate
        </td>
        <td>
          = formatedCandidate.city
        </td>
        <td>
          = formatedCandidate.gender
        </td>
        <td>
          = formatedCandidate.educationLevel
        </td>
        <td>
          = formatedCandidate.educationInstitution
        </td>
        <td>
          = formatedCandidate.educationSemester
        </td>
        <td>
          = formatedCandidate.token
        </td>
        <td>
          = formatedCandidate.selectionStatus
        </td>
      </tr>
  </tbody>
</table>

This way, it manages to render the checkbox with the right style:

Later on, I try to update the rows via a "reload" button, getting data via a get request and then adding rows via javascript:

$.get("candidates/getCandidatesForTable", function(candidatesArray){
    candidateTable.clear().draw();
    candidatesArray.forEach((candidate, index) => {
        debugger;
            if (candidate[1]) {
                candidate[1] = `<th>
                                    <input type="checkbox" id="check-all" class="flat" checked/>
                                </th>`;
            } else {
                candidate[1] = `<th>
                                    <input type="checkbox" id="check-all" class="flat"/>
                                </th>`;
            }
        candidateTable.row.add(candidate).draw();
    });
});

Although I inserted the HTML code via javascript using the same properties as it was added via pug, the checkbox was rendered different: it is rendered, but the css style is now gone:

How should I add the a checkbox via javascript and still get the correct css styling?

When you check the code of your page, do you see `class` attribute rendered? — westdabestdb, Jan 05 '19 at 03:11
@westdabestdb this is the result of pug rendering: `

` But the javascript added row return this: ` ` — ayrtondenner, Jan 05 '19 at 03:18
Well, my opinion is when you render it with Pug, it also wraps your input element inside of another div which has `class="icheckbox_flat-green checked"` attribute, and this is the real class which makes it happen. I tend not to use jquery so I don't have much knowledge of it, but instead of looping manual inputs, create these checkbox elements with jquery. — westdabestdb, Jan 05 '19 at 03:25
I tried the following code now in javascript: ` `; The checkbox now looks like this [link](https://i.imgur.com/X6Vqm7e.png) The HTML final result looks like this: ` ` I wonder if the tag has to do with something, because weirdly enough, it seems like datatable simple doesn't want to add the tag around the checkbox, and it just adds the checkbox right into the — ayrtondenner, Jan 05 '19 at 03:38
As I said, the problem is divs around input elements. It doesn't have anything to do with `td` tags. Compare pug render and your jquery code. There are divs with `class="icheckbox_flat-green checked"` attribute when you render it with pug. But when you render it with your jquery code, which is false approach, javascript library of this css framework doesn't recognize these inputs and doesn't wrap it in that important div I mentioned. — westdabestdb, Jan 05 '19 at 03:41
So, how should I add this checkbox element when doing it via javascript? — ayrtondenner, Jan 05 '19 at 03:47

Checkbox not being rendered with correct gentelella css when added via javascript

0 Answers0