Why AJAX function doesn't fetch data from DB immediately?

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:

User clicks on first HTML-table's cell, edit it. AJAX script writes it to DB.
PHP-script adds this data to some variable and writes answer in DB.
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!

Please share the HTML of the tables or page in which all these script resides. — Hamees A. Khan
– Hamees A. Khan, Commented Jul 14, 2018 at 15:47
@HameesA.Khan, see code here: codepen.io/h071/pen/QByLXZ . Some php fragments are in, couldn't avoid them because they show table's filling logic. — aysee
– aysee, Commented Jul 14, 2018 at 16:11
Sorry! my words were not clear. I am asking for the HTML code you get in browser. I mean completely processed code. One more thing, in the code you have shared, where are you calling Show.js? I mean it's function? — Hamees A. Khan
– Hamees A. Khan, Commented Jul 14, 2018 at 16:53
I think you have to call your Show function at the end of your saveToDatabase function or better after it. — Hamees A. Khan
– Hamees A. Khan, Commented Jul 14, 2018 at 17:08

Nerdi.org · Accepted Answer · 2018-07-14 20:14:40Z

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.

answered Jul 14, 2018 at 20:14

Nerdi.org

9336 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aysee Over a year ago

thanks for an answer! Tryed it out. Now when I edit my first cell and click outside some reaction is present, but unfortunately in the second cell a full HTML-code of days.php page occurs... Trying solving it out...

Nerdi.org Over a year ago

Your days.php CONTROLLER should be separate from the view. Days.php should just be "echo $response" basically, where $response is what you want in the cell.

Nerdi.org Over a year ago

Also do dataType: "text" in the ajax settings

Hamees A. Khan · Accepted Answer · 2018-07-14 17:27:31Z

0

I think I have figured it out.

The problem is that you are requesting to see the updates once your page is completely loaded. That is in your script 'Show.js' $(document).ready(function() {

But you want to call it immediately after the saveToDatabase function completes.

So you have to alter your Show.js Function and create it something like this

function showDoneEdits(obj){
}

And then at the end of your saveToDatabase function you can call showDoneEdits function. This will start the showing process as soon as the updating process completes.

Please let others know if it worked. :)

answered Jul 14, 2018 at 17:27

Hamees A. Khan

1341 silver badge10 bronze badges

Collectives™ on Stack Overflow

Why AJAX function doesn't fetch data from DB immediately?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related