CODEWITHSUNDEEP
jqueryhtmlimagealt
Chris
Chris

Reputation: 788

changing image alt tag does not actually reflect in browser

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?

Upvotes: 1

Views: 368

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65806

alt isn't what is displayed when you mouseover an image, title is.

Upvotes: 0

olfek
olfek

Reputation: 3520

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.

Upvotes: 2

Dowda
Dowda

Reputation: 19

Make sure you clear the Web Browser's Cache and do a full refresh after you make an edit to your javascript.

Upvotes: -1

Related Questions