title: Ajax request has encountered an error just on either safari or firefox
body: <p>when i try to click the share button i get Failed to load resource: the server responded with a status of 500 (Internal Server Error) in the console and alert says Ajax request has encountered an error knowing that this doesn't happened on staging just on production and on safari or firefox.
  I spent hours trying to figure it out </p>
  
  <p>here is my code </p>
  
  <pre><code>    $(document).on("click",".btn-share-generate-js",function(e) {
    var url = $(this).data("share-url");
    var id = $(this).data("id");
    var message = $("input:radio.vt:checked").val();
    var clickedBtn = $(this);
  
    clickedBtn.find(".icon-link").addClass('hide');
    clickedBtn.find(".icon-arrows-cw").removeClass('hide');
  
    $.ajax({
      type: "POST",
      url: url,
      dataType: 'json',
      data: {
        'share[message]': message
      },
  
      success: function(data) {
        clickedBtn.find(".icon-link").removeClass('hide');
        clickedBtn.find(".icon-arrows-cw").addClass('hide');
        if (data.error == true) {
          alert(data.error_message);
        } else {
          replaceShareButtonWith(data.share_url);
        }
      },
      error: function(){
        clickedBtn.find(".icon-link").removeClass('hide');
        clickedBtn.find(".icon-arrows-cw").addClass('hide');
        alert("Ajax request has encountered an error.")
      },
      });
    return false;
  });
  
  $(document).on("click",".social-media-reshare-btn",function(e) {
    var url = $(this).attr("href");
    window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=245,width=550');
    return false;
  });
  </code></pre>
  
  <p>thanks </p>