jQuery: having trouble with code to disable link after ajax event

Question

Goal: Disable links before ajax:success is received. (then i'll tell my app server thing to enable the links. I'm writing a simple board game, and don't want to be recieving multiple ajax requests before the first one is responded to, because it messes with the game logic.

  <script type="text/javascript">
      var disableLinks = false;

  $("a").click(function(e){
    if (disableLinks){
      e.preventDefault();
    }
  });


  $("a").ajaxStart(function(){
    disableLinks = true;
  });

    $("a").ajaxStop(function(){
    disableLinks = false;
  });


</script>

And here are what the links look like:

<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true">
              <div class="ttt_square"> 
                &nbsp;
              </div>
</a>

As a matter of semantics, you shouldn't have a
(block element) inside of an (inline element) -- nearly every HTML validator will yell at you for this, but if you use CSS to set *display: block* on the element, then it is, technically, valid. — KOGI, Feb 01 '11 at 23:33

KOGI · Accepted Answer · 2011-02-01T23:18:22.610

1

This is because your AJAX start and finish events never fire. Why? Because simply clicking a link isn't an AJAX request, and doesn't trigger the global AJAX events. To use the global AJAX events, you need to use an AJAX function such as .get( ), .load( ), or $.ajax( )

The code below, is mostly yours... I've just added 2 lines (which could even be reduced to 1, but I think it looks better this way)

var disableLinks = true;

$('a').click( function( e )
{
    if( disableLinks )
    {
        e.preventDefault( );
    }

    var self = $(this);
    $.ajax( { "url": self.attr( 'href' ) } );
} );


$('a').ajaxStart( function( )
{
    disableLinks = true;
} );

$('a').ajaxStop( function( )
{
    disableLinks = false;
} );

edited Feb 01 '11 at 23:18

answered Feb 01 '11 at 22:56

KOGI

3,959
2
24
36

Well, my links work... and I never leave the page. I'm using HTML5. – NullVoxPopuli Feb 01 '11 at 23:03
Right, the links work, but they are not triggering the global AJAX events. Try this... in your ajaxStart and ajaxStop handlers, put in a console.debug( 'start' ) and console.debug( 'stop' ) respectively (if you don't have a console, get one, or use alert( 'start' ) and alert( 'stop' ) respectively), then click some of the links. You will never see your alerts because the events never fire. – KOGI Feb 01 '11 at 23:05
hmmm. makes sense. Any idea on how to achieve the same goal? – NullVoxPopuli Feb 01 '11 at 23:07
Update your selector to only find the links you want to disable (maybe all links with data-remote="true"). In the onclick handler, get the href attribute of the link and use it as the URL for a $.ajax( ) request. Don't forget to continue preventDefault( )-ing so the link itself doesn't get followed. Also, return false for good measure. – KOGI Feb 01 '11 at 23:11

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

You've got a typo. e.prevenDefault(); should be e.preventDefault();

And this should be enough for disabling the default action. So you can rid of your onclick.

$("a").click(function(e){
    e.preventDefault();
});

Edit: Maybe this: jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

or this: jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

should solve your problem (if understand you correctly)

edited May 23 '17 at 10:33

Community

1
1

answered Feb 01 '11 at 22:11

gearsdigital

13,915
6
44
73

I updated the code, but I don't yet have all the links disabling while waiting for ajax to complete – NullVoxPopuli Feb 01 '11 at 22:23
You want to disable your links while you are waiting for your ajax success? Or what are you trying to do? Your question is not that clear... – gearsdigital Feb 01 '11 at 22:27
Yeah, thats exactly what I want. Because I'm writing a game web app thing. And if AJAX things are sent before the last one finishes, it messes up everything. I will try to clarify in my question. – NullVoxPopuli Feb 01 '11 at 22:51
See my update above... should work for you. I would prefer the second example. – gearsdigital Feb 01 '11 at 22:56

score 0 · Answer 3 · answered Feb 02 '11 at 00:15

0

try this:

$('a').click(function(){
    if (!this.hasClass('disabled')) {
        this.addClass('disabled');
        var self = this;
        $.ajax({url: this.attr('href'),
                complete: function(jqXHR, textStatus)
                   self.removeClass('disabled');
                }
        });

    }
    return false;
});

answered Feb 02 '11 at 00:15

jcubic

61,973
54
229
402

Pretty much the same answer I already gave. In fact, it looks like you may have even been inspired by my code example. – KOGI Feb 02 '11 at 18:46
Yes I look at your code, but mine use one function and no global variable, it use class instead. – jcubic Feb 02 '11 at 21:05

jQuery: having trouble with code to disable link after ajax event

3 Answers3