1

Quiero crear unas pestañas a partir de unos datos consultados en la base de datos, en cada pestaña tendrá unos checkbox los cuales quiero que tengan una acción onChange pero no puedo insertar la etiqueta script en una cadena string

function GenerarPestanias() {
        var pestanias = '<ul class="nav nav-tabs" role="tablist">';
        $.each( todoFunciones, function( i, j ){
            if(i!=0){
                if(j.id_padre==0){
                    var ident = j.titulo.toLowerCase().replace(/\s/g,'');

                    $.each( todoFunciones, function( x, y ){
                        if(y.id_padre==j.id){
                        }
                    });
                    pestanias += ''+
                    '<li><a href="#'+ident+'" data-toggle="tab" aria-expanded="true">'+j.titulo+' '+
                    '<input id="menu_'+ident+'" name="menu_'+ident+'" data-info="general" name="my-checkbox" type="checkbox"  data-toggle="toggle" data-on="<span class=\'fa fa-power-off\'></span>" data-off="<span class=\'fa fa-power-off\'></span>" data-onstyle="success" data-offstyle="danger">'+
                    '</a>'+
                    '</li>'+
                    '<script type="text/javascript">'+
                    '</script>';
                }
            }
        });
        pestanias += '</ul>';
        return pestanias;
    }

Al finalizar la etiqueta del script me lanza error.

No se si es la manera correcta, si hay otra y mejor, bienvenida sera.

Actualización 1:

Quisiera que cada checkbox contenga algo como esto:

    $('#checkbox').on("change", function(){
        if($(this).prop("checked") == true){
             alert(true);
        }else{
             alert(false);
        }
    });

Actualización 2:

No explique bien lo que quiero que haga cada checkbox, pues como dije arriba creo pestañas con bootstrap ( como acá ) a partir de una consulta a la BD, la tabla se compone de la siguiente manera:


CREATE TABLE public.funciones
(
  id integer NOT NULL DEFAULT nextval('funciones_id_seq'::regclass),
  id_padre integer NOT NULL,
  icono character varying(255) NOT NULL,
  link character varying(255) NOT NULL,
  titulo character varying(255) NOT NULL,
  status boolean NOT NULL
)

Los que contienen id_padres = 0 son las pestañas, las que contengan id_padres > 0 son hijos los cuales quiero que aparezcan dentro del contenido de cada pestaña también como checkbox.

Acá un ejemplo de una consulta (typo json) a la tabla



todoFunciones = 
            [
            {
              "id": 1,
              "id_padre": 0,
              "icono": "fa fa-dashboard fa-fw",
              "link": "/",
              "titulo": "Tablero",
              "status": true
          },
          {
              "id": 2,
              "id_padre": 0,
              "icono": "fa fa-tasks fa-fw",
              "link": "#",
              "titulo": "Procesos",
              "status": true
          },
          {
              "id": 3,
              "id_padre": 2,
              "icono": "fa fa-list-ol fa-fw",
              "link": "/lotes",
              "titulo": "Lotes",
              "status": true
          },
          {
              "id": 4,
              "id_padre": 2,
              "icono": "fa fa-eraser fa-fw",
              "link": "/limpieza",
              "titulo": "Limpieza",
              "status": true
          },
          {
              "id": 5,
              "id_padre": 2,
              "icono": "fa fa-stop fa-fw",
              "link": "/paradas",
              "titulo": "Paradas",
              "status": true
          },
          {
              "id": 6,
              "id_padre": 2,
              "icono": "fa fa-wrench fa-fw",
              "link": "#",
              "titulo": "Mantenimiento",
              "status": true
          }
          ]
          ;

