Create controls dynamically

Question

Create controls dynamically

Navigation

#1 by (4 votes)

2

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 go by adding to it a text that I bring from this.ProductName. It happens if I leave as is, it will overwriting the current description and in the end I will only have a checkbox with the last description, that is, only the last record. If I do a for, it will repeat 19 times in the first pass (correct and that's what I want) and over 19 times in each other's iteration of jquery (this I do not want). The question is: How do I get the 19 checkboxes I need dynamically on my page? I think this is where I should make 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>';

jquery

asked by anonymous 14.04.2014 / 14:13

1 answer

Last Date and Time when you Login Python Python too slow

score 4 · Accepted Answer

You have $('#translados').html(str); inside the for each, this will cause the content to be rewritten each time it is looped. You should use .append () (which adds to the html that already exists), or use .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 .html() put after closing the function .each() and before closing if :

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