[SOLUCIONADO] Problema con Ajax y Jquery al cargar HTML asíncrono.

[PabloManuel]

Hola!!

(Soy principiante con Ajax/Jquery)

Os resumo, tengo desarrollado mi propio CMS y ahora lo estoy pasando todo a procesos con Ajax y Jquery para evitar las dichosas recargas de páginas.

Lo que quiero hacer:

En el CMS quiero mostrar la tabla de registros y el formulario para modificar/añadir registros

Tengo:

Siempre dos ficheros:

- admin_noticias.asp
- admin_noticias_ajax.asp

El primero se encarga del html, jquery y css y el segundo de los procesos (crear registros, borrarlos, crear la tabla paginada...).

Uso el plugin easyResponsiveTabs para crear pestaña en infinidad de partes de la Web, son responsives, os recomiendo el plugin

El problema:

Cuando cargo una página, doy formato a las lengüetas, en el Head tenemos:

Código HTML:

<script type="text/javascript" src="js/easyResponsiveTabs.js"></script>
        <link rel="stylesheet" href="css/easy-responsive-tabs.css"/>
        <script>
            $(document).ready(function() {
                $('#tabsjquery1, #tabsjquery2').easyResponsiveTabs({           
                    type: 'default', //Types: default, vertical, accordion           
                    width: 'auto', //auto or any width like 600px
                    fit: true,   // 100% fit in a container
                    closed: 'accordion', // Start closed if in accordion view
                    activate: function(event) {  }// Callback function if tab is switched                            
                });
            });
        </script>
 

Y en el html esta estructura:

Código HTML:

<div id="tabsjquery1">
 
    <ul class="resp-tabs-list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
 
    <div class="resp-tabs-container">
        <div></div>
        <div></div>
        <div></div> 
    </div>
 
</div>
 

El problema viene después de ejecutar ajax y que me devuelva el html, no coge el formato.

Cuando hago click en la tabla para editar un registro, se ejecuta esto:

Código HTML:

<script>
            function edit_registro(id){
                //hay que pasarle la carpeta y el nombre del fichero
                //y a través de opción saber si recargar fotos noticia o fotos de galería.
                event.preventDefault();
                muestra_oculta('form_registro');
                respuesta_ajax('admin_noticias_ajax.asp', '?proceso=editregistro&id=' + id, 'form_registro');
                $('#tabsjquery1').easyResponsiveTabs(
                    {
                        type: 'default', //Types: default, vertical, accordion           
                        width: 'auto', //auto or any width like 600px
                        fit: true,   // 100% fit in a container
                        closed: 'accordion', // Start closed if in accordion view
                        activate: function(event) {  }// Callback function if tab is switched                            
                    });
            }
        </script>
 

RespuestaAjax, devuelte un html equivalente a la estructura de tabsjquery1 y con varios formularios por dentro para editar la noticia, sus fotos, etc.

Al devolverlo, no coge el formato de easyResponsiveTabs

[PabloManuel]

Código Javascript:

<script>
            function edit_registro(id){
                //hay que pasarle la carpeta y el nombre del fichero
                //y a través de opción saber si recargar fotos noticia o fotos de galería.
                event.preventDefault();
                muestra_oculta('form_registro');
                respuesta_ajax('admin_noticias_ajax.asp', '?proceso=editregistro&id=' + id, 'form_registro');
                $(document).ready(function() {
                    $('#tabsjquery1').easyResponsiveTabs(
                        {
                            type: 'default', //Types: default, vertical, accordion           
                            width: 'auto', //auto or any width like 600px
                            fit: true,   // 100% fit in a container
                            closed: 'accordion', // Start closed if in accordion view
                            activate: function(event) {  }// Callback function if tab is switched                            
                        });
                });
            }
        </script>
 

He probado también así y nada, supongo que será por el DOM, no sé como hacerlo, me echáis una mano?

[PabloManuel]

¿Los tiros irían por aquí?

http://www.desarrolloweb.com/articul...es-jquery.html

[PabloManuel]

Así, tampoco.

Código Javascript:

