[SOLUCIONADO] Problema con función Ajax de jQuery

[Alexis88]

Hola amigos del foro, mi problema es el siguiente:

En el menú de opciones de mi aplicación web, implementé una función para que al dar un clic a cada opción del menú, abra una página dentro de un div haciendo uso de la función Ajax de jQuery. Esta es la función:

Código:

function mostrar_pagina(capa, pagina){
	$(function(){
		$.ajax({
			url: pagina,
			beforeSend:function(){
			  $("#cargando").show();
			},
			success:function(url){
				$("#"+capa).html(url);
				$("#cargando").hide();
			}
		});
	});
}

Y cada enlace del menú de opciones es así:

Código HTML:

<a href="javascript: mostrar_pagina('principal', '../Fichas/ver_fichas.php')" class="arrow">Nombre del enlace</a> 

Al final del menú de opciones se encuentre el DIV de ID "principal" que es en donde cargarán las páginas. El detalle está en que cuando doy clic al enlace para abrir la página, solo se muestra el gif que indiqué para que se vea mientras carga a la apertura de la página, en teoría esta carga solo debería durar unos segundos, sin embargo, queda cargando y no se llega a mostrar la página, tengo que dar un segundo clic a la opción para que finalmente pueda mostrarse la página.

La información que muestra Firebug en Firefox indica que al dar el primer clic, se ejecuta la función y el proceso tiene una demora de 391 milésimas de segundo, mientras que cuando doy el segundo clic, la demora es de 47 ms, que es cuando finalmente carga la página y se muestra. El problema es el mismo con todos los enlaces del menú, sin embargo, luego de haber dar el segundo clic a una opción, el resto de enlaces y el mismo enlace ejecutan la carga con 1 solo clic.

Intenté eliminando beforeSend que muestra el gif de espera pero da igual pues solo muestra el gif, no afecta a la ejecución de la función.

¿Cuál puede ser el problema y cómo puedo darle solución?

[wolfoxley]

intenta con esto quitando el validador de jQuery

esa función solo se usa para que después que se haya cargado jQuery pueda lazar eventos

Código Javascript:

function mostrar_pagina(capa, pagina){
 
        $.ajax({
            url: pagina,
            beforeSend:function(){
              $("#cargando").show();
            },
            success:function(url){
                $("#"+capa).html(url);
                $("#cargando").hide();
            }
        });
 
}
 

[Alexis88]

Hola wolfoxley, ya había intentado eso en otras funciones que implementé en mi aplicación y aunque para este caso no lo había hecho, acabo de realizar la edición que me sugieres pero el resultado es el mismo.

[wolfoxley]

intenta añadiendo estos argumentos mas...

Código Javascript:

$.ajax({
  type: "GET", //get, post 
  dataType: "json" //json , text, ect.
});
 

utiliza la consola de chrome para ver que esta pasando.. espero que ayude

[vesper_metal90]

Tal vez esto te ayude


http://api.jquery.com/load/

[Alexis88]

Hola amigos, revisando una función Ajax que tenía guardada pude pensar en la forma de dar solución a esto. Ya que luego del primer clic la carga de la página consultada queda en espera o "cargando", tomo el estado de dicha carga con "readyState" y verifico, si es igual a 1, es decir, si está cargando, vuelvo a ejecutar el procedimiento.

Código Javascript:

function mostrar_pagina(capa, pagina){
    $.ajax({
        url: pagina,
        beforeSend:function(){
          $("#cargando").show();
        },
        success:function(url){
            $("#"+capa).html(url);
            $("#cargando").hide();
        }
    });
        
    if($.ajax().readyState==1){ 
        $.ajax({
            url: pagina,
            beforeSend:function(){
              $("#cargando").show();
            },
            success:function(url){
                $("#"+capa).html(url);
                $("#cargando").hide();
            }
        });
    }
}
 

Es una solución poco ortodoxa pero efectiva, ha funcionado a la perfección con todos los enlaces. Espero que esto sirva a quienes tengan el mismo problema que tuve.

Saludos amigos.

[Alexis88]

Jugando un poco con los códigos, encontré otra solución para la cual necesito menos líneas de código:

Código Javascript:

function mostrar_pagina(capa, pagina){
    $.ajax({success:function(){}});
        
    $.ajax({
        url: pagina,
        beforeSend:function(){
            $("#cargando").show();
        },
        success:function(url){
            $("#"+capa).html(url);
            $("#cargando").hide();
        }
    });
}
 

Aparentemente no se realiza la petición en el primer intento, por eso es que recién al segundo intento se realiza el proceso por completo, lo malo está en que esto solo pasaba la primera vez que intentaba acceder a una de las opciones del menú, luego de eso no habían problemas, por lo que con la doble ejecución de la función, las siguientes consultas se verían afectadas, pero con este script ya no sucede eso y todo marcha como debe ser.