Comunidad de diseño web y desarrollo en internet online

cargar html dentro de div

Citar            
MensajeEscrito el 23 Ene 2011 10:17 am
Hola a todos,

Indagando por el foro y la red en general, sobre como cargar html dentro de mi página (es decir, tengo cabecera arriba con menú y abajo del navegador submenús y en el centro los contenidos, pues cargar en el div del centro los diferentes contenidos y dejar el resto de divs "quietos") ...

Pues navegando he visto que hay varias formas, si con php, con ajax, con iframe, con jquery... y la verdad me ha hecho un lío... ¿cuál es la mejor forma de cargar los contenidos? ¿algún tuto al respecto?

Gracias.

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Ene 2011 03:47 pm
es que todo depende del uso particular del caso. Normalmente, a mi preferencia, uso iframes para llamar contenidos externos, pero si se trata de un menú, es mejor incluirlos directamente en el código, sin ajax ni nada. De pronto con php, para que el código llegue armado al cliente. Pero si entiendo bien, ¿lo que quieres es dejar el header pegado arriba en el navegador?

Sería mejor si nos explicas cual es el caso específico, para qué necesitas lo que pides y así podríamos ayudar de mejor manera :D

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 23 Ene 2011 04:42 pm
Pues intentaré explicarme mejor a ver... muestro esta imagen base:

[img][/img]

Es la estructura de una web muy básica. Tengo arriba el header, abajo unos pequeños menús, y en el centro dónde se va cargando todo el contenido.

Pues bien hace años que no toco el html, he estado un tiempo con flash, y en flash, al pulsar un boton del menú, llamaba a una peli externa (que en el caso html sería un html diferente o un php) y la cargaba en un contenedor situado en el centro (o dónde quería).

Entonces, yo tengo armado el html con divs, tengo un div general que encuadra todo, y luego esos tres divs que muestra la imagen. Pues bien hasta ahora lo estaba haciendo en el menú, al pinchar en una opción, hacía un href y punto y se recargaba toda la página entera, claro está que la página nueva era igual que la index y sólo cambiaba el contenido del centro.

Pues creo que sería más efectivo, sin tener que recargar toda la página de nuevo, sino que el header y el menu de abajo que ya se cargó una vez, se queden ahí, y yo ir cambiando los contenidos del centro. Si no estoy equivocada claro.

Pues para hacer eso, e indagando por la red me he encontrado con multitud de posibilidades y lejos de aclararme me he líado un poco más...

El tema del iframe (lo tenía descartado practicamente) pq usar frames creo que no es muy recomendable, si mal no recuerdo... por lo que he leído es posible q la mejor opción sea jquery?? ... no sé... por eso oos pido opinión al respecto, porque ando un poco perdida...

Gracias.

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Ene 2011 05:14 pm
vale... creo entender qué pasa. Antes que nada, la imagen no me cargó :?

Yo al comienzo también estaba un poco en desacuerdo con recargar toooda la página, pero si te das cuenta, eso una práctica muy normal en la web. Recargar de nuevo el código no es un gran problema, porque el código completo de una página llega en poco tiempo, a fin de cuenta es texto plano muy liviano, y las imágenes que se cargan de nuevo quedan en caché, entonces tampoco hay tráfico por este lado. Total, recargar la página cada que uno salta de una sección, no es algo que debamos evadir con gran esfuerzo.

Pero si es muy práctico separar los trozos de código que se repiten en todo el sitio, como los menú, el footer y los sidebar, y juntarlos todos pero en el lado del servidor, mas no en el lado del cliente. Para eso, lo que se hace normalmente es poner esos trozos de código que te mencionaba en archivos aparte, y luego incluirlos en el archivo de la página.

Para eso se usa en php lo siguiente:

Código PHP :

<?php include "directorio/menu_include.php"; ?>  //Esto llama el archivo, que siendo un "include", el archivo puede o no existir y el codigo se sigue ejecutando

<?php require "directorio/otro_include.php"; ?> //este exige la existencia del archivo, si no existe, el código genera error y se detiene


Esto es muy útil porque si hay determinados cambios, por ejemplo en el menú, no tienes que cambiar en todas las páginas sino que solo el cambio en ese archivo se va a reflejar en todo el sitio.

Espero que halla podido responder bien a tu pregunta ^_^ si tienes mas dudas nos comentas y seguimos tratando el tema

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 23 Ene 2011 07:18 pm
Si, más o menos :) ... entonces es mejor hacer el php, pero si lo que quiero es cargar una imagen en ese div-contenido, o una pequeña página html ¿como sería?

Entiendo lo del include, pero no consigo saber como hago para que si ya tengo los tres divs principales con su respectivos contenidos (header, contenido y submenus-abajo)... para que hacer clik en el boton del menú, se "elimine" el contenido actual que hay en el div contenedor y se cargue otra página html (preparada a parte) o una imagen simple pero que se cargue en ese preciso div. No sé si me explico bien, pongo un simil de flash, que es de lo que más entiendo y quizás así me explique mejor.

