Duda programación HTML

Archivado
Estoy haciendo una web de una tienda para la uni, y tengo el típico menú a la izquierda con las categorías, pinchas en una categoría y se abren en un contenedor <div> central los objetos que vende la tienda. Este proceso funciona con ajax, un javascript que permite que se abra contenido en un contenedor div sin modificarse el resto de la web en vez de cambiar la web entera.
Ahora viene el problema, una vez abro un producto, este sí se abre sin respetar los demás divs. Es decir, se quita la cabecera, los menús, etc, y se queda la página del objeto a mostrar en pantalla completa.

Os pongo dos screens para que sea más visual... imagen de la web con una categoria pinchada y luego con un objeto.

http://imgur.com/1oVzZ

http://imgur.com/fsvNd

No me digáis de hacerlo con PHP porque no, ni con iframes...

qué hago??
Gracias...
Sin ver nada de código poco podemos hacer.
Code Needed!
Os pongo el código del menú de la izquierda en la página principal (index.html)

<div id="left_content">
   <div class="title_box">PRODUCTOS</div><hr />

      <script src="ajax.js" type="text/javascript"></script>
          <a href="voladores/principal.html" rel="ajax-center_content"><div class="title_box">Voladores</div></a>

        <script src="ajax.js" type="text/javascript"></script>
          <a href="herbivoros/principal.html" rel="ajax-center_content"><div class="title_box">Herbívoros</div></a>

        <script src="ajax.js" type="text/javascript"></script>
          <a href="carnivoros/principal.html" rel="ajax-center_content"><div class="title_box">Carnívoros</div></a>
</div>


Y aqui el de la categoría "Herbívoros" (solo el <body>)

<body>
<div id="center_content">
   <div class="center_title_bar">Herbívoros</div>
       <div class="prod_box">
         <div class="center_prod_box">           
                 <div class="product_title">
                    <script src="ajax.js" type="text/javascript"></script>
                   <a href="herbivoros/details_triceratops_adult.html" rel="ajax-center_content">Triceratops</a></div>
                 <div class="product_img"><script src="ajax.js" type="text/javascript"></script>
                       <a href="herbivoros/details_triceratops_adult.html" rel="ajax-center_content"><img src="herbivoros/mid_pic_triceratops_adulto.jpg" alt="" title="" border="0" /></a></div>
                 <div class="prod_price"><span class="reduce">500&euro;</span> <span class="price">400&euro;</span></div>                       
            </div>
           
            <div class="prod_details_tab">
            <a href="buy.html" class="prod_buy">A&ntilde;adir a carrito</a>         
            <script src="ajax.js" type="text/javascript"></script>
            <a href="herbivoros/details_triceratops_adult.html" class="prod_details" rel="ajax-center_content">Detalles</a>           
            </div>                     
        </div>
       <div class="prod_box">

            <div class="center_prod_box">           
   <div class="product_title">
                 <script src="ajax.js" type="text/javascript"></script>
                <a href="herbivoros/details_piecito.html" rel="ajax-center_content">Piecito</a></div>
            <div class="product_img">
                    <script src="ajax.js" type="text/javascript"></script>
                       <a href="herbivoros/details_piecito.html" rel="ajax-center_content"><img src="herbivoros/mid_pic_piecito.jpg" alt="" title="" border="0" /></a></div>
                 <div class="prod_price"><span class="reduce">500&euro;</span> <span class="price">425&euro;</span></div>                       
            </div>
           
            <div class="prod_details_tab">
            <a href="buy.html" class="prod_buy">A&ntilde;adir a carrito</a>         
            <script src="ajax.js" type="text/javascript"></script>
            <a href="herbivoros/details_piecito.html" class="prod_details" rel="ajax-center_content">Detalles</a>               
            </div>           
            </div>
        <div class="center_title_bar"></div>                 
</div>
</div>
</body>


Supongo que con la parte <body> tenéis suficiente, pero no tengo inconveniente en poner más.
En el body que has copiado hay 15 aperturas de div y 16 cierres. De todos modos lo que haría falta ver es el ajax.js, que es lo que modifica el contenido. Probablemente no sea necesario incluir ese código delante de cada enlace, es la primera vez que veo algo así.

También haces un uso extraño de divs dentro de enlaces, deberías mirar un poco mejor el funcionamiento de CSS. Por ejemplo:

<a href="voladores/principal.html" rel="ajax-center_content" class="title_box">Voladores</a>

Especificando display:block para title_box te ahorras un div y tienes lo mismo.
Lo que no entiendo es por qué llamas tres veces el mismo archivo de javascript.
En todo caso ayudaría ver el codigo de javascript.
El problema es que no sé mucho JS aún, estoy aprendiendo, y hacer un archivo ajax yo sólo aún no sé. Lo de llamar al script cada vez es porque soy un burro y lo copié la primera vez y a partir de ahí copiaba y pegaba todo entero :/ Los divs están bien cerrados ya, no afectan.

Y bueno dejando de lado las mejoras y correcciones, que seguro que las hay (es mi primera web con css, js etc), os dejo el archivo ajax:

