Ir para conteúdo
Fórum Script Brasil
  • 0

Ajax + JCrop não funcionam juntos...


rsmoraes

Pergunta

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>

Muito obrigado amigos...

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...