Input loading Modal data

Question

Input loading Modal data

Navigation

#1 by (2 votes)

5

Good afternoon! I'm trying to make a modal to fetch the products and assign them to the input. Idea: When I click on the input, it opens the modal. Then I choose the product in the modal and it loads the input with the data of the chosen product.

Input that gets the product name (Has an input hidden to store the product id too):

<td>
     <input type="text" name="produtoNF[0].nome" value="${produtoNF[0].nome}" onclick="getProduto()"/>
</td>

Modal that chooses the product:

<div class="modal fade" id="findProduct" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Buscar produto</h4>
                </div>
                <div class="modal-body">
                    <ul id="ulItens" style="list-style-type: none">
                        <c:forEach itens="${productList}" var="product">                            
                            <li>                                    
                                <span>${product.id}</span> - 
                                <span>${product.nome}</span>
                            </li>                           
                        </c:forEach>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

Java Script:

        function getPessoa() {
            $("#busPes").modal("show");
        }

        function setPessoa(id, nome) {
            $('#id').val(id);
            $('#nome').val(nome);
            $('#busPes').modal('hide');
        }

I made a static input, but when I create the dynamic input, (I have a button that creates another row in the table with inputs), I can not understand how to store the modal value in the input that I click to open the modal.

Since I was just getting started, I had a hard time explaining it, too. Thank you.

javascript html jsp

asked by anonymous 11.10.2016 / 18:46

1 answer

Calculating Integral using R Questions about inserting this template

score 2 · Accepted Answer

My proposal is an example of how you can implement this with the jQuery features.

First, the fields that will store and launch the product picker.

<td>
     <input type="text" id="myProductInput" name="produtoNF[0].nome" value="${produtoNF[0].nome}" />
     <input type="hidden" id="myProductInputId" name="produtoNF[0].id" value="${produtoNF[0].id}"/>
</td>

Then the modal. Nothing has changed beyond the lines that design li s with the code and product name.

<div class="modal fade" id="findProduct" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Buscar produto</h4>
                </div>
                <div class="modal-body">
                    <ul id="ulItens" style="list-style-type: none">
                        <c:forEach itens="${productList}" var="product">                            
                            <li data-produce data-product-id="${product.id}" data-product-name="${product.nome}">                                    
                                <span>${product.id}</span> - 
                                <span>${product.nome}</span>
                            </li>                           
                        </c:forEach>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

And lastly, javascript configuring modal and result producer events using the jQuery promises API to manage asynchronous activities.

var $modal =  $("#busPes");

// para todo e qualquer elemento que quando clicado irá retornar (produzir) um produto.     
$modal.find('[data-produce]').click(function (e) {
    // caso exista um deferimento previamente registrado, o resolve com o produto clicado
    // o deferimento é uma forma de vinculo entre o modal e o input que solicitou o produto.
    if($modal.deferred){
        $modal.deferred.resolve({
            id: $(this).data('productId'),
            name: $(this).data('productName')
        });
    }

    $modal.modal("hide");
});

$modal.on('hidden.bs.modal', function (e) {
  // cancela o deferimento atual pois o modal foi fechado
  delete $modal.deferred;
});

// ao clicar no input, dispara o mecanismo de chamar o modal pegador de produtos
$('#myProductInput').click(function (e) {
    var $this = $(this);

    $modal.modal("show");

    var deferred = $.Deferred();
    // registra o deferimento no modal para receber o valor produzido
    $modal.deferred = deferred;
    // por fim, registra os valores nos inputs quando o modal devolver o produto
    deferred.done(function(product) {

        $this.val(product.name);
        $('#myProductInputId').val(product.id);
    });
});