if (navigator.userAgent.search(/msie/i) > 0) {
   DatosIniciales();
} else {
   document.addEventListener("DOMContentLoaded", DatosIniciales, false);
}

function DatosIniciales() {
   var ListaVinculos = document.links;
   var TotalVinculos = ListaVinculos.length;
   var SubListaVinculos = new Array(); // Subgrupo de los vínculos que nos interesan
   var z = 0;
   for (n = 0; n < TotalVinculos; n++) {
      if ((ListaVinculos[n].attributes.rel != null) && (ListaVinculos[n].attributes.rel.value.search(/ajax/i)>= 0) ) {
         SubListaVinculos[z] = ListaVinculos[n];
         z++;
      }
   }
   AsignarEscuchas(SubListaVinculos);
}

function AsignarEscuchas(x) {
   var SubListaVinculos = x;
   var TotalSubListaVinculos = SubListaVinculos.length;
   for (n = 0; n < TotalSubListaVinculos; n++) {
      if (navigator.userAgent.search(/msie/i) >= 0) {
         SubListaVinculos[n].attachEvent("onclick", Ajax); // Explorer
      } else {
         SubListaVinculos[n].addEventListener("click", Ajax, false); // DOM
      }
   }
}

function Ajax(evento) {
   if (this.getAttribute) {
      var pagina = this.getAttribute('href');
      var propiedades = this.getAttribute('rel').split("-");
      evento.preventDefault();
   } else {
      var uri = evento.srcElement.getAttribute('href');
      var subpagina = evento.srcElement.getAttribute('href').split("/");
      var pagina = subpagina[subpagina.length-1];
      var propiedades = evento.srcElement.getAttribute('rel').split("-");
   }
   if (propiedades[0] == "ajax") {
      loadurl(pagina, propiedades[1]);
      return false;
   }
}

function loadurl(url, id){
   var pagecnx = createXMLHttpRequest();
   pagecnx.onreadystatechange=function()
   {
      if (pagecnx.readyState == 4 && (pagecnx.status==200 || window.location.href.indexOf("http")==-1))
      document.getElementById(id).innerHTML=pagecnx.responseText;
   }
   pagecnx.open('GET', url, true)
   pagecnx.send(null)
}

function createXMLHttpRequest() {
   var xmlHttp=null;
   if (window.ActiveXObject)
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest)
         xmlHttp = new XMLHttpRequest();
   return xmlHttp;
}
No soy un experto en el tema pero por lo que veo, el js examina todos los enlaces y hace que llamen a una función al hacerles click, que carga el contenido de la web dentro del div cuya id se corresponda con la segunda parte del atributo rel de cada enlace, por ejemplo rel="ajax-center_content" hará que ese enlace se cargue en el div de id center_content. Bien, ahí no veo ningún problema.

Por lo que entiendo de tu primer mensaje, cargas la página y al hacer click en cualquier sección, funciona bien, pero cuando haces click en los productos de esa sección, funciona mal. Es decir, funciona bien con todos los enlaces que aparecen en primer término, pero no con los enlaces que se cargan después en center_content. Creo que el problema se debe a la forma en que asignas los eventos click a los enlaces, se hacen al cargar la página pero no en las páginas que se cargan asíncronamente. Es decir, tienes que añadir el evento click a las páginas que carga ajax. No sé si me he explicado [ayay]

Bien, cómo hacerlo es lo que no sé. Podrías modificar el js para que, al final de la función loadurl, vuelva a llamar a la función DatosIniciales(), o podrías hacer una función que realice la misma tarea únicamente sobre los enlaces que estén dentro del div cuya id es center_content. No sé si se pueden asignar varios eventos (on)click al mismo elemento (en cuyo caso te podría dar problemas) o si un evento click sustituye al anterior asignado, prueba a ver, imagino que sustituirá. Otra opción sería añadir manualmente onClick, aunque dificultaría el mantenimiento de la página.

No sé si te he aclarado o solucionado algo :P Hace mucho que no toco esto.
amuchamu escribió:No soy un experto en el tema pero por lo que veo, el js examina todos los enlaces y hace que llamen a una función al hacerles click, que carga el contenido de la web dentro del div cuya id se corresponda con la segunda parte del atributo rel de cada enlace, por ejemplo rel="ajax-center_content" hará que ese enlace se cargue en el div de id center_content. Bien, ahí no veo ningún problema.

Por lo que entiendo de tu primer mensaje, cargas la página y al hacer click en cualquier sección, funciona bien, pero cuando haces click en los productos de esa sección, funciona mal. Es decir, funciona bien con todos los enlaces que aparecen en primer término, pero no con los enlaces que se cargan después en center_content. Creo que el problema se debe a la forma en que asignas los eventos click a los enlaces, se hacen al cargar la página pero no en las páginas que se cargan asíncronamente. Es decir, tienes que añadir el evento click a las páginas que carga ajax. No sé si me he explicado [ayay]

