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);
   ...

1 respuesta

Respuesta
1
Si puedes enviala a mi gmail [email protected] para verlo y ayudarte un poco más...
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

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Botón atrás en ajax

Estoy creando una web modular, tengo la página principal en la que tengo todos los enlaces a diferentes secciones y las cargo en un div mediante ajax con este código: <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try {...
1 respuesta

Respuesta formulario en un div

Como soy un principiante en el uso de javascript, jQuerry y php necesitaría tu ayuda sobre el tema de la respuesta de un formulario. He vista que hace un año ya ofreciste la solución para otro usuario, he aprovechado tus respuestas pero sigo sin...
1 respuesta

Cargar varios div

Me gustaría saber como podría cargar varios div, estoy probando pero se queda el archivo loading cargando pero no carga, pero carga el segundo getdata. Cargando un solo div sale estupendamente, pero con dos ya no este es mi código [PHP] // here we...
2 respuestas

Valor JavaScript a ASP

Mi pregunta es como pasar un valor JavaScript a Asp. Se que para pasarlo de ASP a JavaScript es de la siguiente manera: <script language='javascript'> var cadena=""; cadena = '<%=hora3%>'; </script> ¿Pero cómo lo hago de forma contraria?
1 respuesta

Validar datos en base de datos

Tengo un problemita con un formulario los datos ingresan bien a la base de datos esta todo prefecto pero el problema es que hay usuarios que se registran más de 2 veces lo que quiero hacer es que cuendo se registre le salga un mensaje de que su...
3 respuestas

Pasar variables en funciones onclick de un form

Quiero pasar valores de mi forma a una función por medio de onclick lo que realizo es lo siguiente: <form method="POST" name="log"> <p> <span class="login">Usuario:</span><input name="log" type="text" size="10"> <span...
1 respuesta

Consulta base de datos con AJAX y PHP

Tengo un problema no logro realizar una consulta a base de datos mediante un formulario utilizando AJAX, la página no me muestra nada... Encontré un ejemplo en la red pero utiliza una lista desplegable en donde realiza una consulta a la base de datos...
1 respuesta

Cargar página en un div

Hace unas semanas te escribí para ver como podía hacer para cargar una página en un div según al enlace que pulsases. Me explico tengo un div menu y un div content, según el enlace que pulse del menu muestra una página u otra en el div content. Ya se...
1 respuesta

Leer algunos datos de xml desde html

Tengo un archivo XML de música en donde existen autores, títulos del album y fecha en que se lanzo el album, este lo leo por HTML, es decir el código en HTML me lee todos los datos del XML y me los muestra.. Lo que yo trato de hacer es que no me lea...
1 respuesta

Llenar arreglo desde formulario

Gusto en saludarte, tengo un problema que no he podido solucionar, tengo un formulario con 2 cajas de texto más un botón, en donde el usuario deberá ingresar los códigos del productos que desea comprar más la cantidad y al presionar el botón estos...
1 respuesta