CODEWITHSUNDEEP
jqueryajax
Faisal Sharif
Faisal Sharif

Reputation: 49

Jquery auto click is not working it clicks too many times

I want just one time click my code always clicks and chrome blocks im very happy if anyone help me

$(document).ready(function(){
    $('.mp3download').click(function(e){
        var button = $(this);
        if (button.data('id') == 3) {

            if (button.data('status') == false) {
                $(this).html('<i class="fas fa-sync fa-spin"></i> Converting..');
            }
            
            $.post('/ajax', {
                id: id,
            },function (e) {
                if (e.status == 'success') {
                    button.data('status', true);
                    button.html('<i class="glyphicon glyphicon-download-alt"></i> Download');
                    button.attr('href', e.url);
                    button[0].click();

                }else{
                    button.html(e.html);
                    button.attr('disabled', 'disabled');
                }
            });
            
        }
     });
  });

thanks if anyone figureout error

Upvotes: 0

Views: 111

Answers (2)

Janaki Rajesh Duvvuri
Janaki Rajesh Duvvuri

Reputation: 136

You can simply play by disabling and enabling button

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <button class="mp3download" data-status="" data-id="3">test</button>
</body>
</html>

jQuery

    $(document).ready(function() {
    $('.mp3download').on('click', function(e) {
        var button = $(this);
        button.prop('disabled', true); 
        var buttonIdVal = button.data('id');
        if (buttonIdVal == 3) {
            if (button.data('status') == false) {
                $(this).html('<i class="fas fa-sync fa-spin"></i> Converting..');
            }
            $.post('/', {
                id: buttonIdVal,
            }, function(e) {
                if (true) {
                    button.data('status', true);
                    button.html('<i class="glyphicon glyphicon-download-alt"></i> Download');
                    //                     button.attr('href', e.url);
                    button[0].click();
                    console.log("clicked")
                    button.attr('disabled', false);
                } else {
                    button.html(e.html);
                   button.attr('disabled', false);
                }
            })
        }

    });
});

Just add button.prop('disabled', true); after var button = $(this); & button.prop('disabled', false); after button[0].click();

Try: https://jsbin.com/hudiroj/edit?html,js,console,output

Upvotes: 2

mplungjan
mplungjan

Reputation: 178350

Try to simplify and do NOT click the same button

$(function() {
  $('.mp3download[data-id=3]').on("click", function(e) {
      const $button = $(this)
      if ($button.data('status') == false) {
        $button.html('<i class="fas fa-sync fa-spin"></i> Converting..');
      }
      $.post('/ajax', {
        id: 3,
      }, function(res) {
        if (res.status == 'success') {
          $button.data('status', true);
          const $link = $(`<a href="${res.url}"><i class="glyphicon glyphicon-download-alt"></i> Download</a>`);
          $button.after($link)
          $link[0].click();
        } else {
          button.html(res.html);
          button.attr('disabled', 'disabled');
        }
      });
    }
  });
});

Upvotes: 0

Related Questions