1

Preciso pegar o valor gerado no campo ${lojas.nmFrameLocator} e dar display do valor no alert: lojaMapa()

<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>

O código é gerado através do seguinte 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;
}

Como poderia obter o valor da lista?

1 Resposta 1

1

Primeiro, não use o atributo id em elementos que se repetem. Neste caso, é melhor usar um valor específico no atributo class como você já fez nos outros elementos.

Então, você deve passar para sua função Javascript qual foi o link clicado, de forma que se possa saber relativamente qual é resultado onde procurar os valores.

Exemplo

Fiz um exemplo bem simples de como seria usando jQuery.

Assumo que o HTML gerado no navegador seja algo assim:

<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> 

Então você pode usar o seguinte código:

//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 no JsFiddle

Exemplo usando data()

Outra abordagem, que considero mais "limpa" e organizada, é armazenar os valores que você pretende recuperar no JavaScript em atributos data-*.

Veja este HTML de exemplo:

<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> 

E então seu código JavaScript ficaria mais simples:

$(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 no JsFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .