Dynamically create controls

Question

I have the following jquery

function MontaTraslado() {

    resultado = jQuery.parseJSON('{"txtDestino": "' + $("#txtGeoTo").val() + '" , "datIda": "' + $("#txtDateStart").val() +
                                '", "datVolta": "' + $("#txtDateEnd").val() + '", "intAdultos": "' + $("#txtAdulto").val() +
                                '", "intCriancas": "' + $("#txtCrianca").val() + '", "quaAdulto": "' + $("#txtQuaAdulto").val() +
                                '", "quaCrianca": "' + $("#txtQuaCrianca").val() + '", "quaMaisCinco": "' + $("#txtQuaMaisCinco").val() +
                                '", "idGeoAreDestino": "' + $("#idGeoAreDestino").val() + '" }');

    var str = "";

    $.ajax({

        url: "/Servico/MontaTraslado",
        datatype: 'json',
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ _servico: resultado }),
        success: function (data) {

            if (data.searchResult != "") {

                $(data.searchResult).each(function () {

                    //str += '<div class="detalhes-servicos-adicionais">';
                    str += '<div class="itens">';
                    str += '<div class="grid_1 checkbox">';


                    str += '<input type="checkbox" value="1" />';
                    str += '</div>';
                    str += '<div class="grid_12">';
                    str += '<p>';

                    str += this.ProductName + '<br />';
                    //str += 'Aeroporto - Hotel<br />';
                    //str += 'Hotel Aeroporto';

                    str += '</p>';
                    str += '</div>';
                    str += '<div class="grid_4">';
                    str += '<div class="valor">+ R$ 0,00</div>';
                    str += '</div>';
                    str += '</div>';


                    str += '<div class="grid_18">';
                    str += '<button value="novaPesquisa" class="btn-pular-passo pull-right">Continuar</button>';
                    str += '</div>';
                    //str += '</div>';

                    $('#translados').html(str);

                    str = "";

                });
            }
            else
            {
                $('#translados').html("<center><h1>Nenhum registro encontrado.</h1></center>");
            }

        },
        error: function (error) {

            loading(0, "LoadbuscaServico");
        }
    });

In my current context, each of this function repeats 19 times, that is, I have 19 records in this situation. I need to go creating checkboxes and add to it a text that I bring from this.ProductName. It happens if I leave it as it is, it will overwrite the current Description and in the end I will only have a checkbox with the last Description, ie only the last record. If I do a go, it will repeat itself 19 times in the first step (correct and that’s what I want) and 19 more times in each other jquery each iteration (that I don’t want). The question is: How do I get the 19 checkboxes that I need dynamically on my page? I think this is where I should do my for:

str += '<input type="checkbox" value="1" />';
                    str += '</div>';
                    str += '<div class="grid_12">';
                    str += '<p>';

                    str += this.ProductName + '<br />';
                    //str += 'Aeroporto - Hotel<br />';
                    //str += 'Hotel Aeroporto';

                    str += '</p>';
                    str += '</div>';
                    str += '<div class="grid_4">';
                    str += '<div class="valor">+ R$ 0,00</div>';
                    str += '</div>';
                    str += '</div>';

Answer 1

You have the $('#translados').html(str); inside for each, this will cause the content to be rewritten each time you loop it. You should use the .append() (adding to existing html), or using . html() outside the loop.

Take a look at this example

for (var i = 0; i < 20; i++) {
    $('#translados').html('Usando .html(): ' + i);                 // esta linha sobrepôe os valores
    $('#translados2').append('Usando .append(): ' + i + '<br />'); // esta linha mantem o que já havia e acrescenta
}

so if you want to use the .html() place after function close .each() and before the closure of if:

    });
    $('#translados').html(str);
}
else