为什么AJAX函数不能立即从DB中获取数据？

Question

I have 2 AJAX scripts:

1st makes HTML-table's first cell editable and writes entered value directly into DB-table;

2nd fetches data from DB-table and shoes in HTML-table's second cell.

Sequence is this:

1. User clicks on first HTML-table's cell, edit it. AJAX script writes it to DB.

2. PHP-script adds this data to some variable and writes answer in DB.

3. AJAX-script immediately fetches data from DB and shoes in second HTML-tables's cell.

Scripts are this: 1. Edit.js:

   function showEdit(editableObj) {
     $(editableObj).css("background","#FFF");
   } 

  function saveToDatabase(editableObj,column,id) {
    $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
  $.ajax({
    url: "days.php",
    type: "POST",
    data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
    success: function(data){
     $(editableObj).css("background","#FDFDFD");

      //$(editableObj).css("background","#FDFDFD");
     // $("#birthday-data").replaceWith(data); //The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call
    }        
   });
}

2. Show.js:

$(document).ready(function() {           

  $.ajax({    // create an ajax request
    type: "POST",
    url: "days.php",             
    dataType: "text",   // expect html to be returned                
    success: function(response){                    
        $("#one").html(response); // get the element having id of "one" and put the response inside it
        //alert(response);

  }        

}

3. Table.php: // This is content part of PHP script with HTML-table

<td aria-label="First column" contenteditable="true" onBlur="saveToDatabase(this,'select1','<?php echo $show[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $show[$k]["select1"]; ?></td>
      <td id="one"><?php echo $value['day1']; ?></td>

The problem is that I have to refresh page to see my HTML-table 2 cell updated. Expect it be updated immediately after first cell's data edited. Think problem is in show.php, can't get it. Need some help!

Answer 1

function saveToDatabase(editableObj,column,id) {
    $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
  $.ajax({
    url: "days.php",
    type: "POST",
    data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
    success: function(data){
     $(editableObj).css("background","#FDFDFD");

      //$(editableObj).css("background","#FDFDFD");
     // $("#birthday-data").replaceWith(data); //The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call

    $("#one").text(data);
    }        
   });
}

I believe you're just trying to get the response from days.php to show in the table cell... Well, this is how you do it. 'data' is the expected return from days.php, so days.php would echo out whatever you want #one table cell to show after 'column='+column+'&editval='+editableObj.innerHTML+'&id='+id is sent to that page... And then it would just put it right into the cell.