title: AJAX success function not being called even though HTTP 200 is returned
body: <p>When a user clicks 'buy now', I want the transaction to happen and the div to eventually be faded out and removed once being processed by the controller. Everything in the controller works as it should, but when I put the function in the success, it isn't called. However it works when the function is placed outside the success. Additionally, a window.alert() somehow works when there's a success.</p>
  
  <p>Here is my script, everything works in regards to the controller etc </p>
  
  <pre><code>$(document).ready(function(){
              $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });
              $('form.buy-product-form').on('submit', (function (e) {
                  e.preventDefault();
                  var product_id = $(this).attr("id");
                  $.ajax({
                      url: $(this).attr('action'),
                      type: 'POST',
                      data: {'id': product_id},
                      dataType: 'json',
                      success: function () {
                          window.alert("THIS ALERT COMMAND WORKS BUT THE FUNCTION DOESN'T!");
                          $(this).closest('.product').fadeOut("normal", function() {
                              $(this).closest('.product').remove();
                          });
                      }
                  });
              }));
          });
  </code></pre>
  
  <p>Everything above in the controller works fine as well, here is what it returns:</p>
  
  <pre><code>return response()-&gt;json(['ok' =&gt; 'ok']);
  </code></pre>