Bootstrap Toggle funktioniert nicht nach Javascript aktualisieren

Question

Ich habe ein Problem mit Bootstrap Toggle.

Nach einer teilweisen Aktualisierung der Hauptseite verschwinden die Umschaltknöpfe und ich sehe nur Kontrollkästchen.

ich aktualisieren Sie die Seite mit diesem Code:

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

Und hier Teil meines Codes auf der Hauptseite ist:

<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 --> 

Wenn ich die Seite manuell zu aktualisieren, es wie erwartet aussieht.

Answer 1

Das liegt daran, dass BootstrapToggle die Seite unter der initialen Seitenauslagerung analysiert, die nach Knoten mit [data-toggle="toggle"] sucht. Wenn Sie also neuen Inhalt auf die Seite laden, wird die neue DOM-Struktur nicht automatisch analysiert. Um die neuen Kontrollkästchen als BootstrapToggle-Objekte zu initialisieren, müssen Sie $('[data-toggle="toggle"]').bootstrapToggle(); manuell aufrufen, nachdem der neue Inhalt auf der Seite platziert wurde.

Als jQuery.load() akzeptiert eine Callback-Funktion, die ausgeführt wird, wenn die Anforderung abgeschlossen ist, wie es zweites Argument ist, können Sie die Lösung oben wie folgt implementieren:

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