How to get a value from a list

Navigation
1

I need to get the value generated in the $ {stores.nmFrameLocator} field and give value display in the alert: storeMap () 

<script>
    function lojaMapa() {
        var tc = document.getElementById("dados-frame-resultado");
        alert(tc);
    }
</script>
<c:forEach items="${listaLojas}" var="lojas">
    <div class="tabela-dados-resultado" align="center">
        <div class="dados-filial-resultado"><c:out value="${lojas.cdFilial}" /></div>
        <div class="dados-endereco-resultado"><c:out value="${lojas.dsEndereco}" /></div>
        <div class="dados-bairro-resultado"><c:out value="${lojas.dsBairro}" /></div>
        <div class="dados-cidade-resultado"><c:out value="${lojas.dsCidade}" /></div>
        <div class="dados-cep-resultado"><c:out value="${lojas.nrCep}"/></div>
        <div class="dados-btn-resultado"><a id="teste" href="javascript:lojaMapa();">Ver no mapa</a></div>
        <div id="dados-frame-resultado"><c:out value="${lojas.nmFrameLocator}"/></div> 
    </div>      
</c:forEach>

The code is generated through the following HQL 

public List<FilialComplementoTO> findLojas(String dsBairro, String dsCidade, String sgEstado) throws IntegrationException {
    List<Object[]> listaLojas;
    List<FilialComplementoTO> listOk;
    System.out.println(dsBairro);

    try {
        Session session = InitSessionFactory.getInstance().getCurrentSession();
        StringBuffer hql = new StringBuffer();
        hql.append(" select e.cdFilial, e.dsEndereco, e.dsBairro, e.dsCidade, e.nrCep, e.nmFrameLocator from FilialComplementoTO e");
        hql.append(" where lower(e.dsBairro) = lower(:dsBairro)");
        hql.append(" and lower(e.dsCidade) = lower(:dsCidade)");
        Query objQuery = session.createQuery(hql.toString());
        objQuery.setString("dsBairro", dsBairro);
        objQuery.setString("dsCidade", dsCidade);
        listaLojas = (List<Object[]>) objQuery.list();
        listOk = new ArrayList<FilialComplementoTO>();

        for (Object[] obj: listaLojas) {
            FilialComplementoTO comple = new FilialComplementoTO();
            comple.setCdFilial(obj[0]!=null?Integer.parseInt(obj[0].toString()):null);
            comple.setDsEndereco(obj[1].toString());
            comple.setDsBairro(obj[2].toString());
            comple.setDsCidade(obj[3].toString());
            comple.setNrCep(obj[4].toString());
            comple.setNmFrameLocator(obj[5].toString());
            listOk.add(comple);
        }      
    } catch (Exception e) {
      Logger.getLogger(this.getClass().getName()).error(e.getMessage());
      throw new IntegrationException(e);
    }
    return listOk;
}

How could I get the value of the list?

    
asked by anonymous 29.10.2014 / 15:01

1 answer

1

First, do not use the id attribute on repeating elements. In this case, it is better to use a specific value in the class attribute as you already did in the other elements.

So, you have to pass to your Javascript function which was the clicked link, so that you can know relatively which is the result where to look for the values.

Example

I made a very simple example of how it would be using jQuery.

I assume HTML generated in the browser looks something like this: 

<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 1</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resultado">bairro 1</div>
    <div class="dados-cidade-resultado">cidade 1</div>
    <div class="dados-cep-resultado">cep 1</div>
    <div class="dados-btn-resultado"><a href="#">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 1</div> 
</div> 
<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 21</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resulta do">bairro 2</div>
    <div class="dados-cidade-resultado">cidade 2</div>
    <div class="dados-cep-resultado">cep 2</div>
    <div class="dados-btn-resultado"><a href="#">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 2</div> 
</div>

Then you can use the following code: 

//executa apenas uma vez após a página ser carregada
$(function() {

    //adicionar manipulador de evento nos links dos resultados
    $('.dados-btn-resultado a').click(function(e) {

        //o this refere-se ao link
        //closest encontra o elemento pai conforme seletor
        var res = $(this).closest('.tabela-dados-resultado');

        //recupera conteúdo do item dentro daquele resultado
        var frameResultado = res.find('.dados-frame-resultado').text();

        //mostra valor
        alert(frameResultado);

        //evita que o clique no link execute alguma ação
        e.preventDefault();

    });

});

Demo on JsFiddle

Example using data()

Another approach, which I consider to be more "clean" and organized, is to store the values you intend to retrieve in JavaScript in data-* attributes.

See this sample HTML: 

<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 1</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resultado">bairro 1</div>
    <div class="dados-cidade-resultado">cidade 1</div>
    <div class="dados-cep-resultado">cep 1</div>
    <div class="dados-btn-resultado"><a href="#" data-meuatributo="valor 1">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 1</div> 
</div> 
<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 21</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resulta do">bairro 2</div>
    <div class="dados-cidade-resultado">cidade 2</div>
    <div class="dados-cep-resultado">cep 2</div>
    <div class="dados-btn-resultado"><a href="#" data-meuatributo="valor 2">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 2</div> 
</div>

And then your JavaScript code would look simpler: 

$(function() {

    //adicionar manipulador de evento nos links dos resultados
    $('.dados-btn-resultado a').click(function(e) {

        //o this refere-se ao link
        //data() retorna o valor de uma tributo "data-*"
        var valorAtributo = $(this).data('meuatributo');

        //mostra valor
        alert(valorAtributo);

        //evita que o clique no link execute alguma ação
        e.preventDefault();

    });

});

Demo on JsFiddle

    
19.11.2014 / 14:46
select like to return a sting without line break How to insert data taken from a JSON file and put in a list with AngularJS