Question

I have a really weird problem with JS and jQuery.

$('#skip').click(function(e) {
   savePhoto('skip');
   showNextPlace();
   photo_changed = 0;
   return false;
});

showNextPlace() and photo_changed = 0; are only executed when I add a breakpoint. The code of savePhoto(); is very basic. I submit a request depending on the status and the number of elements in the places array.

function savePhoto( status )
  {
      if ( places.length <= 5 )
      {
          // load more places
          $('#loadmore').val('1');
      }

      // Don't send a request on skip unless we need more places
      if ( status != 'skip' || $('#loadmore').val() == 1 )
      {
          $.ajax({
              url: "url" + status,
              cache: false,
              data: $('#form_photo').serialize(),
              success: function(results){
                  // dont load more places until we have few
                  $('#loadmore').val('0');

                  if ( results != '[]' )
                  {
                      for ( var i in results )
                      {
                          places.push( results[i] );
                      }
                  }
              }
          });
      }
  }

Any idea on why this happens or how can I debug better the problem?

Answer 1

The problem wasn’t related to the AJAX call. In another part of the code, I was binding an event to the image field each time the user pressed the save button (so the second time the code was being executes 2 times, the 3rd 3, etc..) Remember to unbind!

Also, some part of the crop & save plugin was being executed even if I clicked on skip, so I have added some control variables.

Solution: console.log() on every path that the logic can go.