changing image alt tag does not actually reflect in browser

Question

Here's my ajax query. It retrieves some data from the server, fades an image out, changes the image and then fades it back in.

$(document).ready(function() {
    setInterval(function() {
        $.ajaxSetup({ cache: false });

        //alert("launching...");
        const rvtoken = $("input[name='__RequestVerificationToken']").val();
        const moduleId = @Dnn.ModuleContext.ModuleId;
        const tabId = @Dnn.ModuleContext.TabId;

        $.ajax({
            cache: false,
            dataType: 'json',
            url: "/DesktopModules/MVC/LH.Home/Home/GetAssociation",
            method: "Post",
            headers: {
                "ModuleId": moduleId,
                "TabId": tabId,
                "RequestVerificationToken": rvtoken,
                "AssociationID": $("#hfAssociationID").val()
            },
            success: function(data) {
                $("#associationDiv").fadeOut(3000,
                    function() {
                        $('#discoverLink').attr("href", `/Association/${data.Title}`);
                        $('#SelectedAssociationLink').attr("href", `/Association/${data.Title}`);
                        $('#SelectedAssociationImg').attr("src",
                        `/portals/@Dnn.ModuleContext.PortalId/assets/associations/${data.Slug}/images/img1.png`);
                        $('#SelectedAssociationImg').attr("alt", `${data.Title} icon`);
                    });
                    $("#associationDiv").fadeIn(3000);
                    $("#hfAssociationID").val(data.AssociationID);

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus);
                    console.log(errorThrown);
                    console.log(jqXHR);
                }
            });
        },
        30000
    );
})

Everything works as expected. The href links are changed and the image is changed.

The problem is the image's alt text. I can watch it change when I'm inspecting the element but when I rollover the image, the alt tag text that is displayed is whatever it was when the document was loaded.

How do I get the rollover alt text to display properly?

Answer 1

Its possible that this is happening because the browser stores the alt tag on page load, and then does not reflect any changes made to it, one way to get around this if that is the case, is to simply delete the image, and re-insert it with the new attributes.

$('#SelectedAssociationImg').replaceWith("<img id='SelectedAssociationImg' src='newSrc' alt='newAlt'/>")

Remember to replace newSrc and newAlt with whatever you want them to be.