刷新div ajax中的元素

Question

I have a small web application that manages some lessons and reports the statistics for them (completed and not completed). When one clicks on the .finish button, I would like to refresh the statistics div of the lessons.

Here is the php file:

 <?php
    include_once('config_mysql.php');
    $data = new MysqlClass();
    $data->connect();
    $sql = "select * from Lessons";
    $result = mysql_query($sql);
    <div class="history">
    while($row = mysql_fetch_array($result)) {
     <div>
      <h2>name: <?php echo $row['name']; ?>
      <h2>completed: <?php echo $row['completed']; ?>
     </div>
    }
   </div>
    ?>

And the event handler attached to the .finish class:

$(document).ready(function () {
    $('.finish').click(function(event){
        completeLesson();
         $.ajax({
                    type: "POST",
                    url: "statistic.php",
                    success: function(html){

                    }
        });  
    }
}

I did not include the completeLesson() function (which also makes an AJAX call) because it is not important.

I would like to refresh the statistics of lessons without refreshing the page. I tried to refresh it with an AJAX call but it did not update the data. Thank you in advance for your answers.

Answer 1

You have atleast 2 problems.

First, you need to do something with the variable html in your success callback.

Second, since completeLesson makes its own ajax call, you have to wait for that call to return before you put in your call to statistic.php. if you don't wait, there's a chance that the second Ajax call will be completed before the first and it won't bring in the new data.

One solution would be to pass completeLesson the second Ajax call as a callback function.

function completeLesson ( /* your other arguments */, callback) {
    // this would be the Ajax call already in completeLesson
    $.ajax ( {
        // whatever arguments you use for the ajax call
        success: function (data) {
            // the code you had in here before...
            // after all that code add these 2 lines
            if (callback)
                callback();
        }
    });
}

And now, you change the event listener for finish to (assuming statistic.php is echo'd out between <div id="result"><?php include 'statistic.php'; ?></div> and also that you've added id="#hs" to the .history div):

$('.finish').click(function(event) {
    completeLesson(function() {
        $.ajax({
            type: "POST",
            url: "statistic.php",
            success: function(html) {
                $('#hs').remove();
                $('#result').prepend(html);
            }
        });
    });  
}

You may want to use $('#result').append(html) instead of prepend.