retrieving data from MysQL with jQuery $.ajax via php - async issues

Question

I'm in trouble with async processing of data requested by a jquery ajax call to PHP. I'm reading data from MySQL.

The data is being read correctly, but javascript is plunging on with the processing before PHP has supplied the data. The console log shows this both because of the absence of the data where I want it despite it's presence after $ajax success:, and because the order of log entries is reversed.

I've seen several similar questions on SO and elsewhere, like: jquery to php (wait for php script until result/finish) Wait for external method to complete before finishing? but these didn't help me. Sorry for not understanding.

I tried ajaxComplete method but that didn't solve it. I tried loading the values (list_items and status) into a div, where I could see it in the HTML page, but trying to retrieve it from there returned '', so it was apparently not there yet when I tried to fetch its text.

I believe the answer involves the use of callbacks, but I haven't found an example that I can adapt to work in my code, as I can't understand how to use callbacks in the circumstances below, despite reading http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/ and other sources.

console.log shows this:
list_items:    status:                       5.html:29
list_items: 3List Items   status: OK         5.html:12

here's my 5.html

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script>
/* function to READ from MySQL */
    function readMySQL( user_id, todo_name ){
        var params = {user_idPOST: user_id, todo_namePOST: todo_name, action: "read"};
        $.ajax({ type: "post", url: "5.php", data: params, datatype: "text",
            success: function(data){
                list_items = data;
                status = 'OK';
                console.log('list_items:', list_items, '  status:', status); // this is 5.html:12
            },
            error: function(jqXHR, exception) { errorMySQL(jqXHR, exception); }
        });
    }
/* function to signal ERRORS */
    // error handling
    }
/* Start */
    $(document).ready(function(){
        window.list_items = "";
        window.status = "";
        $("#read").click(function(){
            var user_id=3;
            var todo_name='3name';
            readMySQL( user_id, todo_name ); 
            console.log('list_items:', list_items, '  status:', status); // this is 5.html:29
        });
    });
    </script>
  </head>
    <body>
        <form>
            <input type="button" value="Read" id="read"><p>
        </form>
   </body>
</html>

and here's 5.php

<?php
  $host = "localhost";  $user = "root";  $pass = "";    $databaseName = "informat_todo";
  $tableName = "todo_list";
  $con = mysqli_connect ( $host, $user, $pass, $databaseName );

  // Check connection
  if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); }
  $action = $_POST["action"];
  $user_id = $_POST["user_idPOST"]; 
  $todo_name = $_POST["todo_namePOST"];

// READ ------------------------------------------------------------------------------------------
    if($action=="read"){
        $show = mysqli_query ( $con, "SELECT * FROM $tableName WHERE user_id='$user_id' AND todo_name='$todo_name' " );
        $found = 0;
        while($row=mysqli_fetch_array($show)){
            $found = 1;
            echo $row[2] ;
        }
        if ($found==0) { echo "failed : "; echo $user_id; echo " / ";   echo $todo_name; echo " not found:"; } 
      }
    else {
        echo "failed : unknown action";
    }
?>

score 0 · Answer 1 · answered Sep 08 '14 at 15:15

0

callbacks are EXACTLY what you need. They're not difficult either.

$.ajax({ ....
    success: function(data) {
         do_something(data);
    }
});

function do_something(data) {
   ... do something useful here ...
}

You're not actually DOING anything with the returned data, other than assigning it to a variable then doing some logging.

answered Sep 08 '14 at 15:15

Marc B

356,200
43
426
500

I have two alternative sources of data which, once retrieved, I have to process the same way. One source is the database, another is a JSON file. Users can choose one or the other. I want to retrieve the data from whichever source the user chooses, then drop into common code. But since the data isn't in the variable (even tried a global) once I'm out of the success: function, dropping through to the common code doesn't work. Maybe I should put the common code in a function and call that from success: Will try that and report back. – Roy Grubb Sep 08 '14 at 15:23
doesn't matter. an ajax request is an http request. the client-side code couldn't care less WHAT is producing the response: a flat file that the server is spitting out, some code that queries a DB, or an army of underpaid slaves typing in data as fast as they can: it's still an async request. – Marc B Sep 08 '14 at 15:25
Thanks, yes, I've got it now. Calling process in success: will do what I want. Your and @BadZen's explanations have straightened out my thinking. – Roy Grubb Sep 08 '14 at 15:50

score 0 · Accepted Answer · answered Sep 08 '14 at 15:26

Javascript often uses asynchronous processing. That means, you start a thing, and instead of waiting for it to finish (there's no way to "wait" - that's intentional), you pass it some code to get run when the processing is done.

This is sort of hard to get used to at first! You have to change "normal" data flows like this:

v = calculateSomeData(); doSomethingWithData(d)

to something like this:

onFinish = function(d) { doSomethingWithData(d); } calculateSomeData(onFinish)

Whatever thing thing you want to "wait for the data" is (you don't really show us here)... that thing should be set off running in your success() callback from the ajax.

I understood the async nature of the problem, but was thinking about the solution the wrong way. Thanks. — Roy Grubb, Sep 08 '14 at 15:51

retrieving data from MysQL with jQuery $.ajax via php - async issues

2 Answers2