Load dynamic data into javascript

Navigation
2

I'm trying to load dynamic data from DB, but it does not appear. 

$(function () {
    var divContent = $('#formularioVeiculo');
    var botaoAdicionar = $('a[data-id="1"]');
    var i = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar).click(function () {
        $('<div class="conteudoIndividual"><div id="formularioVeiculo"><div class="row"><div class="col-xs-5"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Veículo</label><select name="veiculo[]" id="" class="form-control"><?php do { ?><option value="<?php echo $row_rsVeiculo['ID_Veiculo']; ?>"><?php echo $row_rsVeiculo['placa']; ?> - <?php echo $row_rsVeiculo['tipo']; ?></option><?php } while ($row_rsVeiculo = mysql_fetch_assoc($rsVeiculo)); ?></select></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Valor</label><input name="veiculoValor[]" type="text" class="form-control" id="" value="" required></div></div><div class="col-xs-5"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div></div></div></div></div>').appendTo(divContent);
        $('#removehidden').remove();
        i++;
        $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioVeiculo').on('click', '.linkRemover', function () {
        $(this).parents('.conteudoIndividual').remove();
        i--;
    });
});

RS Layout 

<?php do { ?><option value="<?php echo $row_rsVeiculo['ID_Veiculo']; ?>"><?php echo $row_rsVeiculo['placa']; ?> - <?php echo $row_rsVeiculo['tipo']; ?></option><?php } while ($row_rsVeiculo = mysql_fetch_assoc($rsVeiculo)); ?>

Image of the result. The first field appears because it is already in the form. The remaining fields are added using the above JS as needed.

    
asked by anonymous 12.05.2015 / 23:37

1 answer

2

If you need more empty lines, you can clone one of the lines already on the page and put it in HTML. For example: 

$(botaoAdicionar).click(function () {
    var clone = $(this).closest('.row').clone();
    $('#formularioVeiculo').append(clone);
});

An adaptation to your code would look like this: 

$('#formularioVeiculo').on('click', '.adicionarCampo', function (e) {
    var clone = $(e.target).closest('.row').clone();
    $('#formularioVeiculo').append(clone);

    // adicionar botão para remover
    if (clone.find('a.linkRemover').length) return;
    var remover = clone.find('a.adicionarCampo').clone().removeClass('adicionarCampo btn-success').addClass('linkRemover');
    clone.find('a.adicionarCampo').after(remover);
});
$('#formularioVeiculo').on('click', '.linkRemover', function (e) {
    $(e.target).closest('.row').remove();
});

Notice that I took the anchor ID and gave a class adicionarCampo because this element will be cloned and it is not practical to have numbered IDs for elements that have the same functionality.

Example: link

    
12.05.2015 / 23:52
How to put a "loading" image after validation and submit? C #: Show Thumbnail without resizing image in ASP