Skip to main content
Agregar evento delegado
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
  • Para la paginación:
    • Crear variable global para la página que se debe mostrar
    • Incluir la página en la petición
    • RecorrerDelegar evento onclick en enlaces de paginación para asignar evento
// Variable global para asignar página
let curPage = 1;

// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Delegar evento onclick para enlaces de paginación
    $('#filtrados').on('click', '.page-link', function(e) {
        // Evitar comportamiento normal de enlace
        e.preventDefault();
        // Actualizar página que se debe mostrar
        curPage = $(this).text();
        // Ejecutar petición AJAX
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca': marca,
                'genero': genero,
                'search': $value,
                // Incluir número de página que se va a cargar
                'page': curPage
                },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){
                        // Asignar contenido HTML
                        $("#filtrados").html(resultado);
                        // Dar tiempo para que el navegador interprete el nuevo contenido
                        setTimeout(function() {
                            // Recorrer enlaces de paginación
                            $('.page-link').each(lnk => {
                                // Asignar evento onclick
                                $(lnk).on('click', function(e) {
                                    // Evitar comportamiento normal de enlace
                                    e.preventDefault();
                                    // Actualizar página que se debe mostrar
                                    curPage = $(this).text();
                                    // Ejecutar petición AJAX
                                   cargarProductos();
                                });
                            });
                        }, 500);
                    }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};
  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
  • Para la paginación:
    • Crear variable global para la página que se debe mostrar
    • Incluir la página en la petición
    • Recorrer enlaces de paginación para asignar evento
// Variable global para asignar página
let curPage = 1;

// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca': marca,
                'genero': genero,
                'search': $value,
                // Incluir número de página que se va a cargar
                'page': curPage
                },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){
                        // Asignar contenido HTML
                        $("#filtrados").html(resultado);
                        // Dar tiempo para que el navegador interprete el nuevo contenido
                        setTimeout(function() {
                            // Recorrer enlaces de paginación
                            $('.page-link').each(lnk => {
                                // Asignar evento onclick
                                $(lnk).on('click', function(e) {
                                    // Evitar comportamiento normal de enlace
                                    e.preventDefault();
                                    // Actualizar página que se debe mostrar
                                    curPage = $(this).text();
                                    // Ejecutar petición AJAX
                                   cargarProductos();
                                });
                            });
                        }, 500);
                    }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};
  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
  • Para la paginación:
    • Crear variable global para la página que se debe mostrar
    • Incluir la página en la petición
    • Delegar evento onclick en enlaces de paginación
// Variable global para asignar página
let curPage = 1;

// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Delegar evento onclick para enlaces de paginación
    $('#filtrados').on('click', '.page-link', function(e) {
        // Evitar comportamiento normal de enlace
        e.preventDefault();
        // Actualizar página que se debe mostrar
        curPage = $(this).text();
        // Ejecutar petición AJAX
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca': marca,
                'genero': genero,
                'search': $value,
                // Incluir número de página que se va a cargar
                'page': curPage
                },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){
                        // Asignar contenido HTML
                        $("#filtrados").html(resultado);
                    }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};
Agregar paginación
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
  • Para la paginación:
    • Crear variable global para la página que se debe mostrar
    • Incluir la página en la petición
    • Recorrer enlaces de paginación para asignar evento
// Variable global para asignar página
let curPage = 1;

// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca' : marca,
                'genero' : genero,
                'search': $value,
                // Incluir número de página que se va a cargar
                'page': curPage
                },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){
                        // Asignar contenido HTML
                        $("#filtrados").html(resultado);
                        // Dar tiempo para que el navegador interprete el nuevo contenido
                        setTimeout(function() {
                            // Recorrer enlaces de paginación
                            $('.page-link').each(lnk => {
                                // Asignar evento onclick
                                $(lnk).on('click', function(e) {
                                    // Evitar comportamiento normal de enlace
                                    e.preventDefault();
                                    // Actualizar página que se debe mostrar
                                    curPage = $(this).text();
                                    // Ejecutar petición AJAX
                                   cargarProductos();
                                });
                            });
                        }, 500);
                    }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};
  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca' : marca,
                'genero' : genero,
                'search':$value },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){ $("#filtrados").html(resultado); }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};
  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
  • Para la paginación:
    • Crear variable global para la página que se debe mostrar
    • Incluir la página en la petición
    • Recorrer enlaces de paginación para asignar evento
// Variable global para asignar página
let curPage = 1;

// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca': marca,
                'genero': genero,
                'search': $value,
                // Incluir número de página que se va a cargar
                'page': curPage
                },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){
                        // Asignar contenido HTML
                        $("#filtrados").html(resultado);
                        // Dar tiempo para que el navegador interprete el nuevo contenido
                        setTimeout(function() {
                            // Recorrer enlaces de paginación
                            $('.page-link').each(lnk => {
                                // Asignar evento onclick
                                $(lnk).on('click', function(e) {
                                    // Evitar comportamiento normal de enlace
                                    e.preventDefault();
                                    // Actualizar página que se debe mostrar
                                    curPage = $(this).text();
                                    // Ejecutar petición AJAX
                                   cargarProductos();
                                });
                            });
                        }, 500);
                    }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

No ejecuta la petición AJAX al cargar la página porque está dentro de una función anónima y solo se ejecuta por los eventos a los que fue asignada. Necesitas:

  • Definir la función aparte
  • Al cargar el DOM:
    • Asignar el evento a los checkboxes, pero ejecutando la función
    • Ejecutar la función para obtener productos desde que carga la página
// Ejecutar hasta que se haya cargado el DOM
$(function() {
    // Asignar evento a checkboxes
    $('[name="categoria[]"], [name="subcategoria[]"], [name="marcas[]"], [name="genero[]"], #search').bind('click keyup', function(event) {
        cargarProductos();
    });
    // Ejecutar cuando carga el DOM
    cargarProductos();
});

// Función para petición AJAX
function cargarProductos() {
        $value= $("#search").val();
        var categoria = $('[name="categoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var subcategoria = $('[name="subcategoria[]"]:checked').map(function(){
          return this.value;
        }).get();
        var marca = $('[name="marcas[]"]:checked').map(function(){
          return this.value;
        }).get();
        var genero = $('[name="genero[]"]:checked').map(function(){
          return this.value;
        }).get();
        
        var url = 'productos/filtros';
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          type: "POST",
          url: url,
          data: {'categoria': categoria,
                'subcategoria': subcategoria,
                'marca' : marca,
                'genero' : genero,
                'search':$value },

                beforeSend: function(){
                  $("#filtrados").html("<div id='loader'></div>")
                },
                  timeout:500000,
                success: function (resultado){
                    setTimeout(function(){ $("#filtrados").html(resultado); }, 1000); 
                },
                error: function(e) { $("#filtrados").html("Sucedió un error!") }
        });
};