CODEWITHSUNDEEP
jqueryanchor
Ryan
Ryan

Reputation: 172

Use AJAX and THEN follow a link

I am having an issue with processing an AJAX function in jQuery and then following a link. I have a function that runs on ANY click on a page like jQuery('body').live('click', function(event) {});

This event may or not be a link. Within this callback I have something like jQuery.post(); running. So anytime a click event happens anywhere on the body this runs. My issue occurs when this click is a link or some sort of div inside a link. I have tried things like:

event.preventDefault();

followed by

if ( jQuery(event.target).attr('href').length ) { var url = jQuery(event.target).attr('href'); window.setTimeout(function(){document.location.href=url;}, 1000); // timeout and waiting until effect is complete }

but the problem with this is that if you have something like <a><div></div></a> this will not work. My question is....

Is there a reliable way to pause a link being followed, process AJAX, and then resume following the link?

Upvotes: 3

Views: 1993

Answers (4)

James Bolongan
James Bolongan

Reputation: 1

To solve the bug about jQuery(event.target).closest('a').attr('href').length is undefined. Just add this line of code in line 97 if ( jQuery(event.target).closest('a').attr('href')) { ..... See below it fixes the error:

    // Redirect if this is a link
    if ( jQuery(event.target).closest('a').attr('href')) {
        if ( jQuery(event.target).closest('a').attr('href').length ) {
            var url = jQuery(event.target).closest('a').attr('href');
            if ( jQuery(event.target).closest('a').attr('target') == '_blank') {
                window.setTimeout(function() 
                    { window.open(url, '_blank') },
                    window.name,
                    1000);
            } else {
                window.setTimeout(function(){document.location.href=url;}, 1000); // timeout and waiting until effect is complete 
            }           
        }
    }

Anyway, great plugin :)..

Upvotes: 0

Marshall Anschutz
Marshall Anschutz

Reputation: 1230

If you perform a fade (for example), you can then follow the link using a callback. But be sure to return false from your onclick handler, or you will navigate immediately:

function onclickCallback() {
    $("#myelement").fadeOut(500, function() {
        window.location.href = "http://example.com/mynewpage";
    });
    return false;
}

And finally, call this with:

<a href="#" onclick="onclickCallback()">Click Me</a>

Upvotes: 0

Kevin B
Kevin B

Reputation: 95065

One solution:

$("a").live('click',function(e){
  e.preventDefault();
  var url = this.href;
  setTimeout(function(){
    location.href = url;
  },1000);
});

I just wonder if this would affect any other wordpress plugins that may have anchor tags with events bound to them.

Edit: To add to this, you may also want to ensure that the request is to a different page:

$("a").live('click',function(e){
  var url = this.href;
  if (url == location.href) {
    return;
  }
  e.preventDefault();      
  setTimeout(function(){
    location.href = url;
  },1000);
});

Upvotes: 1

Kyle Johnson
Kyle Johnson

Reputation: 1675

This would be a hack, but it seems like you could change all your link targets to "#" and then create another attribute with the real target. Catch the click event, process it, and then process the real target. You should be able to do this all from jQuery/JavaScript code without editing your actual html.

Upvotes: 0

Related Questions