En Flash, pulso un botón y se carga en un mc contenedor una peli externa, y al pulsar otro botón, le digo que se cargue en ese contenedor (que tiene un nombre en concreto) y en el mismo nivel, por lo que el que se carga nuevo al estar en el mismo nivel que el anterior, lo que hace automáticamente es sustituir al viejo y toda la programación va en el mismo botón, sólo tengo q pasarle como parámetros, el nombre del contenedor, la ruta de la pelicula externa y el nivel.

¿En html es así? o la forma de hacerlo es diferente? Y como sería ese script en html?

Siento preguntar tanto... es que ando bastante perdida. Lo de los includes si lo entiendo porque he tocado algo el php, pero el html hace años que no...

PD: Si se sigue sin entenderme hago un gráfico, que quizás se vea mejor así las ideas...

PD1: Entiendo lo que me dices de que actualmente si se carga las páginas al completo, lo he probado y es bastante rápido, no hay problema, pero me pica la curiosidad de si sería mejor de esta otra forma o no...

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2011 04:39 am
Vale, en realidad yo también uso bastante lo que dices. Cuando no se trata de cambiar enteramente de sección, sino modificar pequeñas partes de la página, es mejor usar Ajax, por ejemplo, con una galería de imágenes en la que se cambia solo la imagen que uno selecciona, y no la sección completa. En este caso si está muy bien hacer uso de este método. Te voy a dejar dos códigos que he usado para tales fines.

Antes que nada, he de aclarar que aplicar llamados por Ajax "en limpio" puede volverse complicado, por lo que siempre se recomienda el uso de librerías que facilitan el trabajo, y para estos casos yo siempre uso jQuery. Para llamar esta librería, incluyes este codigo en el header:

Código Javascript :

<script src="<txp:site_url />layout01/jquery-1.4.3.min.js" type="text/javascript" charset="utf-8"></script>


La versión creo que ya va por la 1.4.4... eso que alguien me lo confirme :P

Para llamar un contenido X o Y, puedes usar lo siguiente:

Código Javascript :

$.get("URLdeTuArchivo.html", function(data) {
  $('#idDiv').html(data);
});


Entonces, aca hay un par de cosas que hay que conocer para entender el código:

  • jQuery selecciona los elementos del DOM mediante la sintaxis $(elemento), y ese "elemento" se selecciona igual que cuando uno aplica estilos CSS. Por ejemplo, un div con id "contenedor", se selecciona asi: $("#contenedor") y un div con clase "contenedores" se selecciona $("div.contenedores"). Este último acciona sobre todos los divs con esa clase.
  • La sintaxis objeto.html(data) lo que hace es insertar lo recibido como html. Si uno va a insertar solo texto, puede usar mejor text()
  • el primer parámetro de $.get() es la URL del archivo con el código o el texto que vas a llamar, y la segunda es el conjunto de instrucciones que se ejecutan cuando todo el contenido se cargó exitosamente.
  • La función que se va como segundo parámetro, tiene a su vez un parámetro, que equivale a la información recibida. En este caso, se llama "data"


Esto lo puedes colocar como una función, que puede quedar así:

Código Javascript :

function cargarContenidos(urlDatos){
$.get(urlDatos, function(data) {
  $('#idDiv').html(data);
});
}


y luego en cada botón

Código HTML :

<a href="javascript:cargarContenidos('url1.html')">Boton 1</a>
<a href="javascript:cargarContenidos('url2.html')">Boton 2</a>


Ahora, para las imágenes, al cosa es un poquito diferente. Va algo asi:

Código Javascript :

var img = new Image();
$(img).load(function(){
   $("#divContenedor").html(this);
}).attr('src',"carpeta/imagen.jpg");


La mecánica es parecida, pero la URL de la imagen va al final, donde dice ("src","urlImagen.jpg"). Lo bueno de este método es que pone a descarcar la imagen, y cuando ya está lista, entonces hace lo que dice la funcion de adentro. Con eso puedes controlar que muestre un aviso de espera o similares. Esto igualmente lo puedes encerrar en una función y funciona igual que con el anterior.

Vale ^^ creo que me extendí un poquito, pero ojalá halla quedado claro. Que no te de pena preguntar que para eso estamos! :D Si acaso sigue estando muy complicado, que me mandas un PM y te doy mas datos XD

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 24 Ene 2011 04:45 am

gosunkugi escribió:


Código Javascript :

<script src="<txp:site_url />layout01/jquery-1.4.3.min.js" type="text/javascript" charset="utf-8"></script>


:shock: rayos! copié y pegué de uno de mis proyectos... en realidad esto tiene un tag de Textpattern... no le haga caso a esto :lol:

en realidad sería así para tomarlo desde el servidor de google

Código Javascript :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery. min.js" type="text/javascript" charset="utf-8"></script>

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 24 Ene 2011 12:20 pm
Muchas gracias!!! gosunkugi!! :D ... En principio te has explicado muy bien, y me ha quedado más o menos claro, como no tengo ni idea de ajax ni de la librería jquery, creo que voy a pasar unos diitas estudiando algunos tutos que hay aqui en el foro, junto con todo lo que me has explicado (porque si no hago esto, te voy a estar preguntando toda la semana jeje, así que mejor prefiero estudiarlo a fondo) y si veo que algo no lo consigo sacar en claro, te avisaré sin duda! :D ...