11
  • Puedes crear una función y desde el evento on de jQuery puedes mandarla llamar
    – jasilva
    Commented el 19 dic. 2016 a las 22:21
  • ¿Podrías dar un ejemplo mas claro en una respuesta? por favor.
    – bypabloc_
    Commented el 19 dic. 2016 a las 23:05
  • Es que aun no estoy muy seguro si es lo que necesitas, es decir, la idea del on es que puedes programar controles que van a aparecer dinamicamente
    – jasilva
    Commented el 19 dic. 2016 a las 23:09
  • Lo que quiero es que cada checkbox que cree con jquery tenga su propio evento onChange
    – bypabloc_
    Commented el 19 dic. 2016 a las 23:11
  • Ok, cuantos checks tendrias y que haria cada uno?
    – jasilva
    Commented el 19 dic. 2016 a las 23:14

3 respuestas 3

1

Y porque no simplemente creas un onChange Para la clase de tus inputs :

$(document).ready(function(){

  $('.checkbox').bind('change', function() {
    /*if($(this).prop("checked") == true){
      alert(true);
    }else{
      alert(false);
    }*/
    if($(this).data("tipo")=="tipo1"){
      alert("tipo 1");
    }else if($(this).data("tipo")=="tipo2"){
      alert("tipo 2");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" data-tipo="tipo1">
<input type="checkbox" class="checkbox" data-tipo="tipo2">

5
  • Actualice la pregunta del por que no hacerlo con una clase o on un id
    – bypabloc_
    Commented el 19 dic. 2016 a las 23:49
  • Puedes agregar atribrutos custom a tus checkbox y leerlos dentro del change de la clase para asi diferenciarlos.
    – sioesi
    Commented el 19 dic. 2016 a las 23:52
  • Lo otro que puedes hacer es darle esa clase solo a los checkbox!
    – sioesi
    Commented el 20 dic. 2016 a las 0:02
  • pero si quiero hacer que cada checkbox tenga funciones diferentes, ¿como haria?
    – bypabloc_
    Commented el 20 dic. 2016 a las 0:18
  • Actualice @PabloContreras
    – sioesi
    Commented el 20 dic. 2016 a las 0:25
0

Como parece que los checkboxes se crean de manera dinámica con JavaScript/jQuery, lo que puedes hacer es asociar eventos delegados que se asociarán a los elementos tan pronto sean creados y añadidos al DOM.

Puedes leer más sobre eventos delegados en la documentación de jQuery para .on() (en inglés). Donde se explica (traducción mía):

Los eventos delegados tienen la ventaja de que pueden procesar eventos de descendientes que se han añadido al documento en un momento posterior. Al seleccionar un elemento que se garantiza que estará presenta en el momento que se asocia el controlador del evento delegado, ìedes isar eventos delegados para evitar la necesidad de asociar y quitar controlador de eventos frecuentemente. Este elemento debería ser el elemento contenedor de una vista en el diseño Modelo-Vista-Controlador, por ejemplo, o document si el controlador de evneto quiere monitorizar todos los eventos que surjan en el documento. El elemento document está disponible en el head del documento antes de cargar ningún HTML, por lo que es el más seguro par asociar eventos sin tener que esperar a que el documento esté listo.

Así el formato de la asociación sería algo como esto (por ejemplo para el click):

$( "selector-de-un-ancestro" ).on( "click", "selector-del-elemento-objetivo", function() {
   // acciones a ejectura al hacer click
});

En tu caso particular, lo que harías es dejar el código exactamente igual a como lo tienes y fuera del enlace realizar la asociación de eventos delegados. Sabiendo que un ancestro será el body podrías hacer algo como esto:

Nota que mientras más arriba/superior sea el ancestro, menos eficiente será la asociación; es recomendable hacer que el ancestro sea lo más concreto posible

$("body").on("click", "input[type='checkbox']", function() {
  if($(this).prop("checked") == true){
    alert(true);
  }else{
    alert(false);
  }
});

function GenerarPestanias() {
  var pestanias = '<ul class="nav nav-tabs" role="tablist">';
  $.each( todoFunciones, function( i, j ){
    if(i!=0){
      if(j.id_padre==0){
        var ident = j.titulo.toLowerCase().replace(/\s/g,'');

        $.each( todoFunciones, function( x, y ){
          if(y.id_padre==j.id){
          }
        });
        pestanias += ''+
          '<li><a href="#'+ident+'" data-toggle="tab" aria-expanded="true">'+j.titulo+' '+
          '<input id="menu_'+ident+'" name="menu_'+ident+'" data-info="general" name="my-checkbox" type="checkbox"  data-toggle="toggle" data-on="<span class=\'fa fa-power-off\'></span>" data-off="<span class=\'fa fa-power-off\'></span>" data-onstyle="success" data-offstyle="danger">'+
          '</a>'+
          '</li>'; // eliminé las etiquetas script
      }
    }
  });
  pestanias += '</ul>';
  return pestanias;
}
0

si lo que quieres es generar unas pestañas usando la información de una base de datos y que cada pestaña contenga un checkbox con un eventListener cada uno, entonces aqui te dejo un ejemplo, no le di estilos al checkbox.

Aqui el HTML:

        <!-- Nav tabs -->
        <ul id="pestañas" class="nav nav-tabs" role="tablist">
            <!--<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>-->
        </ul>

        <!-- Tab panes -->
        <div id="contenido" class="tab-content">
           <!-- <div role="tabpanel" class="tab-pane active" id="home">Home</div>
            <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
            <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
            <div role="tabpanel" class="tab-pane" id="settings">Settings</div>-->
        </div>

    </div>

Este es el JSON que use:

[{
                "id": 1,
                "id_padre": 0,
                "status": true,
                "link": "#home",
                "titulo": "Home"
            },
            {
                "id": 2,
                "id_padre": 0,
                "status": true,
                "link": "#profile",
                "titulo": "Profile"
            },
            {
                "id": 3,
                "id_padre": 0,
                "status": true,
                "link": "#messages",
                "titulo": "Messages"
            }]

El javascript:

var pestañas = document.querySelector('#pestañas'),
            contenido = document.querySelector('#contenido'),
            primera = true,
            tf = [{
                "id": 1,
                "id_padre": 0,
                "status": true,
                "link": "#home",
                "titulo": "Home"
            },
            {
                "id": 2,
                "id_padre": 0,
                "status": true,
                "link": "#profile",
                "titulo": "Profile"
            },
            {
                "id": 3,
                "id_padre": 0,
                "status": true,
                "link": "#messages",
                "titulo": "Messages"
            }];

        function generarPestañas(callback){
            for(var i=0, objeto; objeto=tf[i]; i++){
                if(objeto.id_padre == 0){
                    var pestaña_actual = generarPestaña(primera, objeto.link, objeto.titulo, function(){
                        if(this.checked == true){
                            alert('true');
                        }
                        else{
                            alert('false');
                        }
                    });
                    pestañas.appendChild( pestaña_actual );
                    primera = false;
                }
            }
            callback();
        }
        //generarPestañas();
        function generarPestaña(_primera, link, titulo, callback){
            var pestaña = document.createElement('li'),
                enlace = document.createElement('a'),
                checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            pestaña.setAttribute('role', 'presentation');
            enlace.textContent = titulo;
            enlace.setAttribute('href', link);
            enlace.setAttribute('role', 'tab');
            enlace.setAttribute('data-toggle', 'tab');
            if(_primera == true){
                pestaña.setAttribute('class', 'active');
            }
            pestaña.appendChild( enlace );
            pestaña.appendChild( checkbox );
            checkbox.addEventListener('change', function(){
                callback.call( this );
            }, false);
            return pestaña;
        }
        function iniciarPestañas(){
            generarPestañas(function(){
                $('li[role=presentation] a').click(function(e){
                    e.preventDefault();
                    $(this).tab('show');
                });
            });
        }
        iniciarPestañas();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.