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.

  1. $('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:

  1. <script type="text/javascript">
  2. function modificarCapa(texto){
  3. $('micapa').innerHTML=texto;
  4. }
  5. </script>

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:

  1. <form action="#">
  2. <input type="button" value="Texto Uno" onClick="modificarCapa('Texto Uno');return false;"/>
  3. <input type="button" value="Texto Dos" onClick="modificarCapa('Texto Dos');return false;"/>
  4. <input type="button" value="Texto Tres" onClick="modificarCapa('Texto Tres');return false;"/>
  5. <input type="button" value="Texto Cuatro" onClick="modificarCapa('Texto Cuatro');return false;"/>
  6. </form>

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

  1. <script type="text/JavaScript" src="http://lineadecodigo.com/wp-content/uploads/2007/02/prototype.js"></script>

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…
http://lineadecodigo.com/jquery/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

*

*