Home / Questions / 384833
Accepted
APRECode
Asked: 2020-08-26 13:43:35 +0800 CST 2020-08-26 13:43:35 +0800 CST

show data from a label with Jquery, the value comes from a Java Controller class

  • 772

Good afternoon fellows, I am new to using Spring Boot and I need your support please.

From my controller class(@Conroller) it sent data to my Jsp and the data is displayed correctly, but when I click on the anchor- tag it does not show me the value of the tag with class nameproduc when using Jquery, and it shows me the value of the div I am looking to replace; thanks first of all.

        <div class="row">
            <div class="col-md-12 my-4 mt-md-3 mb-md-5">
                <div class="h4">Más Productos similares:</div>
            </div>
            <div class="col-12 col-md-12 bg-shad pt-4 pb-1">
                <div class="owl-carousel owl-theme text-center" id="gallery_01">
            <!-- me muestra 12 grupos similares: -->
                    <c:forEach items="${producto}" var="producto">  
                        <a href="#" class="selecproduct item thumb-wrapper text-decoration-none" data-image="${urlPublic}/imagenes/frutas/${producto.proimagen}" data-zoom-image="${urlPublic}/imagenes/frutas/${producto.proimagen}">
                            <div class="border rounded" >
                                <img src="${urlPublic}/imagenes/frutas/${producto.proimagen}" alt="" class="">
                                <div class="nameproduc">${producto.nomProducto}</div>
                                <span class="precioproduct">${producto.precio}</span>
                                <div class="d-none">${producto.dataFilPro}</div>
                            </div>
                        </a>
                    </c:forEach>
                </div>
            </div>
        </div>

 <script>
$(".selecproduct").click(function(){
        var nombPro = $(".nameproduc").html();
        alert(nombPro);
    });
javascript

1 Answers

  1. Best Answer

    I hadn't realized that the div is inside the link.

    • Inside the function $(this)it references the link that was clicked
    • You only need to use it to find the rest of the elements with$(this).find('.clase')

    $(".selecproduct").click(function(){
    // Encontrar elemento con clase nameproduc desde el enlace
    let nombPro = $(this).find('.nameproduc').html();
    alert(nombPro);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
            <div class="col-md-12 my-4 mt-md-3 mb-md-5">
                <div class="h4">Más Productos similares:</div>
            </div>
            <div class="col-12 col-md-12 bg-shad pt-4 pb-1">
                <div class="owl-carousel owl-theme text-center" id="gallery_01">
            <!-- me muestra 12 grupos similares: -->
                        <a href="#" class="selecproduct item thumb-wrapper text-decoration-none">
                            <div class="border rounded" >
                                <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="" class="">
                                <div class="nameproduc">Airplane</div>
                                <span class="precioproduct">123</span>
                                <div class="d-none">Filtro 1</div>
                            </div>
                        </a>
                        <a href="#" class="selecproduct item thumb-wrapper text-decoration-none">
                            <div class="border rounded" >
                                <img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="" class="">
                                <div class="nameproduc">Girl</div>
                                <span class="precioproduct">456</span>
                                <div class="d-none">Filtro 2</div>
                            </div>
                        </a>
                </div>
            </div>
        </div>

    • 1