AJAX funciona en localhost, pero no en servidor en vivo

El código siguiente funciona en localhost, pero no en el servidor en vivo.

EDICIÓN PRINCIPAL:

Solo queda 1 cosa que no funciona:

En el éxito de AJAX se ejecutará esta voluntad:

 $(".FixedDiv").addClass("panel-danger"); setTimeout(close, 500); $("#label_" + res[2]).html(data.score_result); $("#monitoring_score").html(data.calculated_score); 

Sin embargo, la label (por ejemplo) no se está actualizando. La label debe ser actualizada por la puntuación que se le da (data.score_result).

Código Ajax:

 $('.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); } }); }); 

Cuando pongo alert('test'); sobre el $.ajax({ código que muestra ‘prueba’. Cuando coloco la alerta EN EL INTERIOR (justo debajo) el $.ajax({ código, no muestra la alerta.

Función saveScore:

 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 }); }

Resultados / información:

  1. alert(post); Me da el resultado correcto de los datos.
  2. saveScore se ejecuta, pero no se cierra después ( setTimeout) .
  3. #label y #monitoring_score no se actualizan como tiene que hacerlo.
  4. utilizando jquery-3.1.1 .

Estoy angustiado sobre cómo resolver esto. ¿Alguien tiene una idea de como arreglarlo?

Extra:

@Teemu:

Agregue también un manejador de errores a la llamada AJAX, lo más probable es que sea el lado del servidor el que pasa un error en lugar de los datos. O bien, abra la pestaña Red desde DevTools y vea si realmente recibe 200 mensajes OK y los datos.

Edición 1: (código javascript completo):

  $(document).ready(function () { $(".nav-tabs a").click(function () { $(this).tab('show'); }); }); $(document).ready(function () { $('.summernote').summernote({ height: 450, //set editable area's height toolbar: [ ['view', ['fullscreen']], ['help', ['help']] ], codemirror: { // codemirror options theme: 'monokai' } }); }); jQuery(document).ready(function () { $('.nvt').on('click', function () { // get the id: var id = $(this).attr('id'); var res = id.split("_"); // Reset rating: var rating_input = "item_score_" + res[1]; $('#' + rating_input).rating('update', 0); var comment = $("#comments_" + res[1]).val(); var score = 0; var post = 'controller=QualityMonitoring&task=setScore&monitor_id=' +  +'&q=' + res[1] + '&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(closediv, 500); $("#label_" + res[1]).html(data.score_result); $("#monitoring_score").html(data.calculated_score); }, error: function (data) { $(".FixedDiv").addClass("panel-danger"); setTimeout(closediv, 500); $("#label_" + res[1]).html(data.score_result); $("#monitoring_score").html(data.calculated_score); } }); }); $('.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 (data) { saveScore(); }, success: function (data) { $(".FixedDiv").addClass("panel-danger"); setTimeout(closediv, 500); $("#label_" + res[2]).html(data.score_result); $("#monitoring_score").html(data.calculated_score); }, error: function(data) { console.log("ERROR: ", data); } }); }); $('.savecomment').on('blur', function () { var comment_id = $(this).attr('id'); var res = comment_id.split("_"); var commentraw = $("#comments_" + res[1]).val(); var comment = encodeURIComponent(commentraw); var post = 'controller=QualityMonitoring&task=setComment&monitor_id=' +  +'&q=' + res[1] + '&comment=' + comment; $.ajax({ url: "controller.php", type: "POST", data: post, cache: false, dataType: "json", success: function (data) { if (data.result == 666) { $("#comments_" + res[1]).css("background-color", "#ffcccc"); } } }); }); }); $(document).on('change', '.btn-file :file', function () { var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1, label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [numFiles, label]); }); $(document).ready(function () { $('.btn-file :file').on('fileselect', function (event, numFiles, label) { var input = $(this).parents('.input-group').find(':text'), log = numFiles > 1 ? numFiles + ' files selected' : label; if (input.length) { input.val(log); } else { if (log) alert(log); } }); }); function closediv() { $(document).unbind("keyup"); $("#overlay").fadeOut("slow", function () { $("#overlay").remove(); $(".FixedDiv").removeClass("panel-danger"); }); } 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 }); } $(document).ready(function () { var $sidebar = $(".FixedDiv"), $window = $(window), offset = $sidebar.offset(), topPadding = 55; $window.scroll(function () { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 24 }); } }); });

¿Es su código PHP válido y no está lanzando código adicional que está arruinando su objeto JSON? Cuando hay un aviso, el objeto JSON se convierte en una cadena en lugar de una cadena JSON y, a continuación, JavaScript ya no puede analizarla.

Haga un nuevo controlador limpio sin ningún otro código, vuelva a publicar los datos y luego verifique lo que está sucediendo. Nunca devuelva datos, pero haga eco de los datos con una salida.

Javascript y el código parecen válidos, pero en algún otro lugar de su MVC puede lanzar un código HTML en la statement de salida o generarlo antes de ingresar al controlador, que es necesario para devolver los datos.

  1. después de la función saveScore () agregue: var close = function() { $('#overlay').remove(); }; var close = function() { $('#overlay').remove(); };

  2. después del success: function (data) {} eliminar la última coma

Creo que algunos de los otros carteles están relacionados con el JSON no válido,

Sin embargo, agregaría, esto es algo que me gusta hacer para JSON

  

Lo que esto hace es activar el búfer de salida. Que atrapa cualquier salida y la amortigua. Esto incluye advertencias, avisos, eco y material impreso. Luego lo mete en la respuesta como depuración y lo reenvía al cliente.

Obviamente, no querría hacer esto en el servidor de producción en vivo, pero puede comentarlo fácilmente. Puede ser un problema de seguridad incluir algunos errores y acumular información de seguimiento en el cliente. Pero para fines de depuración funciona muy bien.

El problema con JSON es que si está verificando el valor de algo en algún lugar (imprimiéndolo) o si tiene algún aviso, arruinará su JSON. Por ejemplo

  printed content {"foo":"bar"} 

Así que esto elimina ese problema por completo (suponiendo que usted genere el búfer antes de imprimir algo) así:

  {"foo":"bar", "debug":"printed content"} 

Y ahora tiene JSON válido, y como bono adicional puede imprimir su información de depuración simplemente haciendo

  $.ajax({ url: "controller.php", type: "POST", data: post, cache: false, dataType: "json", beforeSend: function () { saveScore(); }, success: function (data) { if(data.debug) console.log(data.debug); } }); 

Es simple y eficaz.

Espero eso ayude.

Intente agregar un controlador de errores a su función Ajax y vea lo que devuelve:

 $.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); }, error: function(data) { console.log("ERROR: ", data); } }); 

Comparta el resultado con nosotros para que podamos resolver su problema y ayudarlo.

¿Está envolviendo su código js en $ (documento) .ready () ?

Una página no se puede manipular de manera segura hasta que el documento esté “listo”. jQuery detecta este estado de preparación para ti. El código incluido dentro de $ (document) .ready () solo se ejecutará una vez que la página Document Object Model (DOM) esté lista para que se ejecute el código JavaScript.

Intenta encerrar todo en

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

Me gusta esto:

 $(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 }); } });

