Переключатель начальной загрузки не работает после обновления JavaScript

1

У меня проблема с Bootstrap Toggle.

После частичного обновления главной страницы переключатели исчезают, и я вижу только флажки.

Я обновляю страницу с помощью этого кода:

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

И вот часть моего кода на главной странице:

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

Если я обновляю страницу вручную, она выглядит так, как ожидалось.

Теги:
bootstrap-4

1 ответ

1
Лучший ответ

Это связано с тем, что BootstrapToggle анализирует страницу на начальной странице pageload, которая ищет узлы с [data-toggle="toggle"]. Таким образом, при загрузке нового контента на страницу новая структура DOM автоматически не анализируется. Чтобы инициализировать новые флажки как объекты BootstrapToggle, вам нужно вызвать $('[data-toggle="toggle"]').bootstrapToggle(); вручную после добавления нового содержимого на страницу.

Поскольку jQuery.load() принимает функцию обратного вызова, которая выполняется, когда запрос завершается в качестве второго аргумента, вы можете реализовать вышеприведенное решение следующим образом:

$('.swcon').load('status/controls.php', function() {
    $('[data-toggle="toggle"]').bootstrapToggle({
        size : 'mini',
        // additional settings if necessary
    });
});
Поделиться
  • 0
    Спасибо. Это работа, но теперь переключатели велики после обновления.
  • 0
    Проверьте обновленный ответ, который показывает, как применить другие настройки.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню