3

Tenho a seguinte tabela:

tabela formulário

Esta tabela está dinâmica e funciona tipo formulário, ou seja, o utilizador ao clicar Novo é criada uma nova linha com os campos dinâmicos. Ao clicar Salvar Dados todas as linhas criadas pelo utilizador são guardadas. Até aí tudo bem. Mas o que estou a fazer é dar a possibilidade de o utilizador inserir Ficheiros, para tal tenho uma input type="file" também dinâmica para cada linha (esta a hidden), onde vai carregar os dados para o controller a partir de um ajaxSubmit (estou a trabalhar em ASP MVC 4).

O meu problema agora é: Ao fazer o ajaxSubmit, o javascript está a sobrepor os dados dos id's dinâmicos que tenho para a input file. Segue a função:

function submitDocCertISCC(numID, DivNrFicha) {
$("#formSaveFile" + numID + "_" + DivNrFicha + "").ajaxSubmit({
    type: "POST",
    url: $("#formSaveFile").attr("action"),
    clearForm: true,
    data: { numID: numID, DivNrFicha: DivNrFicha }
});
}

Eu chamo a função a cima ao percorrer um ciclo for onde vou guardar cada linha da tabela de cada vez, e funciona bem. Agora chega a parte de gravar o ficheiro e só grava o ficheiro da última linha. Pelo que me parece, ele vai para o próximo passo do ciclo for sem antes acabar de fazer o ajaxSubmit.

Como é que posso contornar isto e que ele obrigue a não saltar no ciclo sem terminar esta função?

EDIT

Ciclo For:

for (var i = 1; i <= window.numAutoDeclaracaoISCC; i++) {

$.getJSON("/Terceiros/saveAutoDeclar", { // Gravar dados da linha
                DivNrFicha: DivNrFicha, dtaEmissao: dtaEmissao, NumAutoDeclar: NumAutoDeclar, DtValid: DtValid, EmitidoPor: EmitidoPor,
                Anexo: Anexo, DtEntregaTec: DtEntregaTec, DtRecepcao: DtRecepcao
            },
            function (result) {
                submitDocCertISCC(i, DivNrFicha); // Fazer submit do form com o ficheiro

            });
        }
3
  • Pode mostrar o contexto mais amplo do código?
    – bfavaretto
    Commented 25/02/2014 às 14:36
  • Actualizado. No ciclo for não coloquei a carregar os dados a enviar no .getJSON, penso que não é importante para a questão Commented 25/02/2014 às 14:45
  • Aha, agora está claro o problema.
    – bfavaretto
    Commented 25/02/2014 às 14:50

2 Respostas 2

1

O problema é mesmo o que você suspeitava: como a chamada ajax é assíncrona, seus callbacks estão sendo chamados após o término do ciclo for, quando o valor de i será window.numAutoDeclaracaoISCC. Isso ocorre porque o escopo de i é um só, o do contexto onde esse código está (no JavaScript, não existe escopo de bloco, somente de função).

Uma solução simples é adicionar uma função intermediária para capturar (close over) cada valor de i:

for (var i = 1; i <= window.numAutoDeclaracaoISCC; i++) {
    // assume que DivNrFicha é definido aqui
    $.getJSON("/Terceiros/saveAutoDeclar", { // Gravar dados da linha
            DivNrFicha: DivNrFicha,
            dtaEmissao: dtaEmissao,
            NumAutoDeclar: NumAutoDeclar,
            DtValid: DtValid,
            EmitidoPor: EmitidoPor,
            Anexo: Anexo,
            DtEntregaTec: DtEntregaTec,
            DtRecepcao: DtRecepcao
        },
        (function(i, DivNrFicha) {
            return function (result) {
                submitDocCertISCC(i, DivNrFicha); // Fazer submit do form com o ficheiro
            }
        }(i, DivNrFicha));
    });
}
5
  • Continua com o mesmo problema. Se introduzir apenas duas linhas ele insere os dois ficheiros, mas no valor do i vai 2 nas duas linhas, em vez de 1, grava e incrementa e depois 2. Commented 25/02/2014 às 15:02
  • Tem certeza de que é o i e não o DivNrFicha? Acho que você precisa passar esse segundo para a função também (vou atualizar a resposta).
    – bfavaretto
    Commented 25/02/2014 às 15:05
  • Sim, o DivNrFicha contém um número correspondente à "Auto Declaração" Commented 25/02/2014 às 15:08
  • "close over": chamo isso de IIFE. Commented 25/02/2014 às 16:10
  • @GustavoRodrigues Sim, é uma IIFE. E também uma closure. Usei "close over" como tradução de "capturar".
    – bfavaretto
    Commented 25/02/2014 às 16:30
0

Use {async: true} na chamada de ajaxSubmit(), assim o sistema aguardará o término (200 OK) de cada requisição.

$("#formSaveFile" + numID + "_" + DivNrFicha + "").ajaxSubmit({
    type: "POST",
    async: true,
    url: $("#formSaveFile").attr("action"),
    clearForm: true,
    data: { numID: numID, DivNrFicha: DivNrFicha }
});
6
  • 3
    Nããããããooooooo! :) Isso vai travar a página até que a requisição seja completada. O ideal seria usar callbacks.
    – bfavaretto
    Commented 25/02/2014 às 14:34
  • @bfavaretto pensei nisso também, mas parece ser exatamente o problema para o cenário citado - claro que poderia ser feito um refatoramento. Commented 25/02/2014 às 14:35
  • Por acaso não resolve @TiagoCésarOliveira Commented 25/02/2014 às 14:38
  • @CesarMiguel poderia por favor atualizar sua pergunta com o fonte completo do for? Commented 25/02/2014 às 14:39
  • Já coloquei @TiagoCésarOliveira Commented 25/02/2014 às 14:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .