Problema con ajax y jquery
Tengo un problemilla con jquery y ajax.. Te explico: hace un par de días vi un carrusel de imágenes construido con jquery, me gustó mucho y quería hacer varias pruebas
Hola! Tengo un problemilla con jquery y ajax.. Te explico: hace un par de días vi un carrusel de imágenes construido con jquery, me gustó mucho y quería hacer varias pruebas con el, pero me he quedado a medias. No se ve bien si lo abro mediante una página como esta:
<a href="javascript:ajx('carrusel.html', 'principal');">Empresa</a> <br />
<div id="principal"><span>Parte principal</span></div>
Se carga mediante ajax pero solo las imágenes, el css y javascript también se cargan pero como si no lo hubieran hecho, ya que no tiene estilo ni las funciones van bien.
Link del carrusel dónde se puede bajar el ejemplo (jquery.zip):
http://sorgalla.com/jcarousel/
Estos son los archivos:
indice.html:
?<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
</head>
<body>
<div id="contenedor">
<div id="menu">
<a href="javascript:ajx('carrusel.html', 'principal');">Empresa</a> <br />
<div id="principal"><span>Parte principal</span></div>
</div>
</div>
</body>
</html>
carrusel.html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cat">
<head>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({});
});
</script>
</head>
<body>
<div id="wrap">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="pics/f1.bmp" alt="" /></li>
<li><img src="pics/f02.bmp" alt="" /></li>
<li><img src="pics/f03.bmp" alt="" /></li>
<li><img src="pics/f04.bmp" alt="" /></li>
<li><img src="pics/f05.bmp" alt="" /></li>
<li><img src="pics/f06.bmp" alt="" /></li>
<li><img src="pics/f07.bmp" alt="" /></li>
<li><img src="pics/f08.bmp" alt="" /></li>
<li><img src="pics/f09.bmp" alt="" /></li>
<li><img src="pics/f10.bmp" alt="" /></li>
<li><img src="pics/f11.bmp" alt="" /></li>
<li><img src="pics/f12.bmp" alt="" /></li>
<li><img src="pics/f13.bmp" alt="" /></li>
<li><img src="pics/f14.bmp" alt="" /></li>
<li><img src="pics/f15.bmp" alt="" /></li>
</ul>
</div>
</body>
</html>
ajax.js:
function ajx (url,id)
{
var nova = false;
//Mozilla, Safari, ..
if (window.XMLHttpRequest){
nova = new XMLHttpRequest ();}
//Internet Explorer
else if (window.ActiveXObject){
try{
nova = new ActiveXObject ("Msxml2.XMLHTTP");}
catch (e){
// en caso que sea una versión antigua
try
{
nova = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
nova.onreadystatechange = function ()
{
// función de respuesta
carregar (nova, id);
...
Hola! Tengo un problemilla con jquery y ajax.. Te explico: hace un par de días vi un carrusel de imágenes construido con jquery, me gustó mucho y quería hacer varias pruebas con el, pero me he quedado a medias. No se ve bien si lo abro mediante una página como esta:
<a href="javascript:ajx('carrusel.html', 'principal');">Empresa</a> <br />
<div id="principal"><span>Parte principal</span></div>
Se carga mediante ajax pero solo las imágenes, el css y javascript también se cargan pero como si no lo hubieran hecho, ya que no tiene estilo ni las funciones van bien.
Link del carrusel dónde se puede bajar el ejemplo (jquery.zip):
http://sorgalla.com/jcarousel/
Estos son los archivos:
indice.html:
?<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
</head>
<body>
<div id="contenedor">
<div id="menu">
<a href="javascript:ajx('carrusel.html', 'principal');">Empresa</a> <br />
<div id="principal"><span>Parte principal</span></div>
</div>
</div>
</body>
</html>
carrusel.html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cat">
<head>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({});
});
</script>
</head>
<body>
<div id="wrap">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="pics/f1.bmp" alt="" /></li>
<li><img src="pics/f02.bmp" alt="" /></li>
<li><img src="pics/f03.bmp" alt="" /></li>
<li><img src="pics/f04.bmp" alt="" /></li>
<li><img src="pics/f05.bmp" alt="" /></li>
<li><img src="pics/f06.bmp" alt="" /></li>
<li><img src="pics/f07.bmp" alt="" /></li>
<li><img src="pics/f08.bmp" alt="" /></li>
<li><img src="pics/f09.bmp" alt="" /></li>
<li><img src="pics/f10.bmp" alt="" /></li>
<li><img src="pics/f11.bmp" alt="" /></li>
<li><img src="pics/f12.bmp" alt="" /></li>
<li><img src="pics/f13.bmp" alt="" /></li>
<li><img src="pics/f14.bmp" alt="" /></li>
<li><img src="pics/f15.bmp" alt="" /></li>
</ul>
</div>
</body>
</html>
ajax.js:
function ajx (url,id)
{
var nova = false;
//Mozilla, Safari, ..
if (window.XMLHttpRequest){
nova = new XMLHttpRequest ();}
//Internet Explorer
else if (window.ActiveXObject){
try{
nova = new ActiveXObject ("Msxml2.XMLHTTP");}
catch (e){
// en caso que sea una versión antigua
try
{
nova = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
nova.onreadystatechange = function ()
{
// función de respuesta
carregar (nova, id);
...
1 Respuesta
Respuesta de oyepez003
1
Primero:
Para que funcione correctamente debes agregar el script jQuery del plugin jcarousel() así...
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({});
});
Segundo:
Veo que el problema es ajax ya que la funcion
jQuery('#mycarousel').jcarousel({})
Se ejecuta antes de que la respuesta ajax llegue al navegador, por eso modifique tu archivo para que quede así:
Agregue un timeout en la función para que se pueda crear el carrusel y modifique el link por un span
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
</head>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#lnkEmpresa').click(function(){
ajx('carrusel.html', 'principal');
setTimeout(function(){jQuery('#mycarousel').jcarousel({})},2000);
});
});
</script>
<body>
<div id="contenedor">
<div id="menu">
<span style="color:#0000FF; cursor:pointer" id="lnkEmpresa">Empresa</span> <br />
<div id="principal"></div>
</div>
</div>
</body>
</html>
Como te dije coloque un timeout que detiene el funcionamiento por 2 segundos (2000 ms) y luego ejecuta la función que le pasamos como parámetro que en este caso es la función jcarousel() de jQuery.
El problema de usar el timeout es que si la llamada ajax tarda en responder más de 2 segundos de igual forma veras el carrusel ya que no encontró la lista para generarlo, aunque la función se halla ejecutado.
Claro esto funciona y te da una noción de como trabaja esto pero no debería hacerse de esa manera, te recomiendo que investigues el acceso de ajax mediante jQuery, el tiene unas funciones 'success' y 'beforeSend' que se ejecutan después y antes según sea el caso de cada llamada ajax. En este caso colocariaa la función que realiza el carrusel el la función 'success'.
http://docs.jquery.com/Ajax/jQuery.ajax#options
Para que funcione correctamente debes agregar el script jQuery del plugin jcarousel() así...
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({});
});
Segundo:
Veo que el problema es ajax ya que la funcion
jQuery('#mycarousel').jcarousel({})
Se ejecuta antes de que la respuesta ajax llegue al navegador, por eso modifique tu archivo para que quede así:
Agregue un timeout en la función para que se pueda crear el carrusel y modifique el link por un span
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
</head>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#lnkEmpresa').click(function(){
ajx('carrusel.html', 'principal');
setTimeout(function(){jQuery('#mycarousel').jcarousel({})},2000);
});
});
</script>
<body>
<div id="contenedor">
<div id="menu">
<span style="color:#0000FF; cursor:pointer" id="lnkEmpresa">Empresa</span> <br />
<div id="principal"></div>
</div>
</div>
</body>
</html>
Como te dije coloque un timeout que detiene el funcionamiento por 2 segundos (2000 ms) y luego ejecuta la función que le pasamos como parámetro que en este caso es la función jcarousel() de jQuery.
El problema de usar el timeout es que si la llamada ajax tarda en responder más de 2 segundos de igual forma veras el carrusel ya que no encontró la lista para generarlo, aunque la función se halla ejecutado.
Claro esto funciona y te da una noción de como trabaja esto pero no debería hacerse de esa manera, te recomiendo que investigues el acceso de ajax mediante jQuery, el tiene unas funciones 'success' y 'beforeSend' que se ejecutan después y antes según sea el caso de cada llamada ajax. En este caso colocariaa la función que realiza el carrusel el la función 'success'.
http://docs.jquery.com/Ajax/jQuery.ajax#options
