Ajax síncrono com stopPropagation

[jotaNonato 0]

Estou desenvolvendo uma galeria de imagens na qual faço upload das fotos via ajax e após o upload carrego a imagem para fazer o recorte com o plugin Jcrop.

 

O processo está fluindo sem problemas.

O que a acontece que a requisição ajax assíncrona trava a aplicação e quando utilizo requisição síncrona o recurso de stopPropagation para de funcionar e a cada imagem seleciona duas, três são gravadas...

 

Alguém pode me ajudar...

[FreitasMT 29]

ta faltando detalhes que tal postar o código?

[jotaNonato 0]

freitasMT, segue o código utilizado:

 

function selecionaCampoImagem() {
    //dispara o evento
    $j('#galeria .containerFotos #boxFotos .boxForm .boxFotos .boxInputFoto .boxEscolheFoto').delegate('a[name=procura_img]', 'click', function(e) {
        e.stopPropagation();

        var posicao = $j(e.target).attr('data-posicao');
        $j('#form_crop').attr({'data-idli': posicao});

        $j('#carregaImagem #enviar_img').trigger("click");
        $j('#carregaImagem #enviar_img').change(function(e) {
            var valorFormUpload = this.value;
            if (valorFormUpload.length > 5) {
                $j('#carregaImagem').trigger('submit');
            }
        });
        
        //envio do formulário com ajax
        $j('#carregaImagem').submit(function(event) {
            event.stopImmediatePropagation();
            $j('#carregaImagem').ajaxSubmit({
                url: diretorioCentral() + 'cadastro_anuncio/grava_imagem',
                dataType: 'json',
                async: true,
                resetForm: true,
                clearForm: true,
                error: function(response, status, err) {
                    console.log(err);
                },
                beforeSend: function() {
                    $j('.container-show-aguarde,.overlay').show();
                    $j('.container-show-aguarde h5 span').html('Processando imagem.');
                    $j('.container-show-aguarde b').html('Carregando... <br /><img src="' + diretorioPublico() + 'img/ajax-loader.gif" />');
                    $j('.container-show-aguarde h5 a').hide();
                },
                success: function(responseText, statusText) {
                    $j('.container-show-aguarde,.overlay').hide();
                    $j('.container-show-aguarde h5 a').show();
                    if (isNumeric(responseText.id)) {
                        var imagem = responseText.titulo;
                        var caminhoImagem = diretorioPublico() + 'uploads/files/' + imagem;

                        $j('#manipulaImagem img').attr('src', caminhoImagem);
                        $j('#form_crop input[name=imagem]').val(imagem);
                        $j('#form_crop').attr({'data-idgaleria': responseText.id});
                        cropImagem(caminhoImagem);
                        
                    } else {
                        $j('.container-show-aguarde,.overlay').show();
                        $j('.container-show-aguarde h5 span').html('Erro ao enviar a Foto');
                        $j('.container-show-aguarde b').html(responseText.id);
                    }
                },
            });
            return false;
        });
    });
}

[FreitasMT 29]

ok.. você faz uploads de varias imagens ao mesmo tempo mas quer recortar uma por uma?

[jotaNonato 0]

Faço uma por uma!

Na primeira imagem funciona legal, depois ele multiplica as requisições...

[William Bruno 1501]

tira o .submit() de dentro da função selecionaCampoImagem()

[jotaNonato 0]

William Bruno, fiz como você disse e o problema persiste ele continua multiplicando os envios...

 

function selecionaCampoImagem() {
    //dispara o evento
    $j('#galeria .containerFotos #boxFotos .boxForm .boxFotos .boxInputFoto .boxEscolheFoto').delegate('a[name=procura_img]', 'click', function(e) {
        // $j('#galeria .containerFotos #boxFotos .boxForm .boxFotos .boxInputFoto .boxEscolheFoto a[name=procura_img]').click(function(e) {
        e.stopPropagation();
        
        //Exibe tela de loading ao escolher imagem
        $j('.container-show-aguarde,.overlay').show();

        var posicao = $j(e.target).attr('data-posicao');
        $j('#form_crop').attr({'data-idli': posicao});

        $j('#carregaImagem #enviar_img').trigger("click");
        $j('#carregaImagem #enviar_img').change(function(e) {
            var valorFormUpload = this.value;
            if (valorFormUpload.length > 5) {
                $j('#carregaImagem').trigger('submit');
            }
        });

        return false;
        
    });
}

function submit() {
    $j('#carregaImagem').submit(function(event) {
        event.stopImmediatePropagation();
        $j('#carregaImagem').ajaxSubmit({
            url: diretorioCentral() + 'cadastro_anuncio/grava_imagem',
            dataType: 'json',
            async: true,
            resetForm: true,
            clearForm: true,
            error: function(response, status, err) {
                console.log(err);
            },
            beforeSend: function() {
                $j('.container-show-aguarde,.overlay').show();
                $j('.container-show-aguarde h5 span').html('Processando imagem.');
                $j('.container-show-aguarde b').html('Carregando... <br /><img src="' + diretorioPublico() + 'img/ajax-loader.gif" />');
                $j('.container-show-aguarde h5 a').hide();
            },
            success: function(responseText, statusText) {
                $j('.container-show-aguarde,.overlay').hide();
                $j('.container-show-aguarde h5 a').show();
                if (isNumeric(responseText.id)) {
                    var imagem = responseText.titulo;
                    var caminhoImagem = diretorioPublico() + 'uploads/files/' + imagem;

                    $j('#manipulaImagem img').attr('src', caminhoImagem);
                    $j('#form_crop input[name=imagem]').val(imagem);
                    $j('#form_crop').attr({'data-idgaleria': responseText.id});
                    cropImagem(caminhoImagem);
                    return false;
                } else {
                    $j('.container-show-aguarde,.overlay').show();
                    $j('.container-show-aguarde h5 span').html('Erro ao enviar a Foto');
                    $j('.container-show-aguarde b').html(responseText.id);
                }
            },
        });
        return false;
    });
}

[William Bruno 1501]

pq vc continua atrelando o evento várias vezes.

 

Esqueça a função. O método jQuery(element).submit faz um addEventListener. Isso por si só já basta.

Não precisa do trigger, e nem de invocar essa rotina dentro da outra, é isso que está duplicando.