Problema con Ajax al cargar dato dentro de div

johannes13 · #1 (**permalink**) 05/01/2013, 01:33

Hola a todos, mi problema:
tengo 2 jsp uno que es registrar.jsp y otro mensaje.jsp

lo que sucede es que al usar ajax con ayuda de jquery intento cargar la pagina mensaje.jsp en un div que se encuentra dentro de registrar.jsp,

funciona, se muestra, el problema es que todo el contenido que jala mensaje.jsp (osea la parte dinamica) no se muestra me aparece "null" pero la parte estática si carga, creo que el problema es el ajax, porque cuando intento hacerlo de la forma común, osea que se cargue la pagina aparte(no dentro de un div) si me carga los mensajes dinamicos.

este es mi codigo:
http://www.subirimagenes.com/imagen-5-8220330.html

gracias por su respuestas

emprear · #2 (**permalink**) 05/01/2013, 06:32

@johannes13

tan difícil es poner ese código como código en el post (bbcode CODE ó HIGHLIGHT]
y no como una imágen?

Por que hacer un load del post?
el div pag_mensaje, lo tenés?, dónde manejás x y a?

En todo caso algo asi, pero sería una cosa o la otra

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
 
$('#procesarform').click(function() {  
var datos = $("#form_registro").serialize();
$.post('test.php',datos,function(respuesta){
alert(respuesta); //Mostramos un alert del resultado devuelto por el php
$("#mensaje").html(respuesta);
});
}); // fin click procesaform
 
$('#conload').click(function() {  
    var elNombre = $('#nombre').val();
    var elApellido = $('#apellido').val();
$('#mensaje').load('test.php',{'nombre': elNombre, 'apellido': elApellido})
});// fin click conload
 
 
}); //fin d.ready
//]]>
</script>
</head>
<body>
<form action="test.php" method="post" id="form_registro">
<p>
nombre: <input type="text" value="" name="nombre" id="nombre" /><br />
apellido: <input type="text" value="" name="apellido" id="apellido" /><br />
<input type="submit" name="procesarforn" value="enviar" id="procesarform" onclick="return false;">
</p>
<p>usando load<br />
<button id="conload" onclick="return false;">usar load() en lugar de post()</button>
</p>
</form>
 
 
<div id="mensaje">
    <!-- respuesta del envío del form -->
</div>
 
</body>
</html>

test.php

Código PHP:

Ver original<?php
echo "Nombre: " . $_POST['nombre'];
echo " - ";
echo "Apellido: " . $_POST['apellido'];
?>

Saludos

johannes13 · #3 (**permalink**) 05/01/2013, 09:41

