Input loading data from Modal

Question

Good afternoon! I’m trying to make a modal to fetch the products and assign it 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.

Product name input (Has an Hidden input to store product id as well):

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

Modal choosing 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 was able to make a static input, but when I create the dynamic input, (I have a button that creates another row in the table with inputs), I am not able to understand how to store the chosen value in the modal input I click to open the modal.

As I’m starting out, I had a hard time explaining it, too. Thank you.

Answer 1

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

First, the fields that will store and fire the "Picker product".

<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 but the lines that draw the lis 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 finally, javascript setting up modal and output producer events using the jQuery’s 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);
    });
});