I have html content as given below.

<div>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
</div>

Problem:

When I click on any link, in the onClick function I will make one ajax call.

I just want to disable all the onClick events of a tag(or disable the entire div and all of its child elements) till I get the ajax response after getting the response I need to re-enable all the a tag onclick events.

Is there any way achieve the same?

I have html content as given below.

<div>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
</div>

Problem:

When I click on any link, in the onClick function I will make one ajax call.

I just want to disable all the onClick events of a tag(or disable the entire div and all of its child elements) till I get the ajax response after getting the response I need to re-enable all the a tag onclick events.

Is there any way achieve the same?

• javascript
• jquery
• html
• css
• ajax

• If you bind the events in a js file, it's easy with element.on('event') for enable and element.off(event) for disable – Marcos Pérez Gude Commented May 31, 2016 at 11:55
• A naive solution for this could be to show a loading indication and block the UI interaction until you get the response. – Rohit416 Commented May 31, 2016 at 11:57
• @MarcosPérezGude I tried this but it's not working for me... Could you please give one sample example in jsfiddle? – Dixit Singla Commented May 31, 2016 at 12:23
• @Rohit416 Good solution but how to block the UI interaction until response? – Dixit Singla Commented May 31, 2016 at 12:24
• Well, in simple words you can create an element which will could have a transparent background (and a loading indicator icon possibly) and works as a blanket over your div containing the links. It is the matter of CSS. Your script then will need to just show or hide that element. – Rohit416 Commented May 31, 2016 at 12:48

7 Answers 7

You can use beforeSend callback of jqXHR where you can disable all anchor tag and jqXHR.always() callback where you will enable all anchor tag .

go through Jquery Ajax Documentation

Thanks for so many solutions.

I have found a very simple solution.

Solution:

You can use the CSS property pointer-events to disable the click event on any element:

https://developer.mozilla/en-US/docs/Web/CSS/pointer-events

// To disable:    
document.getElementById('id').style.pointerEvents = 'none';
// To re-enable:
document.getElementById('id').style.pointerEvents = 'auto';
// Use '' if you want to allow CSS rules to set the value

Thanks,

Dixit

 <a href="#" onclick="someFunction();">Link 1</a>

someFunction(){
    //some code here
   $.get('test.aspx', function(data){
   //do something here
   })
 return false;
}

Check This DEMO

You can use .ajaxStart() & .ajaxStop() JQUERY events to do this. You can create a different css to disable the anchor tag as below :

$('a[href]').each(function () {
                        var $this = $(this);
                        if ($this.attr('href') && $this.attr('href') != '') {
                            $(this).attr('data-href', $(this).attr('href'));
                            $(this).removeAttr('href');
                        }
                    });

and while enabling it back

$('a[data-href]').each(function () {
                var $this = $(this);
                if ($this.attr('data-href') && $this.attr('data-href') != '') {
                    $(this).attr('href', $(this).attr('data-href'));
                    $(this).removeAttr('data-href');
                }
            });

This will remove your href and create a custom attribute. So your click event will not work on anchor tag.

set a flag for active status

function someFunction(){
   var status = $('#parentDiv').attr('data-active');
   if(!status){
       $("#parentDiv").attr('data-active',true);
        //make ajax call
       $.ajax("url", {
          success: function(data) {
              $("#parentDiv").attr('data-active',false);//make false when done
          }
       });
    }
  }

<div id="parentDiv" data-active="false">
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
</div>

Note: This is an alternate solution. IMHO kedar kamthe's solution is the best way to solve this problem

You can try this:

1) Add class to div:

<div class="myDiv">
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
</div>

2) Hide div when ajax starts and show div in success of ajax:

    $(".myDiv").css('opacity','0.25');// blur div when ajax starts
    $.ajax("test.php", {
          success: function(data) {
             $(".myDiv").css('opacity','1');// display div as ajax plete
          },
          error: function() {
            alert('An error occurred');
          }
       });
    });

you can use beforeSend to set a callback function to disable all elements. and enable them in success. You can add a function to disable/enable those element. add an id to the div.

$.ajax( 
  url: "your url",
  beforeSend: function( xhr ) {
    disabledFields(true);
  },
  success: function(){
    disabledFields(false);
  },
  error: function(){
    disabledFields(false);
  });

//
function disabledField(isDisabled)
{
   $("#myDiv").find("a").each(function(){
        if (isDisabled)
        {
            $(this).attr("disabled", "disabled");
        }
        else
        {
           $(this).removeAttr("disabled");
        }
   });
}