Problemas con shadowbox y AJAX

Goomba · #1 (**permalink**) 14/04/2008, 14:21

Hola buneo sucede que tengo un porblema que me tiene algo loco ya ya que no he encontrado solucion que me funcione agradesco a los que ya han tratado de ayudarme con el porblema.
Sucede que un amigo me hablo de una libreria de js con la cual puedes hacer presentaciones mas atractivas pal cliente o publico esta libreria se llama denomina shadowbox.
Bueno mi porblema es el siguiente sucede que tengo una pagina php en donde genero un catalogo de productos y cada producto tien un link a una especificacion de productos que se hace via shadowbox.
bueno si esta pagina la trabajo independientemente todo funciona corectamente, el catalogo se compone de una tabla en donde muestro 3 porductos por fila y todas las filas necesarias dependiendo el tipo de busqueda que se realiza.
ac les dejo el codigo como prenento un producto

Código:

<a rel="shadowbox;height=500;width=600" class="option"  href="../../vistas/modelo/modelo.php?cod=<?php echo $cod ?>">
                <div><?php echo ucfirst($modelos->getLinea()); ?></div>
                <table cellpadding="0" cellspacing="0" id="sub">
                  <tr>
                    <td><div id="producto"><?php echo ucfirst($modelos->getNombre_modelo());  ?></div></td>
                  </tr>
                  <tr>
                    <td><div id="imagen"><img src="../../funciones/resize.php?img=<?php echo $imagen ?>"/> </div></td>
                  </tr>
                  <tr>
                    <td><div id="precio">$ <?php echo $busquedaProducto[0]->getValor() ;  ?> c/IVA</div></td>
                  </tr>
                </table>
</a>

bueno mi problema es el siguinte sucede que esta pagina es llamada desde otra via ajax mediante una funcion similar a esta

Código:

function catalogoAccesorio(objeto,producto, sub1, sub2) {
	divCatalogo=objeto.getElementById('cat');	
	catalogoAccesorioAjax=nuevoAjax();
	catalogoAccesorioAjax.open("POST", "../../ajax/catalogo/catAccesorio.php", true);
	catalogoAccesorioAjax.onreadystatechange = function (){
		if(catalogoAccesorioAjax.readyState == 4) {
			divCatalogo.innerHTML=catalogoAccesorioAjax.responseText;
		}
	}
	catalogoAccesorioAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	catalogoAccesorioAjax.send("producto="+producto+"&sub1="+sub1+"&sub2="+sub2);
	
}

bueno la pagina principal se llma catalogo.php y esta hace un llamado via ajax dependiendo si quiere ver modelos o accesorios a la pagina catAccesorio o catModelo mi problema es que al hacer esta carga via ajax los efectos que muestra catModelo y catAccesorio de shadowBox no los ejecuta al seleccionar un producto X
Espero que alguien me ayude no se por que no funciona ojala puedan agradesco de antemano toda la ayuda.
Atte.
Goomba

GatorV · #2 (**permalink**) 14/04/2008, 15:10

Hola Goomba,

Revisa este link: http://www.forosdelweb.com/f77/howto...e-ajax-510438/

Saludos.

Goomba · #3 (**permalink**) 15/04/2008, 00:02

bueno probe el interprete pero no funciona el efecto shadowbox.
bueno este es el codigo de la pagina
este es la pagina del catalogo
catalogo.php

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="../../funciones/interpretadorAjax.js"></script> 
<link href="estilo.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="../../funciones/ajax.js"></script> 
<script type="text/javascript" src="../../funciones/funcion.js"></script> 
<link rel="stylesheet" type="text/css" href="funciones/shadowbox/src/css/shadowbox.css"> 
<script type="text/javascript" src="../../funciones/shadowbox/src/js/lib/yui-utilities.js"></script> 
<script type="text/javascript" src="../../funciones/shadowbox/src/js/adapter/shadowbox-yui.js"></script> 
<script type="text/javascript" src="../../funciones/shadowbox/src/js/shadowbox.js"></script> 
<script type="text/javascript"> 
 
