[FIXED] when using ajax to load a view component the view components javaScript Codes doesn't work

Issue

i used a view Component that has some javaScript codes for animations. when page loaded javaScript works well but when click a button to load data with ajax, data loaded correctly but javaScript codes doesn't work any more

// in view component code

   public async Task<IViewComponentResult> InvokeAsync(GalleryInvokeParameterViewModel par)
    {
    var gallery = await _productService.GetGalleriesForSingleProductAsync(par.ProductID,par.ColorID);
    ViewBag.mainImage = await _productService.GetMainImageGalleryForSingleProductAsync(par.ProductID, par.ColorID);
    ViewBag.productId = par.ProductID;
    return View("SingleProductGallery",gallery);
    }

// in controller

    public IActionResult ChangeGallery(int id, int colorId)
{
var parameters = new GalleryInvokeParameterViewModel
{
ColorID = colorId,
ProductID = id
};
return ViewComponent("SingleProductGallery", parameters);
}

// in javascript codes for ZOOM image ON HOVER IMAGE // these codes doesn't work after calling ajax to load data

    var zoomArea = document.getElementById("zoom-area");
var zoomImage = document.getElementById("zoom-image");
zoomArea.addEventListener("mousemove", function (event) {
var clientX = event.clientX - zoomArea.offsetLeft;
var clientY = event.clientY - zoomArea.offsetTop;
var aWidth = zoomArea.offsetWidth;
var aHeight = zoomArea.offsetHeight;
clientX = (clientX / aWidth) * 100;
clientY = (clientY / aHeight) * 100;
zoomImage.style.transform =
"translate(-" + clientX + "% , -" + clientY + "%) scale(1.5)";
});
$(zoomArea).mouseleave(function () {
zoomImage.style.transform = "translate(-50% , -50%) scale(1)";
});

Solution

i found a solution for this issue. after ajax called and returned data i call :

        $(document).ajaxComplete(function () {js code});

and it reloaded javaScript codes again and my animations code works well.

Answered By - PEGASUS Studio

Answer Checked By - Mary Flores (PHPFixing Volunteer)