0

Estoy utilizando un template que encontré en internet, cuando hago clic en una opción del menú actualizo el contenido principal por medio de Ajax pero cuando quiero contraer un div o abrir un datepicker, o cualquier otra funcionalidad de jquery, ya no es posible hacer nada de esto en todo el html que cargue por Ajax.

Componentes funcionando

Esta es la pagina que se carga por defecto, aquí pueden ver que funciona el datepicker y el collapse de los divs de abajo, pero cuando cargo otro HTML por Ajax y lo muestro ya no puedo usar ninguna de esas opciones.

introducir la descripción de la imagen aquí

Lo que hice para solucionar el collapse de los divs, fue buscar el código de javascript que activa eso y copiarlo en un nuevo archivo de esta manera:

$(function(){

$(document).ready(function() {
    $('.collapse-link').on('click', function() {
        var $BOX_PANEL = $(this).closest('.x_panel'),
            $ICON = $(this).find('i'),
            $BOX_CONTENT = $BOX_PANEL.find('.x_content');

        // fix for some div with hardcoded fix class
        if ($BOX_PANEL.attr('style')) {
            $BOX_CONTENT.slideToggle(200, function(){
                $BOX_PANEL.removeAttr('style');
            });
        } else {
            $BOX_CONTENT.slideToggle(200); 
            $BOX_PANEL.css('height', 'auto');  
        }

        $ICON.toggleClass('fa-chevron-up fa-chevron-down');
    });

    $('.close-link').click(function () {
        var $BOX_PANEL = $(this).closest('.x_panel');

        $BOX_PANEL.remove();
    });
});

});

Eso soluciono ese problema, pero para poder hacer que todas las funcionalidades de la plantilla estén operativas tendré que buscar por toda la plantilla las partes de código de cada funcionalidad y agregarla a mi archivo javascript que cargo con cada página nueva que abro por medio de Ajax.

Saben alguna manera de poder solucionar esto sin tener que cargar todos los javascript cada vez que cargo una nueva pagina por Ajax.

5
  • Hola Andres, una de las cosas que yo particular mente hago cuando trabajo con formularios dinámicos(con ajax) es poner las funcionalidades agregadas en una función. Así, Cuando inicio con document.ready por ejemplo, solo tengo que llamar a esa función una sola vez. O puedo usarlo luego de una llamada ajax. Al terminar de "construir" algo dinámicamente. Solo tienes que llamas a esa funcion. Otra recomendación es que pongas los script al final del body después de poner toda tu estructura html. Commented el 12 jun. 2017 a las 11:41
  • Hola Jose, a que te refieres con funcionalidades agregadas? La llamada de los scripts estan al final del archivo, como lo indicas. Cuando yo he trabajado con Ajax no he tenido problemas de este tipo, pero en este caso si y se me hace complicado jugar todas las partes del codigo donde se activan las funcionalidades para cargarlas con cada archivo que llamo mediante Ajax, ya que estoy usando una plantilla que encontre en internet y tiene muchisimas cosas. Espero encontrar otra soluciona Commented el 12 jun. 2017 a las 17:35
  • Por casualidad usas semantic? Commented el 12 jun. 2017 a las 18:30
  • Esta es la plantilla que uso: colorlib.com/polygon/gentelella/index.html y aqui sus fuentes: github.com/puikinsh/gentelella Al final de importar todos los scripts, esta uno de nombre custom.min.js, aqui es donde estan todas las funcionalidades para los formularios Commented el 12 jun. 2017 a las 18:41
  • Revisa que el jQuery no se este sobre escribiendo (que tengas mas de una version de jQuery en la pagina)
    – DanAlvarez
    Commented el 15 jun. 2017 a las 22:26

1 respuesta 1

1

En principio esta faltando información para saber cuál es el problema, de todos modos asumo que el problema es que las funciones js son ejecutadas antes de que estén listos los elementos que las ejecutan, esto se debe a que obviamente como cargas el contenido por Ajax los mismos no existen en ese momento.

Si usas Ajax para cargar contenido puedes usar ".done" para imprimir el js que quieres que se ejecute una vez terminada la carga del Ajax.

Aquí un ejemplo:

$.ajax({
 url: 'archivo.php',
 method: 'post', //o get
 data: {xxx}, //en caso de que tengas datos para enviarle al php
 success: function(result){
  //en result tendrás la página cargada para imprimirla en el html.
 }
}).done(function(){
 //aquí insertas todos los scripts que quieres que sean llamados post carga de ajax.
});

Cualquier duda que tengas puedes consultar, en caso de que no lo entiendas te agradezco crear un codepen o jsfiddle con una situación similar para poder resolverlo.

Un saludo y suerte!

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.