Desde el código que publicó, los comentarios a continuación y la discusión (en realidad fue muy útil para llegar a esta conclusión). Puedo señalar un par de cosas, pero primero:

añadiendo error_reporting(0); en el inicio del controller justo después de debería resolver su problema. (Si mi suposición es correcta y es solo un aviso, no un error real)

Supongo que ya tiene esto en php.ini su php.ini localhost y en el servidor en vivo tiene el error_reporting = E_ALL predeterminado error_reporting = E_ALL , debido a dos instalaciones diferentes de php .

Es probable que en algún lugar del controller notice un notice de un índice indefinido o algo parecido, y php está tratando de avisarle al emitir esto:

 
Notice: Undefined index: ... {"calculated_score":10,"score_result":"1.75 pts"}

comienza con un < y ahí es de donde viene esto

 SyntaxError: Unexpected token < in JSON at position 0 

$.ajax no puede analizar esto porque tiene dataType="json" y esto significa que está esperando una devolución de json válida del servidor, por lo que obtiene el estado 200 porque la solicitud fue exitosa sin errores y console.log(data) estará vacío porque no pudo analizarlo.

una forma sencilla de reproducir esto es crear un archivo php prueba y enviar la solicitud en lugar de controller.php como:

  'Montreal', 'Country' => 'Canada' ]; echo $_GET['something']; // this will trigger a notice of undefined index something echo json_encode($data); ?> 

puede eliminar dataType:"json" y poner console.log(data) en la success function y mirar en la consola para ver qué le está diciendo realmente el servidor.

Pero aquí hay algo que me molesta ..

var post = 'controller=QualityMonitoring&task=setScore&monitor_id='

parece una cadena de consulta que usa para las solicitudes GET pero tiene el type:"POST" en su solicitud de ajax ...

No sé cómo está manejando esto en el controller pero debería ser de type:"GET" para enviar datos como este, pero si desea enviar los datos con POST , var post debería ser un objeto, (esto podría $_GET['task'] el problema, ya que por defecto es GET cuando no está configurado y en el controlador hay un $_GET['task'] lugar de $_POST['task'] o vise-versa) así que aquí hay un fragmento para convertir la cadena de consulta a un json :

 function QueryStringToJSON(str) { var pairs = str.split('&'); var result = {}; pairs.forEach(function (pair) { pair = pair.split('='); var name = pair[0] var value = pair[1] if (name.length) if (result[name] !== undefined) { if (!result[name].push) { result[name] = [result[name]]; } result[name].push(value || ''); } else { result[name] = value || ''; } }); return (result); } var string = 'controller=QualityMonitoring&task=setScore&monitor_id=5&q=blah&item_score=99&comment=hello'; var obj = QueryStringToJSON(string); console.log(obj);