0

I would like to disable a href link in javascript but only for a particular duration.

<tr><td width= 40></td><td id="idHardwareInfo_5" class="sub_newmenu_item" ><a href="javascript:fnMenuClickedCustPop()"><% _("Discovery"); %></a></td></tr>

function fnMenuClickedCustPop()
{
        fnMenuClicked('XYZ.asp', 'id_5');
        alert("This operation may take a few minutes to complete.Please wait...");
}

This XYZ.asp file includes a .inc file which has the js code its functionality includes executing a loop 18 times. I would like to disable the href link until that loop completes entirely from 1-18 so that in between the user can not click the link.What could be the best way to do this? PS:i am a complete Newbie to javascript. Thanks :-)

Improve this question

2 Answers 2

Reset to default
2

Add the following css class to your link in your function when loop starts and remove it at the end of loop

.not-active {
   pointer-events: none;
   cursor: default;
}

<a id="link" href="javascript:fnMenuClickedCustPop()"><% _("Discovery"); %></a>

function fnMenuClickedCustPop()
{
        alert("This operation may...");
        $("#link").addClass('not-active') //when loop is going to start
        fnMenuClicked('XYZ.asp', 'id_5');
        $("#link").removeClass('not-active') //once loop finishes, you might need to do this inside XYZ.asp where loop runs not here. This is just an indicator

}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I think this is a better answer than mine above.
Do i need to create .not-active function exactly the way it is shown here in the .inc file included in the .asp file? Actually the click on the href calls .asp file code which in turn executes .inc file code and the actual looping code lies in the .inc file :-/
CSS stands for custom style sheet... .not-active is actually a css class which will simply disable your button and clicks will not register, until the class is removed from the <a> tag. You need to create a css stylesheet file, add that .not-active class to the css file and then include the stylesheet file in the .asp file. Do some research around stylesheets, javascript etc. you will be able to understand and do this.
Hey sorry for delayed response, but i tried doing what you've mentioned, with this the very first time functionality of the link is also getting disabled. And If i do something like fnMenuClicked('XYZ.asp', 'id_5'); $("#link").addClass('not-active'); It is not helping to disable the link since before adding of the non-active class the XYZ.asp functionality starts and the control goes to that file.
0

You can add an event listener to the element to prevent the default behavior upon click, then remove that listen when you want to re-enable the href. let's say you don't use jQuery or any plugin, i.e. vanilla JS, say

you have

<a id="disableForDuration" href="xxxx">link</a>

In JS, you can do

var elem = document.getElementById("disableForDuartion");
var handler = function (evt) {
    evt.prevantDefault();
}
elem.addEventListener("click", handler);

// Do whatever stuff....

// when you want to enable the link
elem.removeEventListener("click", handler);
Improve this answer

2 Comments

I tried using this method but it halts the functionality of the very first click as well. :-( Nothing happens when i click on the link
Yes, basically u add the event listener when u want to disable, and remove it when u don't. But using event listener is a bit over kill here, so @name's way is better

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.