AJAX works on localhost, but doesn't on live server

Question

Below code works on localhost, but not on live server.

MAIN EDIT:

Only 1 thing remains which is not working:

<

Answer 1

Are you wrapping your js code in $(document).ready() ?

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Try enclosing everything in

$(function(){
//your code here
})

Like this:

$(function(){
$('.rating').on('rating.change', function () {
  var rating_id = $(this).attr('id');
  var res = rating_id.split("_");

  var comment = $("#comments_" + res[2]).val();
  var score = $("#item_score_" + res[2]).val();

  var post = 'controller=QualityMonitoring&task=setScore&monitor_id='
    + 
    + '&q=' + res[2] + '&item_score=' + score + '&comment=' + comment;

  $.ajax({
    url: "controller.php",
    type: "POST",
    data: post,
    cache: false,
    dataType: "json",
    beforeSend: function () {
      saveScore();
    },
    success: function (data) {
      $(".FixedDiv").addClass("panel-danger");
      setTimeout(close, 500);
      $("#label_" + res[2]).html(data.score_result);
      $("#monitoring_score").html(data.calculated_score);
    }
  });
});

function saveScore() {
  var docHeight = $(document).height();

  $("body").append("
");

  $("#overlay")
    .height(docHeight)
    .css({
      'opacity': 0.4,
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'background-color': 'black',
      'width': '100%',
      'z-index': 5000
    });
}

});