[Ayuda] Cargar en un div el contenido de un archivo externo

[raiderek]

Sucede que tengo un menú con jquery, entonces con un div se carga el contenido del menú y de paso le defino su ubicación. Todo normal. Algo como lo siguiente.

Código: [Seleccionar]

<div class='posicion' id="arriba">
 <ul class="topnav">
  <li>
        <a href="index.html">Inicio</a>
    </li>
    <li>
        <a href="#">Quiénes Somos</a>
        <ul class="subnav">
            <li><a href="empresa.html">Nuestra Empresa</a></li>
            <li><a href="equipo.html">Nuestro Equipo</a></li>
            <li><a href="historia.html">Historia</a></li>
        </ul>
    </li>
    <li>
        ...
        ...
        ...
        ...
    </li>
</ul>
</div>
Ese div se repite en cada página del sitio donde aparece el menú; y son muchas páginas Lo que quisiera es poder cargar ese menú desde un archivo externo para que sea fácil editar el menú desde un solo lugar. ¿Es posible?

Muchas gracias por su ayuda 

[g00mba]

con un iframe.

[salvadoresc]

secundo lo del iframe o tu lenguaje de programacion de lado de servidor favorito...

[raiderek]

Gracias a ambos
No se que tengo contra los iframes pero no me gusta mucho usarlos... Al final lo hice con jquery y la funcion .load() así:

Código: [Seleccionar]

<script type="text/javascript">
$(document).ready(function(){
$('#divmenu').load('menu.html');
});
</script>
Todo el menú lo puse en menu.html y donde aparecerá en la página así:

Código: [Seleccionar]

<div id="divmenu"></div>

[JaiMe]

@raiderek an excellent choice sir.

la cadena que pasas a metodo load te permite especificar que parte queres cargar del documento html. Es decir podes tener un documento HTML completo en menu.html y cargar solamente el contenido de algun div pasando un selector. Por ejemplo: $( '#target' ).load( 'menu.html #nav' );

Los iframes te pueden sacar de aguas, pero nunca los recomendaria... a menos que te interese soportar navegadores sin soporte Ajax que te permita cargar el HTML dinamicamente como lo has hecho aqui. El problema con los iframes es que tienen su propio browsing context lo que significa que cada iframe tienen su propio objeto global por ende propio set de constructores, esto no puede tener mucha importancia si sos diseñador o entusiasta a desarrollador web, pero cuando escribís aplicaciones web no triviales la complejidad al momento de manejar eventos y comparar objetos aumenta. TLDR: los frames no son malos, pero es necesario evaluar sus costos.

A parte juntar differentes secciones desde el lado del servidor y regresar todo junto en un documento html, existen herramientas como Dreamweaver que te permiten crear templates. Otra opción, lo que hago en muchos de mis projectos, es crear un build script que junte differentes partes y deploy la version final de tu webapp - esto puede sonar overkill si estas haciendo proyectos pequeños.

[Jaru]

a recomendar jquery venia y me topo con el tip de jaime que no me lo sabia Excelente!


cabe mencionar que una vez cargado el contenido externo en tu DOM ya lo podes manipular directamente mas al suave

[JaiMe]

a recomendar jquery venia y me topo con el tip de jaime que no me lo sabia Excelente!

cabe mencionar que una vez cargado el contenido externo en tu DOM ya lo podes manipular directamente mas al suave

En efecto mi estimado naruto. Podes pasar un callback como segundo argumento al metodo load. Dentro del callback - la función que se ejecuta una ves el documento ha sido cargado - tenes acceso al contenido HTML mediante el keyword this. 

Ejemplo: El codigo de mi extension para cargar la lista de los mensajes mas recientes

Código: [Seleccionar]

// Loading Recent Posts
  $('#svc-recent').load(homeUrl + 'index.php #adk_block_5 td:odd:lt(10)', function(){
    var temp = [];
    $(this).find('td').each(function(i, e){
      temp.push('<div>' + $(e).html() + '</div>');
    });
    $(this).html(temp.join(' '));
  });

[raiderek]

la cadena que pasas a metodo load te permite especificar que parte queres cargar del documento html. Es decir podes tener un documento HTML completo en menu.html y cargar solamente el contenido de algun div pasando un selector. Por ejemplo: $( '#target' ).load( 'menu.html #nav' );

Era lo que me faltaba! Muchas gracias.