Disable link clicking until page is loaded

Question

I have links such as:

<?php echo 
    anchor("$controller_name/cleanup",
    '<i class="fa fa-undo hidden-lg fa fa-2x tip-bottom" data-original-title="'.lang('items_cleanup_old_items').'"></i><span class="visible-lg">'.lang("items_cleanup_old_items").'</span>',
    array('id'=>'cleanup', 
        'class'=>'btn btn-warning','title'=>lang("items_cleanup_old_items"))); 
?>

I have javascript in $(document).ready() that binds to the anchor and overrides the click to be an ajax call function and does event.preventDefault();to prevent the link from being navigated to.

The problem I am running into is if the page is not loaded all the way yet and they click the link; they go to the ajax page (which is a bunch of json).

The solution I was thinking of is changing the anchor to javascript:void(0) and adding a property data-cleanup-url with the actual link. Would this be a proper solution?

Seems reasonable except that your links won't function at all until the jQuery is ready. That might be an unpleasant UX scenario. — isherwood, Dec 08 '14 at 21:12
I would rather have them NOT function that navigate them to JSON pages. Would would be the best solution? — Chris Muench, Dec 08 '14 at 21:13
What is the original `href` attribute on the links? PHP isn't terribly helpful in a JavaScript question. What does the rendered HTML look like? — isherwood, Dec 08 '14 at 21:16
I would probably use a "modal" spinner while the page is loading that would prevent anything on the page from being clicked until it was done. Example here in the popular answer: http://stackoverflow.com/questions/9585752/using-simplemodal-show-loading-spinner-while-content-inside-iframe-loads — Howard Renollet, Dec 08 '14 at 21:19

score 1 · Answer 1 · answered Dec 08 '14 at 21:16

Why not just use a variable to determine if window.onload has completed, and direct to a new function depending on the status?

var isPageLoaded = false;

$(window).load(function(){
    isPageLoaded = true;
});

$(document).ready(function(){
    $('a').on('click', function (evt){
        evt.preventDefault();

        if (isPageLoaded) doAjaxThing();
        else doNothing();
    });

    function doAjaxThing() {

    }

    function doNothing() {

    }

});

Disable link clicking until page is loaded

1 Answers1