Bien, cómo hacerlo es lo que no sé. Podrías modificar el js para que, al final de la función loadurl, vuelva a llamar a la función DatosIniciales(), o podrías hacer una función que realice la misma tarea únicamente sobre los enlaces que estén dentro del div cuya id es center_content. No sé si se pueden asignar varios eventos (on)click al mismo elemento (en cuyo caso te podría dar problemas) o si un evento click sustituye al anterior asignado, prueba a ver, imagino que sustituirá. Otra opción sería añadir manualmente onClick, aunque dificultaría el mantenimiento de la página.

No sé si te he aclarado o solucionado algo :P Hace mucho que no toco esto.

muchas gracias, a ver si este fin de semana me lo miro por si puedo conseguirlo. También me han comentado que podría hacerlo en jQuery más fácil, así que he de mirarlo...
socram8888 está baneado por "incumplimiento términos y condiciones de uso"
No creo que tenga que ver con el fallo, pero te recuerdo que los scripts se procesan linealmente desde el principio hasta el final. Hacer un addEventListener con una función (datosIniciales) que todavía no ha sido definida no es una buena idea.
¿Puedes subir la página en algún host, aunque sea Dropbox para ir probando a ver como funciona?
La verdad es que así mirando sólo los código por separado no logro detectar bien todas las relaciones entre el HTML y el Javascript.

Y bueno el jQuery te facilita la compatibilidad entre IE y todos los demás, pero fuera de eso, no cambia muchas las cosas, excepto por la parte que escribes más corto el código.

Pero en general uses jQuery o no, siempre es recomendable que escribas todo el código en lugar de copiar y pegar pedazos, porqué luego no entiendes como funciona lo que tienes, en especial si el código no está comentado. Créeme veces se pierde más tiempo intentando entender lo que programaron otros, que programando uno mismo desde cero.
Por ejemplo en este javascript que pegaste, los únicos comentarios que ha son para diferenciar la parte de IE con un documento DOM (todos los demás navegadores), que justamente es lo más fácil de entender.


Edito, voy a ir agregando algunos comentarios, por si a alguien se le hace más fácil.

   

if (navigator.userAgent.search(/msie/i) > 0) {
       DatosIniciales(); //Carga la función DatosIniciales en IE
    } else {
       document.addEventListener("DOMContentLoaded", DatosIniciales, false); //Carga la función DatosIniciales, cuando el documento HTML está completo (mozilla/webkit)
    }

    function DatosIniciales() {
       var ListaVinculos = document.links; //La variable ListaVinculos, almacena todos los enlaces del documento
       var TotalVinculos = ListaVinculos.length; //Almacena en un número entero la cantidad de enlaces que hay
       var SubListaVinculos = new Array(); // Subgrupo de los vínculos que nos interesan
       var z = 0;
       for (n = 0; n < TotalVinculos; n++) {
          if ((ListaVinculos[n].attributes.rel != null) && (ListaVinculos[n].attributes.rel.value.search(/ajax/i)>= 0) ) {
             SubListaVinculos[z] = ListaVinculos[n]; //En el array SubListaVinculos, almacena todos los vinculos, cuyo atributo reel no sea nulo y …¿?
             z++;
          }
       }
       AsignarEscuchas(SubListaVinculos);
    }

    function AsignarEscuchas(x) { //Según entiendo, esta función llama a la función Ajax cuando se da clic en un link con los atributos deseados.
       var SubListaVinculos = x;
       var TotalSubListaVinculos = SubListaVinculos.length;
       for (n = 0; n < TotalSubListaVinculos; n++) {
          if (navigator.userAgent.search(/msie/i) >= 0) {
             SubListaVinculos[n].attachEvent("onclick", Ajax); // Explorer
          } else {
             SubListaVinculos[n].addEventListener("click", Ajax, false); // DOM
          }
       }
    }

    function Ajax(evento) { //El evento es click según entiendo
       if (this.getAttribute) { //El this debe de ser el enlace al que se ha dado el click
          var pagina = this.getAttribute('href');
          var propiedades = this.getAttribute('rel').split("-"); //¿La variable propiedades obtiene el atributo "rel" del enlace que fue clickeado, pero cambia el guión por coma?
          evento.preventDefault();
       } else {
          var uri = evento.srcElement.getAttribute('href');
          var subpagina = evento.srcElement.getAttribute('href').split("/");
          var pagina = subpagina[subpagina.length-1];
          var propiedades = evento.srcElement.getAttribute('rel').split("-");
       }
       if (propiedades[0] == "ajax") {
          loadurl(pagina, propiedades[1]);
          return false;
       }
    }

    function loadurl(url, id){
       var pagecnx = createXMLHttpRequest();
       pagecnx.onreadystatechange=function()
       {
          if (pagecnx.readyState == 4 && (pagecnx.status==200 || window.location.href.indexOf("http")==-1))
          document.getElementById(id).innerHTML=pagecnx.responseText;
       }
       pagecnx.open('GET', url, true)
       pagecnx.send(null)
    }

    function createXMLHttpRequest() {
       var xmlHttp=null;
       if (window.ActiveXObject)
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       else if (window.XMLHttpRequest)
             xmlHttp = new XMLHttpRequest();
       return xmlHttp;
    }
10 respuestas
Archivado
Volver a General