3

Tengo una lista la cual quiero sacar el id de cada elemento a esta lista es llenada dinamicamente por ajax.

Utilizo jQuery 2.1.4 y ya lo e probado en Firefox y en Chrome

Este es mi codigo :

jQ del ajax:

$(document).ready(function () {
    $.ajax({
        url: baseurl + 'Catalogo/obtener_categoria',
        type: "POST",
        dataType: "JSON",
        success: function (data)
        {
            $('#lista_categoria').empty();
            $('#lista_categoria').append(data);
        }
    });
//    obtener_productos(6);
});

Controlador:

public function obtener_categoria() {
        $niveles = $this->catalogo->obtener_categoria();
        $resp = '';
        foreach ($niveles as $row) {
            $resp .= '<li><a id="' . $row ['id_categoria'] . '" href="#" data-toggle="tab">' . $row ['nombre'] . ' (' . $row ['Total'] . ')</a></li>';
        }
        echo json_encode($resp);
    }

El resultado es esto:

introducir la descripción de la imagen aquí

Y finalmente el el codigo que me genera con el snippet:

$(document).ready(function() {
 $("#lista_categoria > li").on('click', 'a', function () {
       var id_categoria = this.id;
        alert(id_categoria);
    });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="box-body border-radius-none">
<div col-xs-12="">
<ul class="nav nav-pills nav-stacked" id="lista_categoria">
<li class=""><a id="16" href="#" data-toggle="tab" aria-expanded="false">ABARROTE (1)</a></li>
<li class=""><a id="1" href="#" data-toggle="tab" aria-expanded="false">ACEÍTES Y GRASAS (1)</a></li>
<li class=""><a id="7" href="#" data-toggle="tab" aria-expanded="false">CUIDADO PERSONAL (1)</a></li>
<li class=""><a id="6" href="#" data-toggle="tab" aria-expanded="false">HOGAR Y LIMPIEZA (3)</a></li>
<li class="active"><a id="12" href="#" data-toggle="tab" aria-expanded="true">LACTEO (3)</a></li></ul>
</div>
</div>

Como pueden ver aqui funciona con normalidad pero cuando lo ejecuto en mi pc me marca el siguiente error por llamarlo asi:

Cadena vacía pasada a getElementById().

introducir la descripción de la imagen aquí

5
  • ¿Puédes poner la función ajax que llena tu lista de datos? Y además ¿Este ejemplo que pones en el snippet es el mismo código que tú usas para extraer la información del id de cada elemento de la lista? Y como buena práctica no pongas números como ids.
    – Yikarus
    Commented el 4 jul. 2017 a las 15:17
  • @Lixus si efectivamente ese es el codigo, que me genera mi lista y le agrege su jQuery Commented el 4 jul. 2017 a las 15:23
  • Eso es solo un error de advertencia, más no uno que impida el funcionamiento de tu código. ¿Usas jQuery mobile? Porque hay un bug con una versión que justamente manda ese error
    – Yikarus
    Commented el 4 jul. 2017 a las 15:26
  • Prueba primero quitando el evento de click del document.ready, dado que cargas tus datos de manera dinámica estos no tienen embedidos el evento que definiste dentro de document.ready, y cambia el evento de esta forma: $(document).on('click', '#lista_categoria > li > a', function () { ejemplo funcionando jsfiddle.net/lixusrarnavo/peLpnums
    – Yikarus
    Commented el 4 jul. 2017 a las 15:29
  • @Lixus era el embedido publica tu respuesta para darle check :d Commented el 4 jul. 2017 a las 15:33

2 respuestas 2

2

Lo que pasa es que tus datos los estás cargando de manera dinámica, por lo que tu función que definiste adentro de $(document.ready) no se anexa a tus elementos a de tu lista.

Tienes primero que sacar la función de ese ámbito para que sea global y después modificarla de la siguiente forma para que funcione siempre para elementos que cargues de manera dinámica:

$(document).on('click', '#lista_categoria > li > a', function () {
    //TODO here
});
1
  • Gracias por la pronta respuesta (y), doy por cerrada esta pregunta con un check por ende espero mi voto positivo, para que alguien mas le sirva de apoyo en un futuro Commented el 4 jul. 2017 a las 15:41
1

Así mira...

$(document).ready(function() {
 $("#lista_categoria > li").on('click', 'a', function () {
       var id_categoria = $(this).attr('id');
        alert(id_categoria);
    });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="box-body border-radius-none">
<div col-xs-12="">
<ul class="nav nav-pills nav-stacked" id="lista_categoria">
<li class=""><a id="16" href="#" data-toggle="tab" aria-expanded="false">ABARROTE (1)</a></li>
<li class=""><a id="1" href="#" data-toggle="tab" aria-expanded="false">ACEÍTES Y GRASAS (1)</a></li>
<li class=""><a id="7" href="#" data-toggle="tab" aria-expanded="false">CUIDADO PERSONAL (1)</a></li>
<li class=""><a id="6" href="#" data-toggle="tab" aria-expanded="false">HOGAR Y LIMPIEZA (3)</a></li>
<li class="active"><a id="12" href="#" data-toggle="tab" aria-expanded="true">LACTEO (3)</a></li></ul>
</div>
</div>

7
  • Gracias por la pronta respuesta, lamentablemnete me sigue saliendo el mismo error :c Commented el 4 jul. 2017 a las 14:50
  • Entonces no es un problema aquí, quizá un plugin está haciendo algo o estás haciendo algo mal, por que en el snippet funciona. Commented el 4 jul. 2017 a las 14:55
  • 2
    @IvanMoreFlores Seguramente el navegador te esta guardando en caché una versión anterior del archivo JavaScript, podes hacer click derecho en cualquier lugar de la página, elegir "Ver código fuente..", buscar el script dentro del HTML, abrir el enlace que aparece en src <script src="ruta"> y actualizar el recurso con F5 Commented el 4 jul. 2017 a las 14:56
  • Tambien puedes intentar eliminar la caché, si estas probando en Chrome, suele hacer esas payasadas. :S Commented el 4 jul. 2017 a las 14:57
  • el problema es con el navegador, no en el script. Que version de firefox estas manejando? Commented el 4 jul. 2017 a las 14:59

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.