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 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?

• javascript
• jquery

• 1 I would remend using something like the accepted answer to my question: stackoverflow./questions/3461152/… – Sonny Commented Nov 24, 2010 at 14:14

4 Answers 4

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>

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 pletely and still use the link the moment he sees it.

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

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 pletely, it would go to inplete 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 inplete, then click did not happen.