jQuery Disable Link until page load

Question

I have a jquery pop-up window attached to a link. If the page is not fully loaded (i.e. the .js files) when the link is clicked it opens in the browser window rather than a pop-up.

I was thinking of disabling/hiding the link until the page was loaded.

What would best practice be for handling this scenrio and have you any code examples?

I would recommend using something like the accepted answer to my question: http://stackoverflow.com/questions/3461152/progressive-enhancement-and-initial-display-state — Sonny, Nov 24 '10 at 14:14

score 5 · Accepted Answer · answered Nov 24 '10 at 12:43

5

First place your link in div section and make that div hide

<div style='display:none' id='LinkId'><a href=''>click</a></div>

Now write this code in head section

<script language="javascript">

$(document).ready(function() {
    $('#LinkId').show();
});

</script>

answered Nov 24 '10 at 12:43

Poonam Bhatt

10,154
16
53
72

1

This should do it perfectly. If you have time and want to improve the user experience, instead of hiding it, you could style it as a disabled element (with CSS) and on .ready event replace it with a working link. Really straightforward with jquery. – Ignacio Nov 24 '10 at 12:57
Further to @ign's suggestion, I cobbled together a (sort of) demo of the principle, over at [JS Fiddle](http://jsfiddle.net/davidThomas/8b7xp/2/). The [`animate()`](http://api.jquery.com/animate/) is only so slow to stop it being an immediate transition from 'inactive' to 'active.' – David Thomas Nov 24 '10 at 14:23

RoToRa · Answer 2 · 2010-11-24T14:05:21.683

Actually this is IMHO a perfect example why assigning event handlers directly in the HTML code is not necessarily a bad thing, despite what many people say.

If you use <a href="" onclick="myClickHandler()">Link</a> it there will be no gap between visibility of the link and the time you can use it. It improves usability, because the user don't need to wait for your page to load completely and still use the link the moment he sees it.

score 0 · Answer 3 · answered Mar 01 '17 at 11:44

I had the same issue and here is how i solved it.

I had to create one dummy link in addition to my real link i.e

<!--fake link is visible by default-->
<li class="li_1">
<a class="dropdown-toggle" href="my_real_link_not_popup.html">Compose</a>
</li>

<!--original link is hidden with the hidden class by default-->
 <li class="li_2 hidden">
 <a class="dropdown-toggle ajax-popup-link_write" id="write_main_a" href="my_real_link_is_popup.html">Compose</a>
 </li>

And my script goes thus:

$(document).ready(function()
{
    //prevent event from being fired before page load
    $(".li_1").addClass("hidden");
    $(".li_2").removeClass("hidden");
});

so the page loads with the fake link and onpage load == "finish" then the fake link is hidden and the real link is made visible.

The only down side of this is that user must always have java script enabled in their browser else they won't be able to access the pop-up. But look on the bright side the fake link could still redirect to another page with the same content as the popup. wink

hope this helps

score -1 · Answer 4 · edited Sep 25 '15 at 12:20

I had a similar problem, where a link's href was being filled by server and the the href was being modified before page load to us/en or /de/de before the url,

So if we click on the link before page loads completely, it would go to incomplete url, thus I would get page not found.

So solution I took is: adding onclick="event.preventDefault()" as soon as possible from client side and then modifying it to onclick="" as the url gets updated.

So the issue got resolved, when the url was incomplete, then click did not happen.

jQuery Disable Link until page load

4 Answers4

Linked