Question

What I want to do is when a user clicks a button, to change the image of the button to a loading icon.

My javascript function looks like this –

function GenerateDetail() {
    var resBtn = $('ctl00_cpMain_cntnrRoot').find("btn_generateDetail");
    if (resBtn != null) {
        toggleElement(resBtn);
    }
}

function toggleElement(aRelEle) {
    if ($(aRelEle).css("display") != "none") {
        addImage(aRelEle);
        $(aRelEle).css("display", "none");
    }
    else {
        $(aRelEle).prev().remove();
        $(aRelEle).css("display", "inline");
    }
}

function addImage(aParEle) {
    var aImage = document.createElement("img");
    var aSrc = "App_Themes/Images/activityloader.gif";
    aImage.border = "0";
    aImage.src = aSrc;
    aParEle.appendChild(aImage);
}

In toggleElement, $(aRelEle).css(“display”) is undefined. Why? ‘ctl00_cpMain_cntnrRoot’ is a div I have around all of my elements on my page.

Answer 1

I think the problem lies with this line:

 var resBtn = $('ctl00_cpMain_cntnrRoot').find("btn_generateDetail");

What is ctl00_cpMain_cntnrRoot? is it a class? Then it should be .ctl00_cpMain_cntnrRoot or is it an id? Then it should be: #ctl00_cpMain_cntnrRoot

Similarly for your find(). Is btn_generateDetail an id or a class?