[SOLUCIONADO] innerHTML desde otro archivo HTML

[tonigomila1988]

Hola foreros web:

Estoy realizando una web para un proyecto final de un curso. Tengo un archivo index.html que contiene un div con id=content

Ese div cambiará de contenido según la opción del menú que pulsemos con la función de innerHTML de JS.

He visto que se puede usar de esta manera:

document.getElementById(‘content’).innerHTML=idCap a1

El problema es que tengo unas 40 capas de contenido aprox., por lo tanto, la carga de la web podría llegar a ser muy lenta.

Se me ocurrió hacer un archivo html aparte, en este caso lo llamaremos divs.html, donde guardar todos esos divs de contenido.

Mi duda es la siguiente: ¿se puede llamar a divs del archivo divs.html para cargarlos en el div content de index.html mediante el innerHTML? ¿Es posible que ya haya una librería jQuery que pueda realizar eso? Y si la hay,¿como se llama?

Muchas gracias por su atención.

[chuidiang]

Hola:

Lo que quieres se parece mucho a AJAX. Desde jQuery lo forma de hacerlo es $().load(), que es la función "sencilla" de jQuery para hacer un AJAX y reemplazar el contenido de un div (u otro elemento) con lo que lee del servidor (tu div.html)

Si en tu div.html hay varios div e identificas cada uno con un id, puedes hacer esto

$("#content").load("divs.html #unIdDentroDeDivHtml");

fíjate que hay un espacio entre divs.html y #unIdDentroDeDivHtml http://api.jquery.com/load/

Se bueno.

[tonigomila1988]

Hola chiudiang:

Supongo que en el método load() cuando ponemos el archivo divs.html se referirá a la ruta relativa del archivo, en caso de que no se encuentre en el mismo directorio no?

[chuidiang]

Por supuesto :)

[tonigomila1988]

Muchas gracias por tu ayuda chuidiang pero estoy aplicando lo que me dijiste y no obtengo ningún resultado.

¿Te ayudaria mas que pusiera el código que tengo puesto para que te oriente mejor?

[Reedyseth]

Hola tonigomila1988, como te lo puso chuidiang deberia de funcionarte, tal vez estes teniendo problemas con tu selector, claro que puedes pegar tu codigo asi te podemos ayudar mejor

[tonigomila1988]

Vale, he descubierto mi problema y es que no estoy consiguiendo que mi archivo js no enlaza bien con mi archivo HTML y por eso no da resultado.

No se si me falta alguna cosa pero dejo aquí lo que tengo puesto a ver si me falta algo.

Código HTML:

<script type="text/javascript" src="scripts/myScripts.js"></script>
 

Código HTML:

<div class="outListMenu"
                onclick="loadContent();"
                onMouseOver="this.className='overListMenu'"
                onMouseOut="this.className='outListMenu'">
                    <li>Explicación Básica</li>
 

Código Javascript:

$(document).ready();
function loadContent()
{
    $('#content').load('../contents.html #div1');
}
 

Muchas gracias por atenderme :)

[chuidiang]

Hola:

¿Te está funcionando o no?

Si no está funcionando, no tengo claro el onclick, no sé si al hacer click en el <li> (que es lo que realmente se ve), este click se propaga al <div> superior. Si no es así, va a ser dificil que hagas click en el div sin tocar el li. Quizás debas poner el onclick en el <li>.

Se bueno.

[tonigomila1988]

Indague un poco por los foros de aquí y encontré esta solución:

http://www.forosdelweb.com/f179/funcion-load-jquery-no-funciona-824180/

La adapte a mi problema y aún asi sigue sin funcionar.

[tonigomila1988]

Ahora mi código lo tengo asi:

Código HTML:

<li><a href="#div1">Explicación Básica</a></li>
 

Código Javascript:

$(document).ready(
                function()
                {
                    $('#mainMenu li a').click(
                        function()
                        {
                            var capa=$(this).attr('href');
                            var url= 'contents.html';
                            $('#content').load(url capa);
                            return false;
                        }
                    );
                }
            );
 

[chuidiang]

Hola:

Esto load(url capa) ... ¿lo tienes exactamente así?. Es complejo hacer nada en AJAX sin saber los fundamentos de javascript. Si quieres concatenar dos String debes sumarlos con +. Además, debes dejar el espacio

load (url + " " + capa)

Se bueno.

[tonigomila1988]

Vale, el problema de que no me funcionara era que tenia que subir mi proyecto a un hosting y alli la función load si funciona. Marco el tema como solucionado. Muchas gracias por atenderme estos dias.