Динамически создавать флажки с помощью виджета jquery UI "checkboxradio" - PullRequest
Новая
       9

Динамически создавать флажки с помощью виджета jquery UI "checkboxradio"

0 голосов
/ 27 января 2020

Я работаю с виджетом jquery UI с именем checkboxradio , потому что мне интересно, какую эстетику они предлагают без флажка, как если бы это была кнопка.

Я проблема Имеется в том, что мне нужно динамически создавать флажки, потому что в зависимости от информации в моей базе данных, будет один или другой. В частности, проблема в том, что я могу создать нужный флажок без проблем, но стиль виджета к ним не применяется. То есть они появляются на моей странице, но выходят в формате по умолчанию. Может ли кто-нибудь помочь мне сказать, если я импортирую что-то неправильно или называю это неправильно, et c?

Ниже приведен мой код. Я адаптировал его, создав один флажок, потому что единственное отличие состояло бы в том, что он будет иметь oop, который создает более или менее флажки, такие же, как сейчас, но с другими именами. 

function printNodeFilters(nodes) {
  $("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
  $("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}


// MAIN
$(document).ready(function() {
  printNodeFilters();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $("input").checkboxradio({
      icon: false
    });
  });
</script>
<!-- ****** -->


<div class="col-2" id="filter_container">
  <!-- FILTROS-->
  <legend>Filtros mapa: </legend>
  <label for="radio_ult_pos">Última posición</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
  <label for="radio_ruta">Ruta</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">

  <legend id="legend_filtro_datos">Filtros datos: </legend>
  <!-- AQUÍ IRÍAN LOS CHECKBOX -->

  
  <button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>

Я не совсем понимаю, что произойдет, потому что, если я создаю это способом c непосредственно в моем html, проблем нет, это выглядит и работает отлично. Это заставляет меня думать, что в моем js файле, возможно, мне нужно вызвать виджет или что-то еще, но я не знаю, что.

Это будет функциональный код, если вы создадите что-нибудь для js, 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $("input").checkboxradio({
      icon: false
    });
  });
</script>
<!-- ****** -->


<div class="col-2" id="filter_container">
  <!-- FILTROS-->
  <legend>Filtros mapa: </legend>
  <label for="radio_ult_pos">Última posición</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
  <label for="radio_ruta">Ruta</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">

  <legend id="legend_filtro_datos">Filtros datos: </legend>
  <label for="checkbox-2">tracker 1</label>
  <input type="checkbox" name="TRACKER1" id="checkbox-2">

  
  <button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>

Как вы можете видеть, во втором примере он хорошо создан. Так как же может случиться так, что при выполнении добавления не работает, если я скопировал и вставил тот же код? Я добавляю неправильно? Мне нужно вызвать функцию в моем js после печати флажка?

Надеюсь, я хорошо объяснил, большое спасибо.

1 Ответ

1 голос
/ 27 января 2020

При динамическом добавлении дополнительных элементов необходимо refresh виджет или, если он не инициализирован, инициализировать виджет. 

$(function() {
  printNodeFilters();
  $("input").checkboxradio();
});

Полный пример: 

function printNodeFilters(nodes) {
  $("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
  $("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}

$(function() {
  printNodeFilters();
  $("input").checkboxradio();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-2" id="filter_container">
  <!-- FILTROS-->
  <legend>Filtros mapa: </legend>
  <label for="radio_ult_pos">Última posición</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
  <label for="radio_ruta">Ruta</label>
  <input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
  <legend id="legend_filtro_datos">Filtros datos: </legend>
  <!-- AQUÍ IRÍAN LOS CHECKBOX -->
  <button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>
...