Data overwrite to cycle for

Question

I have the following table:

This table is dynamic and works like form, IE, the user when clicking Novo a new row is created with the dynamic fields. By clicking Salvar Dados all user-created lines are saved. So far so good. But what I’m doing is giving the user the possibility to insert Files, so I have a input type="file" also dynamic for each line (this to hidden), where to upload the data to the controller from a ajaxSubmit (I’m working on ASP MVC 4).

My problem now it is: By doing the ajaxSubmit, the javascript is overwriting data from id's dynamics that I have for the input file. Follows the function:

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

I call the function up while running a cycle for where I will store each row of the table at a time, and it works well. Now comes the part of saving the file and only saves the file from the last row. As far as I can tell, he’s going to the next step of the cycle for without first finishing doing the ajaxSubmit.

How can I get around this and make him not jump the cycle without finishing this function?

EDIT

Cycle 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

            });
        }

Answer 1

The problem is just what you suspected: as the call ajax is asynchronous, your callbacks are being called after the end of the cycle for, when the value of i will be window.numAutoDeclaracaoISCC. This is because the scope of i is a single, the context where this code is (in Javascript, there is no block scope, only function).

A simple solution is to add an intermediate function to capture (close over) each value of 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));
    });
}

Answer 2

Use {async: true} in the ajaxSubmit() call, so the system will await termination (200 OK) of each request.

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