<script>
            function edit_registro(id){
                //hay que pasarle la carpeta y el nombre del fichero
                //y a través de opción saber si recargar fotos noticia o fotos de galería.
                event.preventDefault();
                muestra_oculta('form_registro');
                respuesta_ajax('admin_noticias_ajax.asp', '?proceso=editregistro&id=' + id, 'form_registro', function(){
                    $('#tabsjquery1').easyResponsiveTabs(
                        {
                            type: 'default', //Types: default, vertical, accordion           
                            width: 'auto', //auto or any width like 600px
                            fit: true,   // 100% fit in a container
                            closed: 'accordion', // Start closed if in accordion view
                            activate: function(event) {  }// Callback function if tab is switched                            
                        });
                });
            }
        </script>
 

[diurno10]

Buenas pablo, lo tenes online al sitio? para poder reproducir el error

[PabloManuel]

que va, pertenece al CMS y hay que logarse, tengo una Web en demo, si quieres te creo un usuario administrador y me echas un cable

El CMS es español de elaboración propia y nos es necesario pasar ya a Ajax para evitar las recargar y poder separar al 100% el código del html, CSS y js

Si quieres me mandas un correo a [email protected] y te creo una cuenta

Te pongo la función, creo que falta añadirle algo para callback, pero claro, no siempre que la use necesitaré hacer esa llamada:

Código Javascript:

<script>
            //Función que devuelve una respuesta ajax de un Script Asp
            //se le pasa:
            //la página ASP, los parámetros en formato Get y el ID
            //donde se tiene que volcar la respuesta
            //formato de los parámetros:
            //pagina: procesos.asp
            //cadena: ?proceso=1
            //idrespuesta: divcontenedor
            function respuesta_ajax(pagina, cadena, idrespuesta, micallback){
                    $.ajax({
                            cache: false,
                            url:   pagina + cadena,
                            type:  'post',
                            success:  function (response) {
                                    $("#"+idrespuesta).html(response);
                            }
                    });
            }
        </script>
 

[PabloManuel]

También uso esta función para mostrar los div ocultos:

Código Javascript:

<script type="text/javascript">
            function muestra_oculta(id) {
            //compruebo si el elemto esta oculto o no
               if($('#'+id).is(':hidden')) {
                   $('#'+id).show('slow');
               }else {// de lo contrario lo oculto
                   $('#'+id).hide('slow');
               }
            }
        </script>
 

[PabloManuel]

He localizado el problema, pero no la solución, no se puede acceder directamente a nodos creados dinámicamente con Jquery:

http://programacionwebmix.wordpress....om-con-jquery/

y he hecho una chapuza que funciona para demostrar el problema, he modificado la función:

Código Javascript:

<script>
            function edit_registro(id){
                //hay que pasarle la carpeta y el nombre del fichero
                //y a través de opción saber si recargar fotos noticia o fotos de galería.
                event.preventDefault();
                muestra_oculta('form_registro');
                respuesta_ajax('admin_noticias_ajax.asp', '?proceso=editregistro&id=' + id, 'form_registro');
                
                $('#form_registro').on('click',function(){
                    $('#tabsjquery1').easyResponsiveTabs
                    ({
                        type: 'default', //Types: default, vertical, accordion           
                        width: 'auto', //auto or any width like 600px
                        fit: true,   // 100% fit in a container
                        closed: 'accordion', // Start closed if in accordion view
                        activate: function(event) {  }// Callback function if tab is switched                            
                    })  
                
                
                });
                
                
                
            }
        </script>
 

El formulario me lo carga sin el formato correcto a las lengüetas y cuando hago click en el id form_registros, TACHAAAAN!!, me aplica el formato de easyResponsiveTabs

si cambio el click, por el hold no funciona.

[PabloManuel]

He leído esto:

http://www.forosdelweb.com/f179/even...jquery-600121/

y esto:

http://www.arumeinformatica.es/blog/...dinamicamente/

He modificado la función así y tampoco funciona

Código Javascript:

