Inserting HTML elements inside another HTML Generated with Jquery in the same function

Question

Inserting HTML elements inside another HTML Generated with Jquery in the same function

Navigation

#1 by (1 votes)

0

In my next code below I would like to insert the data coming from the ajax request, along with the append () HTML only in elements whose input hidden ids are equal to item.id (of objItens ). But all the ways I figured out did not work. Any tips on how I can implement this in the best way?

 function listaItensPorIdExecCadeia(objIdExecCadeia){

    var idExecucaoDaCadeia = [];

    objIdExecCadeia.map(cadeia => {

        $('#bloco-procedimento-lista-itens').append('
        <h4>${cadeia.nome} #${cadeia.id}</h4>
        <input id="inputIdExecucaoDaCadeia" type="hidden" value="${cadeia.id}" /> 
        <ul id="procedimento-lista-itens" class="list-group">  
        </ul>     
        ');
        idExecucaoDaCadeia.push(cadeia.id);
    });

    for(var i = 0; i <= idExecucaoDaCadeia.length; i++){

        $.get(BASE_URL+'item/listar',{
            idItem: idExecucaoDaCadeia[i],
        },
        function(objResponse){

            var objItens = objResponse.strMessage;

            objItens.map(item => {
                    $('#procedimento-lista-itens').append('
                    <li class="list-group-item cadeia-itens-lista">
                        <p>${item.nome}</p>
                        <div>
                            <a class="btn btn-default"><i class="fa fa-qrcode"></i></a>
                            <a class="btn btn-primary"><i class="fa fa-info-circle"></i></a>
                            <a class="btn btn-warning"><i class="fa fa-edit"></i></a>   
                            <a class="btn btn-danger"><i class="fa fa-times"></i></a>   
                        </div>
                    </li>          
                ');
            })
        },'JSON'
        );
    }
}

html jquery ajax

asked by anonymous 12.04.2018 / 15:47

1 answer

Open HTML via asset Update a query in installment form

score 1 · Accepted Answer

It turns out that you are creating elements with id duplicated in your DOM which is not recommended, add a unique identifier for your dynamic elements.

function listaItensPorIdExecCadeia(objIdExecCadeia){

    var idExecucaoDaCadeia = [];

    objIdExecCadeia.map(cadeia => {

        $('#bloco-procedimento-lista-itens').append('
        <h4>${cadeia.nome} #${cadeia.id}</h4>
        <input id="inputIdExecucaoDaCadeia" type="hidden" value="${cadeia.id}" /> 
        <ul id="procedimento-lista-itens_${cadeia.id}" class="list-group">  
        </ul>     
        ');
        idExecucaoDaCadeia.push(cadeia.id);
    });

    for(var i = 0; i <= idExecucaoDaCadeia.length; i++){

        $.get(BASE_URL+'item/listar',{
            idItem: idExecucaoDaCadeia[i],
        },
        function(objResponse){

            var objItens = objResponse.strMessage;

            objItens.map(item => {
                    $('#procedimento-lista-itens_'+idExecucaoDaCadeia[i]).append('
                    <li class="list-group-item cadeia-itens-lista">
                        <p>${item.nome}</p>
                        <div>
                            <a class="btn btn-default"><i class="fa fa-qrcode"></i></a>
                            <a class="btn btn-primary"><i class="fa fa-info-circle"></i></a>
                            <a class="btn btn-warning"><i class="fa fa-edit"></i></a>   
                            <a class="btn btn-danger"><i class="fa fa-times"></i></a>   
                        </div>
                    </li>          
                ');
            })
        },'JSON'
        );
    }
}

Below I left an example by removing your query from the detail items and simulating the result.

var cadeias = [{id: 1, nome: "teste"}, { id: 2, nome: "teste 2"}];
var itens = [{ cadeiaId: 1, nome: "sub teste 1 - 1"}, { cadeiaId: 1, nome: "sub teste 1 - 2"}, { cadeiaId: 2, nome: "sub teste 2 - 1"}, {cadeiaId: 2, nome: "sub teste 2 - 2"}];


function listaItensPorIdExecCadeia(objIdExecCadeia) {

  var idExecucaoDaCadeia = [];

  objIdExecCadeia.map(cadeia => {

    $('#bloco-procedimento-lista-itens').append('
        <h4>${cadeia.nome} #${cadeia.id}</h4>
        <input id="inputIdExecucaoDaCadeia" type="hidden" value="${cadeia.id}" /> 
        <ul id="procedimento-lista-itens_${cadeia.id}" class="list-group">  
        </ul>     
        ');
    idExecucaoDaCadeia.push(cadeia.id);
  });

  for (var i = 0; i <= idExecucaoDaCadeia.length; i++) {

    var objItens = jQuery.grep(itens, function(n,j){
      return n.cadeiaId === idExecucaoDaCadeia[i];
    });

    objItens.map(item => {
      $('#procedimento-lista-itens_'+idExecucaoDaCadeia[i]).append('
                    <li class="list-group-item cadeia-itens-lista">
                        <p>${item.nome}</p>
                        <div>
                            <a class="btn btn-default"><i class="fa fa-qrcode"></i></a>
                            <a class="btn btn-primary"><i class="fa fa-info-circle"></i></a>
                            <a class="btn btn-warning"><i class="fa fa-edit"></i></a>   
                            <a class="btn btn-danger"><i class="fa fa-times"></i></a>   
                        </div>
                    </li>          
                ');
    });

  }

}

listaItensPorIdExecCadeia(cadeias);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><body><divid="bloco-procedimento-lista-itens"></div>
</body>
</html>