All geek questions in one place

Why isn't the large image path set in this?

enter image description here

I am not sure if this is correct or not. $('#bigImage').attr("data-big", LargeImagePath); But the same operator works fine for 'src' .

IE on JSP I get the value mediumImagePath , but not big can .attr not use in case of data-big , so I have to use for data-big .

xyz.js

 function getImageDetails(mediumImagePath, LargeImagePath) { alert(mediumImagePath+"_______"+mediumImagePath); jQuery.ajax({ type : 'GET', url : 'productDetailsPage.do', data : {}, success : function(data) { $('#bigImage').attr("src", mediumImagePath); $('#bigImage').attr("data-big", LargeImagePath); alert(data); $("#productListPage").hide(); $("#productDetailsPage").show(); } }); }

This is the div where I am trying to set these values:

Abc.Jsp

 <div class="view-product"> <img id="bigImage" class="fancybox" src="" data-big="images/home/suitlarge.jpg" /> <h3>ZOOM</h3> </div>

Productdiv.jsp

 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <div> <c:forEach items="${products}" var="products"> <div class="col-sm-4"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="${products.smallImage}" onclick="getImageDetails('${products.mediumImage}', '${products.largeImage}');" alt="${products.productId}productImage" /> <h2>${products.allPrice}</h2> <p>${products.name}</p> </div> </div> <ul class="nav nav-pills nav-justified"> <li><a href=""><i class="fa fa-plus-square"></i>Add to Wishlist</a></li> </ul> </div> </div> </c:forEach> </div>

Please help and explain what happened.

+5
source share
1 answer

If you want to access the data attribute, you must use data and NOT attr

So your code should be something like $('#bigImage').data("big", LargeImagePath);

Here is a complete example:

 <head runat="server"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { var big = $("#bigImage").data("big"); alert(big); }); </script> </head> <body> <img id="bigImage" class="fancybox" src="" data-big="images/home/suitlarge.jpg" /> </body>
0
source

Source: https://habr.com/ru/post/1243026/

More articles:


All Articles