CODEWITHSUNDEEP
javascriptangularjsanchor
sanmoy paul
sanmoy paul

Reputation: 209

How to disable anchor tags on http call success

Can anyone help me with how to disable anchor tag on http call success and enable it on error and vice versa

This is my Html page

<a href="#" id="register_pointer" data-toggle="modal" data-target="#myModal1">
    <div class="plus">
        <i class="fa fa-2x fa-plus"></i>
    </div>
    <div class="register">
        <h4>Create</h4>
        <p>New Account</p>
    </div>
</a>

This is my controller

$scope.MqUser=[];
$scope.getMqUser = function() {
    usSpinnerService.spin('spinner-1');
    MQDetailsService.getUserDetails().success(function(data, status) {
        console.log(data);
        usSpinnerService.stop('spinner-1');
        $scope.createQ = false;
        $scope.MqUser = data;
        console.log("Success in getting the user list");
        console.log($scope.MqUser);
        //I want the anchor tag to get disabled here using angular directive.
    }).error(function(data,status){
        //I want the anchor tag to get enabled here using angular directive.
        $scope.createQ = true;
        console.log(data);
        if(status == 0){
            $scope.networkError();
        }
        else{
            $scope.fetchuserFail(data.message);
        }
        usSpinnerService.stop('spinner-1');
        console.log("Failed to load the user list "+status);
    })
}
$scope.getMqUser();

Upvotes: 13

Views: 1231

Answers (4)

levi
levi

Reputation: 22697

A pure AngularJS solution

In your success callback

.success(function(data){

    $scope.disableAnchor = true;

})

In your error callback

.error(function(data){

    $scope.disableAnchor = false;

})

Your anchor tag

<a ng-click='clickAnchor($event)' href="#your_href"> <a/>

Then in your controller

$scope.clickAnchor = function($event){

   if ($scope.disableAnchor)
         $event.preventDefault()

}

A non pure AngularJS solution

In your success callback

.success(function(data){

   $("#your_anchor").on('click',function(e){
      e.preventDefault();
      return false
    })

})

in your error callback

.error(function(data){

   $("#your_anchor").on('click',function(e){
    })

})

I recommend using Pure Angularjs solution.

Upvotes: 7

Tibos
Tibos

Reputation: 27823

My humble opinion (which disagrees with the spec - see discussion) is that the ng-disabled directive was created for this exact purpose. Since the disabled attribute has no effect on anchor elements, it's my job to fix it:

a[disabled] {
  pointer-events:none;
}

Example here

Note that while pointer-events are not supported on IE<11, it still works because IE also incorrectly acknowledges the disabled attribute on anchors. Other browser support is pretty good.

Upvotes: 1

Divya MV
Divya MV

Reputation: 2053

you can unbind the click handler in success call back using jQuery

 .success(function(data){

 $("#register_pointer").unbind( "click" ) // unbind the click
 $("#register_pointer").css( 'pointer-events', 'none' ); //this will also prevent all the events like hover,mouse over etc.
});

you can get them back whenever you want as given below

 $("#register_pointer").bind( "click" );
 $("#register_pointer").css( 'pointer-events', '');

Upvotes: 4

luckwithu
luckwithu

Reputation: 143

You can use data-href to enable and disable the anchor tag. Please look at the given code, Hope it will helps yours.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <input type=checkbox onclick="enableEdit(this)"/>
        <div onclick="enable()">Enable</div>
        <div onclick="disable()">Disable</div>

        <a id="anc" data-href="call.html" href="#">click here</a>

        <script type="text/javascript">
            function enable() {
                $('#anc').attr("href", $('#anc').data("href"));
            }

            function disable() {
                $('#anc').attr("href", "#");
            }
        </script>

Upvotes: 1

Related Questions