<script>
            function edit_registro(id){
                //hay que pasarle la carpeta y el nombre del fichero
                //y a través de opción saber si recargar fotos noticia o fotos de galería.
                event.preventDefault();
                muestra_oculta('form_registro');
                respuesta_ajax('admin_noticias_ajax.asp', '?proceso=editregistro&id=' + id, 'form_registro');
                
                $('#form_registro').find('#form_registro div').easyResponsiveTabs
                    ({
                        type: 'default', //Types: default, vertical, accordion           
                        width: 'auto', //auto or any width like 600px
                        fit: true,   // 100% fit in a container
                        closed: 'accordion', // Start closed if in accordion view
                        activate: function(event) {  }// Callback function if tab is switched                            
                    });
            }
        </script>
 

[PabloManuel]

No he puesto el html resultante que es éste:

Código HTML:

<div class="div_subcontenido_g div_hidden" id="form_registro" style="display: block;">
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
 
 
    <a onclick="muestra_oculta('form_registro')"><img title="Cerrar" alt="Cerrar" src="images_sys.css4/ico24_close.png"></a>
 
    <div id="tabsjquery1">
    
        <ul class="resp-tabs-list">
            <li>Ficha de la noticia</li>
            <li>Fotos</li>
            <li>Galería</li>
        </ul>
    
        <div class="resp-tabs-container">
            <div>
                <form class="formulario" method="post" action="admin_noticias.asp?proceso=updateregistro&amp;id=1161">
                <fieldset>
                    <dl>
                        <dt>Ficha de la noticia</dt>
                        <dd>
                        .
                        .
                        .
                    </dl>
                </fieldset> 
                </form>                             
            </div>
            <div>
                <dl class="lista_dl">
                    <dd>
                        <form id="upload" method="post" action="upload.asp?dir=fotosno&amp;max=3&amp;tipo=1&amp;cod=1161&amp;ancho=1024&amp;marcaagua=1" enctype="multipart/form-data">
                            .
                            .
                            .                           
                        </form>
                    </dd>
                </dl>
                    
                <div id="divimagenes" class="flex_row_wrap"></div>
            </div>
            <div>
                <dl class="lista_dl">
                    <dd>
                        <form id="upload2" method="post" action="upload.asp?dir=fotosno&amp;max=100&amp;tipo=1&amp;cod=g1161&amp;ancho=1024&amp;marcaagua=1" enctype="multipart/form-data">
                        .
                        .
                        .                           
                        </form>
                    </dd>
                </dl>
                <div id="divimagenes2" class="flex_row_wrap flex_row_wrap_10"></div>
            </div>
        </div>
    </div>
    
                                                    
    </div>
 

Si os fijáis, hay otra cosa que no queda bien, aunque no me da errores, ajax me devuelve html, pero siempre incluye:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

[PabloManuel]

Solucionado gracias a diurno10:

Primero en la function edit_registro quita todo esto

Código:

$('#form_registro').on('click',function(){
   $('#tabsjquery1').easyResponsiveTabs
       ({
         type: 'default', 
         width: 'auto', 
         fit: true,   
         closed: 'accordion', 
         activate: function(event) {  }/        
     })  
});

e incluso el event.preventDefault(); el cual veo q lo utilizas en muchos lugares pero nunca obtenes el objeto event y eso te da
error en varios navegadores.


luego en admin_noticias_ajax.asp

quitas el tag meta que tiene <meta content="text/html; charset=utf-8" http-equiv="Content-Type">, por que es en bano y luego pones
esto

Código:

<script>
 $(document).ready(function() {
   $('#tabsjquery1').easyResponsiveTabs(
      {
      type: 'default',            
      width: 'auto', 
      fit: true,
      closed: 'accordion', 
     activate: function(event) {  }          
   });
});
</script>

no es necesario q lo coloques dentro de tags head, ponelo ni bien comienza el archivo.

Referente al campo meta, admin_noticias_ajax.asp no contiene estructura html. es decir, ninguna etiqueta de html básica, ni head ni body ni nada, tan sólo hay código ASP y el sript que diurno10 me ha dicho que incluya, lo cual funciona, genial!!

Muchas gracias!!