gracias por eso de poner codigo no sabia :(

pero mi codigo lo hago en jsp osea java en php el codigo me funciona perfect osea el ajax si funciona.

Mi problema no es pasar variable a un div, el problema es que action me manda a un Servlet que recibe los parametros del formulario (eso lo hace bien, los recibe) y el jquery funciona hasta esa parte del $post.

el problema es que es Servlet manda un mensaje "Registro realizado" y ahi es donde esta el problema porque ese mensaje va a "mensaje.jsp" pero no lo carga.

gracias por tu respuesta

emprear · #4 (**permalink**) 05/01/2013, 15:41

Cita:

Iniciado por johannes13

gracias por eso de poner codigo no sabia :(

Después de ver
http://www.forosdelweb.com/f45/probl...-ajax-1030046/
http://www.forosdelweb.com/f127/jque...nciona-982981/
http://www.forosdelweb.com/f13/body-...nciona-943664/
http://www.forosdelweb.com/f16/cambi...io-as3-894295/

Podrías haber puesto el código esta vez... Es bastante molesto tener que analizar un código a partir de una imagen.
Volviendo al problema, se desconoce el código de mensaje.jsp, asi que tampoco se sabe que debería hacer, pero por lo pronto

$('#pag_mensaje').load('mensaje.jsp',function(a){} );

no recibe ningún dato ni y function(a) tampoco hace nada. Te sugiero revises el método
http://api.jquery.com/load/

E insisto, para que hacés el $post si después x no lo utilizás

El ejemplo que yo te puse no muestra solo como poner el resultado en un div sino como enviar las variables

{'nombre': elNombre, 'apellido': elApellido}

hay que leer con más atención

Saludos

johannes13 · #5 (**permalink**) 06/01/2013, 00:11

Gracias emprear, ueno voy a hacerlo mas sencillo entendiendo lo simple ya creo que podre hacer lo que requiero.

Ahora lo que simplemente quiero: es que al darle click a leer vaya al Servlet(solo quiero que haga eso) para que dentro de Servlet me mande un mensaje que cree ahi, se que podria hacerlo too en el index.jsp pero lo que quiero es que reciba un valor del Servlet.

Ahora intente de otra forma segun emprear me coloco,busque y creo que seria asi:

Index.jsp

Código:

<script>
$(document).ready(function() {
    $("#btn").click(function(e){
		e.preventDefault();
		$.ajax({
			url:'ServletMensaje',
			type:'post',
			success:function(msg){
				$("#respuesta").html(msg);
			}
		});
    });
});

</script>
</head>
<body>
<form action="" method="post">
	<input type="submit" value="leer" id="btn">
</form>

<div id="respuesta">Contenido</div>
</body>

ServletMensaje.java

Código:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		try{	
			PrintWriter respuesta=response.getWriter();
			respuesta.print("funciono el jquery");	
		}catch(Exception e){
			e.printStackTrace();
		}
	}

ahora la cosa es que cuando lo ejecuto me sale en el div id="respuesta" [object XMLDocument] , creo que eso quiere decir que no puedo coger bien el valor?

emprear · #6 (**permalink**) 06/01/2013, 17:30

Visto en forma aislada debería funcionar

Código HTML:

Ver original<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#btn").click(function(e){
        e.preventDefault();
        $.ajax({
            url:'ServletMensaje',
            type:'post',
            success:function(msg){
                $("#respuesta").html(msg);
            }
        });
    });
});
 
</script>
</head>
<body>
<form action="" method="post">
    <input type="submit" value="leer" id="btn">
</form>
 
<div id="respuesta">Contenido</div>
</body>
</html>

Por supuesto yo no sé de java ni como responde dicho archivo, para mi prueba yo solo cree un archivo de texto llamado 'ServletMensaje' y le puse un contenido, el cual fué recuperado en el div.
Probablemente debas agregar el parámetro
dataType: "text", a tu ajax ó
dataType: "html",
con lo cual está indicando que tipo de respuesta esperas (desde un php ó un html es html)pero en caso de un .java supongo que no, es decir

Código Javascript:

Ver original$.ajax({
            url:'ServletMensaje',
            type:'post',
            dataType: 'html',
            success:function(msg){
                $("#respuesta").html(msg);
            }
        });

Pero claro, no tengo forma de probarlo

Veo que has optado por $ajax en lugar de $load ó $post, pero tampoco veo parámetros a pasar. Por lo que esto

Código HTML:

Ver original<form action="" method="post">
    <input type="submit" value="leer" id="btn">
</form>

lo podés simplificar con
<button id="btn">Leer</button>
ó cualquier otro elemento semanticamente correcto que lleve por id "btn"

Y detalle final, a los efectos de $ajax no creo que sea lo mismo definir la url como
'ServletMensaje'
que como
'ServletMensaje.java'
Pero bueno, eso ya es tu especialidad

Saludos

johannes13 · #7 (**permalink**) 06/01/2013, 18:28

ohhhhhhhhhhh

muchas gracia choche, si eso faltaba

dataType: 'html'

lo puse y me salio, muchas gracias *(1,000,000), si ahora que ya se devolver un simple texto, ya ire probando con load, etc, si te doy la razón en php es distinto a java; te digo que en php mi codigo de 4 lineas me da hasta una respuesta de array en php pero cuando lo pase a java no

encima para subir imagenes y redireccionar a una carpeta en php es fácil pero en java ufff

pero ueno eso es otro cantar.

pdta. Gracias muchas gracias, lastima que no se puede subir puntos, si no te daria 1k jejej

emprear · #8 (**permalink**) 06/01/2013, 18:55

Que te haya salido es el mejor "punto"

Saludos