jQuery AJAX call twice

Question

It keeps calling ajax, on first time it works fine then on second time uploads 2 times the first time then the second time, on third call it uploads 3 times, it just keeps increasing and uploading older images.

      $(".imageUploadIcon").on('click', function(ev){
      var readyflag = true;
      if (readyflag == true){
        ev.preventDefault();
        var fd = new FormData();
          var imgid = $(this).data('img-id');
          $('#imgupload').click();
          var uid = <?php echo $_GET['user']; ?>;
          fd.append('uid', uid);
          fd.append('imgid', imgid);
        $("#imgupload").change(function (){
         var image = $('#imgupload')[0].files[0];
         fd.append('image',image);
        $("#img"+imgid).attr('src','img/loader.gif');
            $.ajax({
                type: "POST",
                url: "php/usrIMG.php",
                data: fd,
                processData: false,
                contentType: false,
                success: function (data) {
                  $("#img"+imgid).attr('src','../../'+data);
                  Materialize.toast('Image uploaded successfully!', 4000);
                  eadyflag = false;
                  imgid = '';
                  image = '';
                  $('#imgupload').val("");
              }
            });


      });
    }
  });

Possible duplicate of [jQuery click events firing multiple times](https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times) — Heretic Monkey, Jul 20 '18 at 01:24

Dacre Denny · Accepted Answer · 2018-07-20T01:19:53.177

It's because you're registering a new change handler on the #imgupload element, each time the .imageUploadIcon element is clicked.

You should be able to decouple your $("#imgupload").change() logic from you .on('click', ..) logic to resolve this issue.

The decoupling here means that you will need to send the imgid data from .imageUploadIcon to the #imgupload element. One way to do this might be to use jQuery's .data() method, as shown below:

$("#imgupload").change(function () {
    var image = $('#imgupload')[0].files[0];

    // Decouple the logic by exhanging 'imgid' via jQuery's data()
    // method. Here we are getting the 'imgid' that was set on 
    // #imgupload during .on('click',..)
    var imgid = $('#imgupload').data('imgid');

    var uid = <? php echo $_GET['user']; ?>;

    var fd = new FormData();
    fd.append('uid', uid);
    fd.append('imgid', imgid);
    fd.append('image', image);

    $("#img" + imgid).attr('src', 'img/loader.gif');
    $.ajax({
        type: "POST",
        url: "php/usrIMG.php",
        data: fd,
        processData: false,
        contentType: false,
        success: function (data) {
            $("#img" + imgid).attr('src', '../../' + data);
            Materialize.toast('Image uploaded successfully!', 4000);
            eadyflag = false;
            imgid = '';
            image = '';
            $('#imgupload').val("");
        }
    });
});


$(".imageUploadIcon").on('click', function (ev) {
    var readyflag = true;
    if (readyflag == true) {
        ev.preventDefault();

        var imgid = $(this).data('img-id');

        // Set the imgid as custom data on #imgupload to decouple the 
        // logic the imgid can then be accessed in the #imgupload 
        // change() handler
        $('#imgupload').data('imgid', imgid)
        $('#imgupload').click();
    }
});

For more information on the jQuery's .data() method see the documentation here

jQuery AJAX call twice

1 Answers1