I am working with the jquery UI widget called checkboxradio because I find it interesting the aesthetics they offer without the checkbox, as if it were a button.
The problem I am having is that I need to dynamically create the checkboxes because depending on the information in my database, there will be one or the other. Specifically, the problem is that I am able to generate the checkbox I need without problems, but the widget style is not applied to them. That is, they appear on my page but they come out in the default format. Can anyone help me tell me if I am importing something wrong, or calling it wrong, etc?
Below is my code. I have adapted it by creating a single checkbox, because the only difference would be that it would have a loop that creates more or less checkboxes the same as there is now, but with different names.
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>I do not quite understand what happens, because if I create it in a static way directly in my html, there is no problem, it looks and works perfect. This makes me think that in my js file maybe I need to call the widget or something, but I don't know what.
This would be a functional code if you create anything for 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>As you can see, in this second example it is created well. So how can it be that when doing the append does not work, if I have copied and pasted the same code?I'm appending wrong? I need to call the function in my js after printing the checkbox?
I hope I have explained well, thank you very much.
