Agregar codigo html a pagina sin refrescar

chefnelone · #1 (**permalink**) 17/03/2007, 07:00

Hola a todos

Necesito un consejo antes de seguir adelante con mi trabajo.

En este codigo tengo un div que es VISIBLE y luego todos los otros debajo que son INVISIBLES que se haria visibles usando javascript cuando el usuario presiona un boton

El tema es que el usuario puede ir agregando los div que vaya necesitando.
Ya usé esta técnia en otro proyecto y el problema fue que al final el tamaño del archivo es muy grande.

Yo tengo conocimientos de javascript y php-mysql.
Estoy seguro que esto se puede hacer de otra manera: digamos que haya UN SOLO DIV y luego con PHP ir creandoy anexando el codigo html para crear los nuevos DIVs que el usuario vaya necesitando.( todo esto sin que se recargue TOTALMENTE la pagina SINO SOLO LOS DIV QUE SE AGREGAN)
Por lo que he leido AJAX puede hacer este tipo de cosas. Pero no tengo idea por donde empezar la busqueda.

¿Habrá por ahí algun codigo parecido para hacer esto? (aunque lo tenga que reformar un poco?

--CODIGO de ejemplo--

<body>
<div id="visible"
contenido
</div>

<p>BOTON PARA AGREGAR DIVs</P>

<div id="INvisible1" style="display:none;" >
contenido
</div>

<div id="INvisible2" style="display:none;" >
contenido
</div>

<div id="INvisible3" style="display:none;" >
contenido
</div>

<div id="INvisible4" style="display:none;" >
contenido
</div>

<div id="INvisible5" style="display:none;" >
contenido
</div>

<div id="INvisible6" style="display:none;" >
contenido
</div>

<div id="INvisible7" style="display:none;" >
contenido
</div>

<p>BOTON</P>

</body>
</html>

gracias

stock · #2 (**permalink**) 18/03/2007, 14:24

aqui un exelente tutorial para comenzar

http://www.w3schools.com/ajax/default.asp

have funnnnnnnnn

eduardo34 · #3 (**permalink**) 19/03/2007, 10:15

Amigo, para poder agregar divs en html, puedes hacer lo sig.:

<script type="text/javascript">
function adddiv( id ){
var parent = document.getElementById( id );
parent.innerHTML="<div>texto</div>";
}
</script>

si quieres que se cicle, has lo siguiente:
<script type="text/javascript">
a = 0;
function adddiv( id ){
var parent = document.getElementById( id );
parent.innerHTML="<div>texto<button onclick=\"adddiv('d_" + a + "')\">Agregar division</button><div id='d_" + a + "'></div></div>";
a++;
}
</script>
<div id="a">

</div>
<button onclick="adddiv('a')">primer div</button>

espero que te sirva
Saludos!

chefnelone · #4 (**permalink**) 19/03/2007, 14:01

gracias eduardo34
pero ....
creo que no lo he pillado.
Donde coloco el div que quiero duplicar. Me harias un ejemplo mas desarrollado.

chefnelone · #5 (**permalink**) 19/03/2007, 14:19

gracias stock

muy bueno el tutorial.

coverapido · #6 (**permalink**) 20/03/2007, 16:01

insisto que con iframe se logra el mismo efecto y no te complicas con esa funcion que a veces falla cuando el server esta muy saturado o que se tengan deshabilitadas los javascript en el browser!!

chefnelone · #7 (**permalink**) 21/03/2007, 13:37

gracias coverapido

me darias una ejemplo de como usarlo (iframe). Digamos para insertar divs de uno en uno (debajo del que seria el original-primero)