Muchísimas gracias!! Me voy a poner a estudiar a ver si lo consigo entender... y si no... tendrás noticias mías jeje...

Mil gracias de verdad, por todo! :D

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2011 07:27 pm
de nada Hapki ^^
yo tengo un librito muy chévere de donde aprendí lo que sé de jquery, se llama "jQuery from novice to ninja". La pega es que está en ingles. Si lo puedes leer, te pasas unos dos días deborandote ese libro y quedas lista para hacer maravillas con jquery :D

si te interesa, me cuentas y te lo envío de alguna manera.

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 26 Ene 2011 01:29 pm
Eyy gracias!! No sé yo si en inglés sabré enterarme de todo jeje.. algunos tutos por la red y eso si he leído en inglés, pero un libro entero no sé yo jeje... de todas formas voy a buscar info sobre ese libro quizás consiga encontrar su versión en español por aqui y me lo pillo...

Muchas gracias por todo! Eres muy amable! :D

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Ene 2011 03:28 am
jeje ^^ a mi me agrada leer libros dedicados a las cosas que voy necesitando en cuanto a programación y afines, porque empiezan por temas muy básicos y van progresando la complejidad. Los tutoriales que se ven en inet, que son cosas que no están contextualizadas en un aprendizaje progresivo, o pues en su defecto, hay de todos los niveles pero pues hallar los que son buenos para el propio nivel no es tan fácil.

Y pues te cuento que cuando pedí ayuda en este foro también recibí comentarios que me sirvieron, entonces yo trato de hacer lo mismo ^^ si tienes algo qué aportar, hazlo también! :D

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 29 Ene 2011 09:15 pm
Por supuesto!! y gracias de nuevo! :D

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Feb 2011 02:44 pm
Yo tengo una duda y nose como arreglar esto. Quiero cargar 2 etiquetas simultaneamente pero ajax parece no soportar esto correctamente, quizá estoy haciendo algo mal.
************de aquí proviene mi lanzamiento:click*********
<li id="caja_ext2"><a href="javascript:Envia2(<?php echo $menusup2[0];?>,'menucarga',<?php echo $menusup2[1];?>,'cuerpo')" title=<?php echo $menusup2[2];?>><?php echo $menusup2[3];?></a></li>

*********************funciones que uso********
function newAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function setContent(page, container)
{
//new Ajax.Updater(container, "/pages/"+page);
new Ajax.Updater(container, page);
}

function Envia2(_pagina,capa,_pagina2,capa2) {
setContent(_pagina,capa);
setContent(_pagina2,capa2);
}
*****son js de scriptaculous y prototype***por eso esta resumidisimo****

Por prometion

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Feb 2011 09:08 am
Hola buenas, tengo una plantilla CSS que me he bajado, tiene un div con un menu y un div con el contenido, he probado el codigo de arriba pero no hay manera, lo poesteo aqui a ver si alguien puede ayudarme.

Gracias:

<html>
<head>
<title>Flower</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery. min.js" type="text/javascript" charset="utf-8"></script>
<script>
function cargarContenidos(urlDatos)
{
$.get(urlDatos, function(data)
{
$('#idDiv').html(data);
});
}
</script>

</head>
<body>

<div id="wrap">

<div id="header">
<h1><a href="#">Titulo de la web</a></h1>
<h2>Web en pruebas</h2>
</div>

<div id="right">

<h2><a href="#">Licencia terminos de uso</a></h2>
<div class="articles">
Flower is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template.
This template is allowed for all uses, including commercial use, as it is released under the <strong>Creative Commons Attributions 2.5</strong> license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!
<br /><br />
<img src="images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
</div>
<h2><a href="#">Titulo</a></h2>
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
</div>
</div>

<div id="left">
<h3>Categorias :</h3>
<ul>
<li><a href="#">Enlace1</a></li>
<li><a href="javascript:cargarContenidos('ficha.html')">Ficha</a></li>
<li><a href="#">Enlace3</a></li>
<li><a href="#">Otro</a></li>
<li><a href="#">Otro</a></li>
<li><a href="#">Otro</a></li>
</ul>

Por Rozas

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Jun 2012 03:35 pm
Hola Amigos.
Tengo una pregunta.

Ya logré incluir la información en el DIV usando require; sin problemas; pero cuando uso jQuery; se pierden todos los objetos que tengo definidos en PHP.
En si, lo que incluyo en el DIV es un archivo .PHP; en el que uso diversas instancias, como por ejemplo para conectarme a BD.
Cuando incluyo en el DIV a través de php usando require, funciona bien; pero cuando uso la función que ustedes indica de jquery; me manda errores,

Como puedo hacer para que cuando use la función jQuery; para cargar el contenido; no pierda las instancas que estoy utilizando en PHP.

Saludos

Por jaorsoftware

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Jun 2012 02:33 am
sobre jquery ahi unos videocursos en internet buscarlos, como video2brain y videotutoriales

Por Eclypse

Claber

118 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.