CODEWITHSUNDEEP
javascriptjquery
Michael Warren
Michael Warren

Reputation: 205

Toggle element with loading icon

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.

Upvotes: 0

Views: 161

Answers (2)

Charles
Charles

Reputation: 648

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?

Upvotes: 2

TheAmazingJason
TheAmazingJason

Reputation: 63

Are you using a html button tag. If so you could put the image in the button and give it a style of display="none" then you could just toggle this style when button clicked. example:

<button>
    <img id="loadingIcon" src="" style="display:none"/> Button Text Here
</button>

Upvotes: 0

Related Questions