window.onload = function(){ 
 
    Shadowbox.init(); 
 
    /** 
     * Note: The following command is not necessary in your own project. It is 
     * only used here to set up the demonstrations on this page. 
     */ 
 
}; 
 
</script> 
</head> 
 
<body > 
<table width="100%" border="0" cellpadding="0" cellspacing="6"> 
  <tr> 
    <td valign="top" width="80%"> 
    <div id="cat"></div> 
    </td> 
    <td width="20%" valign="top"> 
        <form id="form1" name="form1" method="post" action=""> 
        <select name="producto" id="producto" onchange="loadTipoProducto(document, this)"> 
            <option value="-1">Elija un tipo Produto</option> 
            <option value="Accesorios">Accesorios</option> 
            <option value="Modelos">Modelos</option> 
        </select> 
        <select name="sub1" id="sub1" style="display:none"> 
        </select> 
        <select name="sub2" id="sub2" style="display:none"> 
        </select> 
      </form> 
    </td> 
  </tr> 
</table> 
</body> 
</html>

este es el codigo ajax
codig ajax.js

Código PHP:

  function catalogoModelo(objeto,producto, sub1, sub2) { 
    divCatalogo=objeto.getElementById('cat');     
    catalogoModeloAjax=nuevoAjax(); 
    catalogoModeloAjax.open("POST", "../../ajax/catalogo/catModelo.php", true); 
    catalogoModeloAjax.onreadystatechange = function (){ 
        if(catalogoModeloAjax.readyState == 4) { 
             
            var scs=catalogoModeloAjax.responseText.extractScript();    //capturamos los scripts  
            divCatalogo.innerHTML=catalogoModeloAjax.responseText.stripScript(); 
            scs.evalScript();       //ahora si, comenzamos a interpretar todo   
 
        } 
    } 
    catalogoModeloAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    catalogoModeloAjax.send("producto="+producto+"&sub1="+sub1+"&sub2="+sub2); 
     
}

Goomba · #4 (**permalink**) 15/04/2008, 00:10

continuacion....

funcion loadTipoProducto que s ellam en onchance de catalogo.php

Código PHP:

  function loadTipoProducto(objeto, valor) { 
    producto=valor.value; 
    objeto.getElementById('sub1').length=0; 
    if(producto!=-1) { 
        objeto.getElementById('sub2').style.display="none"; 
        objeto.getElementById('sub1').style.display="block"; 
        if(producto=="Accesorios") { 
            catalogoAccesorio(objeto,'%','',''); 
             
        } 
        else { 
            catalogoModelo(objeto,'%','',''); 
        } 
         
    } 
    else { 
        objeto.getElementById('sub1').style.display="none"; 
        objeto.getElementById('sub2').style.display="none"; 
        objeto.getElementById('sub1').length=0; 
    } 
}

bueno ahora queda poner el codigo del archivo catModelo.php pa tener una muestra

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<link href="estilo.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="../../funciones/interpretadorAjax.js"></script> 
<link rel="stylesheet" type="text/css" href="funciones/shadowbox/src/css/shadowbox.css"> 
<script type="text/javascript" src="../../funciones/shadowbox/src/js/lib/yui-utilities.js"></script> 
<script type="text/javascript" src="../../funciones/shadowbox/src/js/adapter/shadowbox-yui.js"></script> 
<script type="text/javascript" src="../../funciones/shadowbox/src/js/shadowbox.js"></script> 
<script type="text/javascript" src="../../funciones/ajax.js"></script> 
 
<script type="text/javascript"> 
 
window.onload = function(){ 
 
    Shadowbox.init(); 
 
    /** 
     * Note: The following command is not necessary in your own project. It is 
     * only used here to set up the demonstrations on this page. 
     */ 
 
}; 
 
</script> 
</head> 
<body> 
<a rel="shadowbox;height=500;width=600" class="option"  href="vistas/modelo/modelo.php?cod=7890">proband</a><br /> 
 <a rel="shadowbox" class="option" title="Google.com" href="http://www.google.com/">External site</a> 
</body> 
</html>

