Modificar el contenido de una capa con Prototype

25/Feb/2007 Prototype , , , 4 Comentarios

En los últimos años de la web estamos tendiendo a interfaces de usuario con muchísima funcionalidad y mayor dinamismo. En todo este flujo de información, los elementos se van modificando y actualizando. Normalmente en forma asíncrona.

Es por ello que es bueno que sepamos como podemos hacer esto vía código y utilizando el framework Prototype. Prototype nos ayudará mediante sus funciones a llevar a cabo nuestro cometido.

Lo primero que tenemos que saber es como acceder a una capa (asumimos que ya existe la capa). Para ello utilizaremos la función $() pasándole el id de la capa como parámetro.

$('idcapa');

Como queremos reaprovechar el código vamos a crear una función JavaScript que reciba el texto a poner en la capa y actualice el contenido de la misma. El contenido de una capa se puede modificar mediante el atributo .innerHTML. De esta forma nos quedaría la siguiente función:

Ahora solo nos quedará utilizar esta función desde alguna parte de la página. En nuestro caso hemos utilizado unos simples botones. Los cuales, mediante el evento onClick lanzarán dicho método:

Todo muy sencillo. Y recordar el instanciar el framework Prototype al principio:

Visualizar el ejemplo | Descargar el código

4 comentarios en “Modificar el contenido de una capa con Prototype”

Víctor Cuervo

lineadecodigo

@CrazyBoSS,

Ya hemos publicado el artículo de modificar una capa con jQuery. Espero que sirva de ayuda…

Modificar el contenido de una capa con jQuery

Víctor Cuervo

Luis

HOLA

Víctor Cuervo

CrazyBoSS

muy buena la web!! nose como es que la gente no se ha animado a comentar en este post!!

bueno te digo lo que creo que puedes mejorar…

con este trozo de código cargas un html dentro del div
ya que lo de cargar el texto lo puedo hacer también jQuery (quizaás el html también pero no se como jeje)

function cargarPedidos(){
var x=jQuery(«#div_central»);
x.hide(0);
url=»pedidos.html»;
new Ajax.Request(url, {
method: ‘get’,
onSuccess: function(transport) {
$(‘div_central’).innerHTML=transport.responseText;
}
});
x.show(«slow»);
}
aki va la función extraida de una web que estoy haciendo.
por mi cortesia teneis una pequeña animación gracias a jQuery

xAU

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*