Search code examples
javascriptc#jqueryajax.net-core

Change the path of images in JSON returned using AJAX

I want to change image whenever I choose the color the view so I write an Ajax to return the product of that color. Here the code :

$(document).on('change', '#colorId', function () {
    GetImages(colorIds)
});
function GetImages(productId) 
{
    $.ajax({
        url: '@Url.Action("GetImages","ProductView")',
        type: 'GET',
        data: { id : productId },
        success: function (data) {

            console.log("Hello " + data);

            var images = [
                data.image1,
                data.image2,
                data.image3,
                data.image4
            ];

            var image = document.querySelectorAll('#product-imgs .product-preview .image');

            for (var i = 0; i < images.length; i++) {
                image.src = '/Contents/img/' + images[i].split('/').pop();
            }
        }
    })
}

Here the json return JsonResult. As you can see its include 4 images path. So I want to change in the view below by the image path that I received in Json

<div class="col-md-5 col-md-push-2">
    <div id="product-main-img">
        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image1" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image2" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image3" alt="">
        </div>

        <div class="product-preview">
            <img class="image"  src="~/Contents/img/@Model.ProductItems.Image4" alt="">
        </div>
    </div>
</div>
<!-- /Product main img -->
<!-- Product thumb imgs -->
<div class="col-md-2  col-md-pull-5">
    <div id="product-imgs">
        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image1" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image2" alt="">
        </div>

        <div class="product-preview">
            <img class="image"  src="~/Contents/img/@Model.ProductItems.Image3" alt="">
        </div>

        <div class="product-preview">
            <img class="image" src="~/Contents/img/@Model.ProductItems.Image4" alt="">
        </div>
    </div>
</div>

I have tried many way but still doesn't work. When I change

 var image = document.querySelector('.image');

Its only change one image. Does anyone know solutions? I will appreciate any instructions. Thanks for your reading.

I change the code like instruction below and another issue is that only the main image change image

for (var i = 0; i < imageNodes.length; i++) {
            if (images[i]) {
                imageNodes[i].src = '/Contents/img/' + images[i].split('/').pop();
            }
}

And when I open the webtool I notice there is two different img source in html code html. Why doesn't it change together?

Solution

  • The querySelector only returns the first element that matches the specified selectors. To modify all images, you need to use querySelectorAll which returns all elements matching the specified selectors and then iterates over them to change their src attributes:

    var images = document.querySelectorAll('.image'); // Notice that
// this is a nodeList, so you need to use a loop structure 
// to change all the elements.

    That said, there is a bug in your success function in the for loop. The image variable is a NodeList, so you need to reference each node using image[i].src instead of image.src.

    You can correct that part as follows:

    var imageNodes = document.querySelectorAll('#product-main-img .product-preview .image, #product-imgs .product-preview .image');

for (var i = 0; i < imageNodes.length; i++) {
    if(images[i]) {
        imageNodes[i].src = '/Contents/img/' + images[i].split('/').pop();
    }
}