Mis datos se actualizan con éxito con Ajax, pero el resultado solo se mostrará cuando actualice el navegador

Actualicé correctamente QuestionColumn con Ajax, pero el resultado se mostrará después del navegador de actualización.

En Tengo Before Updated Question . Cuando hago clic en

,

se ocultará y se mostrará . Luego actualizo la pregunta.

Cuando hago clic en el botón Guardar, se ocultará y se mostrará. Aquí tienen una pregunta actualizada. Así que hago una actualización del navegador para mostrar el resultado.

Alguien tiene una idea? En qué resultado aparece con una pregunta actualizada sin actualización del navegador. A continuación está mi código.

Question_Statistics.php :

  <tr id="record-" class="record">   <td class="box" id="box"> <span contenteditable="false" class="edit" id="">Edit <span contenteditable="false" class="save" data-table="questions" id="save">Save <span id="S"> <input style="display: none;" type="text" value="" class="form-control" id="I">      <a id="" class="delete" data-table="questions">      

Custom.js :

 $(document).ready(function() { $('.edit').click(function(){ $('.edit').hide(); var id = $(this).attr("id"); $('#save'+id).show(); $('#S'+id).hide(); $('#I'+id).show(); }); $('.save').click(function(){ $('.save').hide(); // var id =$(this).attr("id"); here id will show like `save+Id` var id= $('.edit').attr("id"); var table = $(this).attr("data-table"); var question=$('#I'+id).val(); $('#I'+id).hide(); $('.edit').show(); $('#I'+id).show(); $.ajax({ type: 'POST', url:'include/ajaxserver.php', // data: variable or key : value, key:value, data: {id:id, edit_me:true, table:table, question:question}, success: function(response) { // Parse the response var data = JSON.parse(response); // Alert either way alert((data.success == true)? "Updated" : "Not Updated"); } success:function(return1){ var q=JSON.parse(return1); } }); }); }); 

ajaxserver.php :

 (mysqli_query($con, $query))])); $query1= "SELECT * FROM `{$table}` WHERE id='".$id."'"; $run=mysqli_query($con,$query1); while($rs=mysqli_fetch_array($run)) { $q=$rs['question']; $i=$rs['id']; } die(json_encode(['success' => ($q)])) } ?> 

Solutions Collecting From Web of "Mis datos se actualizan con éxito con Ajax, pero el resultado solo se mostrará cuando actualice el navegador"

Voy a comenzar un poco.
No probé este código … Lo harás.

Primero : use una statement preparada para evitar la inyección de SQL . Debería leer esta buena explicación sobre cómo preparar declaraciones usando mysqli.

Segundo : incluso si hay dos (o más) consultas … Devuelva solo un JSON.

Tercero : Desea devolver un JSON. Entonces puede ser necesario un encabezado. Vea esta respuesta SO . Mejor que lo dejes enseguida … Te ahorrará tiempo.

Cuarto : tener solo una callback success para manejar la respuesta. Aquí, verificará si UPDATE y SELECT han tenido éxito. Luego buscará la pregunta que espera (que es la misma que envió … Pero aquí, está seguro de que se guardó en DB).

(EDITAR) No es necesario analizar la respuesta a json … Ya que es un json válido.

Intente esto … Mire la consola para leer los resultados de console.log() .
Vuelve si hay un problema que no puedes resolver por ti mismo.


La función de guardar:

 $('.save').click(function(){ $('.save').hide(); var id= $('.edit').attr("id"); var table = $(this).attr("data-table"); var question=$('#I'+id).val(); $('#I'+id).hide(); $('.edit').show(); $('#I'+id).show(); $.ajax({ type: 'POST', url:'include/ajaxserver.php', // data: variable or key : value, key:value, data: {id:id, edit_me:true, table:table, question:question}, dataType: 'json', // Expected response format success: function(response) { // Check for connection error if(response.connection=="FAIL"){ console.log(response.connection_error); }else{ // Queries success console.log((response.update_success == true)? "Updated" : "Not Updated"); console.log((response.select_success == true)? "Selected" : "Not Selected"); if(response.update_success && response.select_success){ console.log(response.question); // Update the span where the question should be $('#S'+id).html(response.question); } } } }); // End Ajax }); // End save 

Ejemplo de connection.php con informe de errores

 < ?php $mysqli = new mysqli("localhost", "my_user", "my_password", "world"); $mysqli_failed = false; $mysqli_error = ""; if ($mysqli->connect_errno) { $mysqli_failed = true; $mysqli_error = $mysqli->connect_error; } ?> 

El ajaxserver.php:

 < ?php include('connection.php'); // Header to correctly return a JSON header('Content-Type: application/json'); // An array to store eventual results. $result = []; $result['connection'] = "OK"; $result['connection_error'] = ""; if($mysqli_failed){ $result['connection'] = "FAIL"; $result['connection_error'] = $mysqli_error; // Encode to JSON and echo it. echo json_encode($result); // Stop everything here die(); } if (!empty($_POST["edit_me"])) { // UPDATE $id = $_POST["id"]; $table = $_POST["table"]; $question=$_POST["question"]; $sql = "UPDATE ? SET question=? WHERE id=?"; // Prepare the statement, bind params and execute. $query = $con->prepare($sql); $query->bind_param("ssi", $table, $question, $id); // ssi means string, string, integer $query->execute(); // Check if is succeeded and store that result. if(!$query){ $result["update_success"] = false; }else{ $result["update_success"] = true; } $query->close(); // SELECT $sql= "SELECT * FROM ? WHERE id=?"; // Prepare the statement, bind params and execute. $query = $con->prepare($sql); $query->bind_param("si", $table, $id); // si means string, integer $query->execute(); // Check if is succeeded and store that result. if(!$query){ $result["select_success"] = false; }else{ $result["select_success"] = true; } // Fetch the result. Just one row is expected, so no while loop needed. $rs=mysqli_fetch_array($query); $result["question"] = $rs['question']; $query->close(); // Encode to JSON and echo it. echo json_encode($result); } ?>