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?