Bom dia amigos, estou desenvolvendo uma aplicação que eu tenho que fazer o uso do Ajax + JCrop... Só que quando eu mando buscar os dados de uma página JSP via AJAX... ele não me retorna a imagem para utilizar como JCrop(O arquivo JS do JCrop não "incorpora" ou "enxerga" o ID cropbox, fazendo com que a aplicação não funcione...
segue abaixo o código:
index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JCrop -</title>
<link rel="stylesheet" type="text/css" href="jcrop/jquery.Jcrop.css" />
<link rel="stylesheet" type="text/css" href="jcrop/demos.css" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jcrop/jquery.Jcrop.js"></script>
<script>
$(function() {
$('#cropbox').Jcrop({
aspectRatio : 1,
onSelect : updateCoords
});
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
<script>
function consultaEvento() {
var urlModificada = 'ajax.jsp';
$.ajax({
url : urlModificada,
dataType : 'html',
type : 'POST',
beforeSend : function() {
//o que ele faz antes de enviar
},
complete : function() {
//o que ele faz ao completar a requisição
},
success : function(data, textStatus) {
//o que ele faz se a requisição teve sucesso
$("#boxConsultaEvento").html(data); // Imprime o respose.getPrinwriter do servlet dentro da div que eu estou setando aqui. No caso (boxConsultaEvento)
openboxConsultaEvento('Consulta de Evento', 1);//
},
error : function(xhr, er) {
jAlert(er + ' ' + xhr.statusText + ' '
+ xhr.status, 'Error');
}
});
}
</script>
</head>
<body>
<input type="file" onchange="consultaEvento();" />
<div id="boxConsultaEvento"> </div>
</body>
</html>
ajax.jsp
<p>Recortar Imagem</p>
<!-- A imagem que será CROPADA, este ID é o mesmo do script da INDEX.JSP -->
<img src="imagem.jpg" id="cropbox" />
<!-- Formulário com os dados da "cropagem" -->
<form action="ImageCrop" method="get">
<input type="hidden" id="x" name="l" />
<input type="hidden" id="y" name="t" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="f" name="f" value="jpg" />
<input type="hidden" id="i" name="i" value="imagem.jpg" />
<input type="submit" value="Recortar"/>
</form>
Pergunta
rsmoraes
Bom dia amigos, estou desenvolvendo uma aplicação que eu tenho que fazer o uso do Ajax + JCrop... Só que quando eu mando buscar os dados de uma página JSP via AJAX... ele não me retorna a imagem para utilizar como JCrop(O arquivo JS do JCrop não "incorpora" ou "enxerga" o ID cropbox, fazendo com que a aplicação não funcione...
segue abaixo o código:
index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>JCrop -</title> <link rel="stylesheet" type="text/css" href="jcrop/jquery.Jcrop.css" /> <link rel="stylesheet" type="text/css" href="jcrop/demos.css" /> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jcrop/jquery.Jcrop.js"></script> <script> $(function() { $('#cropbox').Jcrop({ aspectRatio : 1, onSelect : updateCoords }); }); function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; </script> <script> function consultaEvento() { var urlModificada = 'ajax.jsp'; $.ajax({ url : urlModificada, dataType : 'html', type : 'POST', beforeSend : function() { //o que ele faz antes de enviar }, complete : function() { //o que ele faz ao completar a requisição }, success : function(data, textStatus) { //o que ele faz se a requisição teve sucesso $("#boxConsultaEvento").html(data); // Imprime o respose.getPrinwriter do servlet dentro da div que eu estou setando aqui. No caso (boxConsultaEvento) openboxConsultaEvento('Consulta de Evento', 1);// }, error : function(xhr, er) { jAlert(er + ' ' + xhr.statusText + ' ' + xhr.status, 'Error'); } }); } </script> </head> <body> <input type="file" onchange="consultaEvento();" /> <div id="boxConsultaEvento"> </div> </body> </html>ajax.jspMuito obrigado amigos...
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.