CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapbuttontoggle
JFerro
JFerro

Reputation: 3433

Add Toggle button with bootstrap dinamically with JS and jQuery not functioning

I am very beginner in JS and HTML and I am trying to use bootstrap buttons (toggle) in my code. The problem is that they do not appear nicely how I expect everywhere.

enter image description here

I think I use the same code both times, but still the button appears differently.

Since the Bootstrap button is loaded correctly the first time I assume the link are ok in the head of the HTML

The first time the three buttons appear is as follows:

<div class="checkbox"">
          <br>
          <br>
           <input checked data-toggle="toggle" type="checkbox">
      </div>

The second time the toggle appears is thanks to the following code

<script >
$(document).ready(function(){
    $.getJSON("mylocaljsonfile.json", function(data){
        var concept_list= '';
        $.each(data, function(key, value){
            console.log("here comes another")
            console.log(value)
            console.log("this is the key:")
            console.log(key)
            concept_list += '<tr>';
            concept_list += '<td align="center" style="vertical-align:center>';
            concept_list += '<div class="checkbox" ><input checked data-toggle="toggle" type="checkbox" data-id="' + value.name + '"></div>';
            concept_list += '</td>';
            concept_list += '<td>'+value.name+'</td>';
            concept_list += '<td>'+value.color+'</td>';
            concept_list += '<td>'+value.fingerprint+'</td>';
            concept_list += '<td>'+value.hits+'</td>';
            concept_list += '<td>'+value.EN+'</td>';
            concept_list += '<td>'+value.DE+'</td>';
            concept_list += '<td>'+value.FR+'</td>';
            concept_list += '</tr>';
        });
        $('#concept_list').append(concept_list);
    });
});

The code reads a local JSON file adds rows for every entry and in the firts column of every row a toggle button which I pretend to be like the first nice grey ones. Where is the problem in the second toggles? I tried everything, delete the id, moving around the text, etcetc

And I can not find the solution.

Upvotes: 0

Views: 523

Answers (2)

JFerro
JFerro

Reputation: 3433

It appears that adding this solves the problem:

$("[data-toggle]").bootstrapToggle()

After looping through the table JS has to run somehow again that function over the checkboxes and then it works.

Upvotes: 1

Topher
Topher

Reputation: 1029

Check if the nice looking checkbox is created by a javascript function somewhere (Likely if you are using a template in your app.)

It is likely that your js is inserting those checkboxes AFTER that code which applies the styling(converts your standard checkbox into the pretty one) has run.

Your best bet I think is possibly that you need to look for an app.js file that you included in your project which probably has that code.

You'd need to then run the same code after your js has finished inserting the checkboxes for each checkbox. .

Upvotes: 0

Related Questions