bueno ahy tanb los codigos el porblema es que no me funciona el efecto del shadowbox, bueno porfavor pa que vean lo que hace el shadowbox esta es la web http://mjijackson.com/shadowbox/
no se porque no funciona ojala me puedan ayudar.
atte
Goomba
PS no se porque no funciona toy conlas canas verdes ya

GatorV · #5 (**permalink**) 15/04/2008, 08:18

Hace poco hubo un post similar, y el problema son:

Código:

<script type="text/javascript" src="../../funciones/shadowbox/src/js/lib/yui-utilities.js"></script>
<script type="text/javascript" src="../../funciones/shadowbox/src/js/adapter/shadowbox-yui.js"></script>
<script type="text/javascript" src="../../funciones/shadowbox/src/js/shadowbox.js"></script>
<script type="text/javascript" src="../../funciones/ajax.js"></script>

Todos esos scripts tienes que ponerlos en la página principal, o de lo contrario no se evaluaran.

Saludos.

Goomba · #6 (**permalink**) 15/04/2008, 10:53

a que te refieres con ponerlos en la pagina principal
sucede que estan puestos en ambos porbe poniendolo en catlñogo solamentye y tampoco, despues den catModelo tampoco, me podrias oruientar otro poco porfa
Agredaesco de antemano todo.
Atte
Goomba
PS trate de ponerlo solo en el catalogo.php despues solo en catmodelo.php pero no funciona, ayudaporfavor oreintacion no se que puedo estar hacuiiendo mal

GatorV · #7 (**permalink**) 15/04/2008, 11:18

Me refiero a que tus inclusiones de los archivos JavaScript deben de estar en la pagina principal (la pagina que es como "master" la que procesa todo lo de AJAX).

Saludos.

Goomba · #8 (**permalink**) 15/04/2008, 11:38

esta hecho pero no me funciona igual sucede que ajax.js guarda varias otras funciones ajax las cuales son invocadas dependiendo de la pagina si mi pero esta es que el efecto shadowbox no me funciona no se que hacer.
Agradesco la ayuda atte.
Goomba
PS como puedo poner las paginas ya que el codigo es muy largo pa ver si tengo algun pero el porblema es que el efecto shadowbox se aplica al tag <a> porfa y no hay un tag <script> dentro de ese tag <A>

GatorV · #9 (**permalink**) 15/04/2008, 12:05

Puedes probar instalando la extensión Firebug de Firefox y así poder ver el porque no te esta funcionando tu galería.

Saludos.

Goomba · #10 (**permalink**) 15/04/2008, 14:10

YYa no se que hacer el firebug no me funciona me dice error de ejecucion y ya porbe todas sus soluciones sin suerte ojala alguien me pueda ayudar toy urgio
Agradesco de antemano toda la ayuda
Atte.
Goomba

MaBoRaK · #11 (**permalink**) 16/04/2008, 06:19

loading...................

hazlo así

Código PHP:

  function catalogoModelo(objeto,producto, sub1, sub2) { 
    divCatalogo=objeto.getElementById('cat');     
    catalogoModeloAjax=nuevoAjax(); 
    catalogoModeloAjax.open("POST", "../../ajax/catalogo/catModelo.php", true); 
    catalogoModeloAjax.onreadystatechange = function (){ 
        if(catalogoModeloAjax.readyState == 4) { 
             
            var scs=catalogoModeloAjax.responseText.extractScript();    //capturamos los scripts  
            divCatalogo.innerHTML=catalogoModeloAjax.responseText; 
            scs.evalScript();       //ahora si, comenzamos a interpretar todo   
            Shadowbox.init();  
        } 
    } 
    catalogoModeloAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    catalogoModeloAjax.send("producto="+producto+"&sub1="+sub1+"&sub2="+sub2); 
     
}

connection closed.

Goomba · #12 (**permalink**) 16/04/2008, 11:34

gracias nuevamnet pero no funciono T__T
agradesco la ayuda
Mentras tendre que dejarla en una forma que no me gusta mucho con iframe.
Atte
Goomba

Unxky28 · #13 (**permalink**) 21/04/2008, 11:43

Hola?

Porque no Revisas la Documentacion de Shadowbox

http://www.shadowbox-js.com/

Ahy te explica como usarla....

Saludos.!