Escribir un texto referenciado en un div

fbejaran · #1 (**permalink**) 15/03/2011, 11:37

Hola a todos, os escribo a ver si me podeis echar una mano.

Estoy haciendo una página web y tengo creado un calendario de eventos, pero en el código cuando pincho en una fecha me sale el evento en un pop up "alert"

onclick="alert(''+descripcion+'')

y me gustaría que el texto (evento) lo escribiera en un div que tengo justo debajo del calendario.

Me podríais ayudar con el código porque he intentado varias funciones para meterlo en el div pero no me funciona.

Muchas gracias por la ayuda

Naahuel · #2 (**permalink**) 15/03/2011, 11:51

Pues yo iría con jQuery. Es muy fácil. Te hice un ejemplo:

Código HTML:

Ver original<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
 
<script type="text/javascript">
    $(document).ready(function(){
        //al hacer click en insertar
        $('#insertar').click(function(){
            var texto = $('#texto-a-insertar').val();
            $('#insertame-texto').html('<p>'+ texto +'</p>');
        }); 
    });
 
</script>
 
 
</head>
 
<body>
<label for="texto-a-insertar">Texto a insertar: </label><input id="texto-a-insertar" />
<input type="button" id="insertar" value="insertar texto en div" />
 
<div id="insertame-texto">
 
</div>
</body>
</html>

Acá lo podés ver en funcionamiento:
http://jsbin.com/egini3

La idea es usar el muy útil .html() de jquery. Lo que hace es reemplazar el html interior del elemento que has obtenido con el selector. También podés lograr efectos parecidos con .append(), .after(), .before(). Todas bien documentadas en el sitio de jquery: www.jquery.com

fbejaran · #3 (**permalink**) 15/03/2011, 12:20

Muchas gracias Naahuel por tu respuesta, pero estoy intentando poner lo que me has dicho en mi código y no me funciona, (perdona mi torpeza). El texto que yo tengo (es un evento de un calendario) lo tengo en un archivo xml, y el código que tengo utiliza cuando se pincha la fecha un alert para mostrar la información:

for (i=0;i<xmlCalendario.length;i++){
var fecha = xmlCalendario[i].getAttribute('fecha');
if (fecha == cDia+ "-" + Mes + "-" + Anio){
var titulo = xmlCalendario[i].getAttribute('titulo');
var descripcion = xmlCalendario[i].getAttribute('descripcion');
textoCelda = '<a href="#" class="diacita" onclick="alert(\''+descripcion+'\');return false" title="'+titulo+'">' + cDia + '</a>';
textoTd = '<td class="celdacita">'
}

este es el código completo de esa parte, 'descripcion' es el texto que quiero poner. Intento poner el "$('#insertame-texto').html('<p>'+ texto +'</p>');" en lugar del alert, pero me da un error enorme. Se puede utilizar con la función "onclick"???

Gracias!!!

Naahuel · #4 (**permalink**) 15/03/2011, 12:36

Mmm, no entiendo bien lo que querés hacer entonces... Pero tal vez puedas hacer algo como esto:

En lugar de:
alert(\''+descripcion+'\');

Algo como
document.getElementById("id-del-div-a-insertar-texto").innerHTML= descripcion;

fbejaran · #5 (**permalink**) 15/03/2011, 14:29

Muchas gracias por tu consejo, lo he intentado pero no me funciona con el

document.getElementById("id-del-div-a-insertar-texto").innerHTML= descripcion;

pero seguiré intentándolo, muchas gracias!

ContactarNET · #6 (**permalink**) 15/03/2011, 16:11

donde dice "id del div a insertar texto", tenes que cambiarlo por el nombre del ID que le pusiste vos al elemento.

Si se llama div id="capa1"

lo cambias y pones:

document.getElementById("capa1").innerHTML= descripcion;

Saludos,
Gabriel.

registremeaca · #7 (**permalink**) 14/01/2013, 20:51

Gracias por responder pero sin el cast también me muestra mal el dato. He puesto el campo en tipo texto, tipo varchar, double, y el problema persiste. Bueno me acabo de dar cuenta que no iba a escribir esto aca pero no se como eliminarlo.