CODEWITHSUNDEEP
javascriptbootstrap-4
Mariusz Musik
Mariusz Musik

Reputation: 35

Bootstrap toggle doesn't work after javascript refresh

I have a problem with Bootstrap Toggle.

After a partial refresh of the main page, the toggles disappear and I see only checkboxes.

I refresh the page with this code:

<script type="text/javascript">
setInterval( function() {
    $('.swcon').load("status/controls.php");   
}, 5000);
</script>

And here is part of my code on main page:

<div class="grid-item swcon">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">TOGGLES</h3>
        </div>

        <table class="table table-hover table-condensed small" border="0">
            <tbody>
                <tr>
                    <?php       
                    /* GPIO */
                    $sth = $db->prepare("SELECT * FROM gpio WHERE gpio='$s[gpio]' AND rom='$s[rom]' AND (mode='simple' OR mode='temp' OR mode='moment' OR mode='read' OR mode='day') ");
                    $sth->execute();
                    $gpio = $sth->fetchAll();
                    foreach ($gpio as $g) {
                    ?>
                        <td class="col-md-1">
                            <img src="media/ico/switch-icon.png" alt="" title="<?php if(!empty($s['ip'])){echo "Last IP: ".$s['ip']." GPIO: ".$s['gpio']." Mode: ".$g['mode'];} else {echo "GPIO: ".$s['gpio']." Mode: ".$g['mode'];}?>" />
                        </td>
                        <td class="col-md-1">
                            <a href="index.php?id=view&type=gpio&max=day&single=<?php echo $s['name']?>" class="label <?php echo label($g['status']) ?>" title="Charts" ><?php echo str_replace("_", " ", $s['name'])?></a>
                        </td>
                    <?php
                    /* SIMPLE IP */
                    if(($g['mode']=='simple'&&!empty($s['ip']))||($g['mode']=='temp'&&!empty($s['ip']))) {
                        ?>
                    <td class="col-md-2">
                        <form class="form-horizontal" action="" method="post" style=" display:inline!important;">
                            <input class="checkbox" type="checkbox"  data-toggle="toggle" data-size="mini" onchange="this.form.submit()" name="switch" value="<?php echo $s['tmp'] == '1.0'  ? 'off' : 'on'; ?>" <?php echo $s['tmp'] == '1.0' ? 'checked="checked"' : ''; ?>  />
                            <input type="hidden" name="ip" value="<?php echo $s['ip']; ?>"/>
                            <input type="hidden" name="rev" value="<?php echo $g['rev']; ?>"/>
                            <input type="hidden" name="rom" value="<?php echo $s['rom']; ?>"/>
                            <input type="hidden" name="gpio" value="<?php echo $s['gpio']; ?>"/>
                            <input type="hidden" name="onoff" value="simpleip" />
                        </form>
                    </td>
<!-- Rest of the page not important here -->

If I refresh the page manually, it looks as expected.

Upvotes: 2

Views: 3258

Answers (1)

dferenc
dferenc

Reputation: 8126

That is because BootstrapToggle parses the page at the initial pageload looking for nodes with [data-toggle="toggle"]. So, when you load new content to the page, the new DOM structure does not get parsed automatically. In order to initialize the new checkboxes as BootstrapToggle objects, you have to call $('[data-toggle="toggle"]').bootstrapToggle(); manually after the new content has been placed into the page.

As jQuery.load() accepts a callback function that is executed when the request completes as it’s second argument, you can implement the solution above like this:

$('.swcon').load('status/controls.php', function() {
    $('[data-toggle="toggle"]').bootstrapToggle({
        size : 'mini',
        // additional settings if necessary
    });
});

Upvotes: 4

Related Questions