AJAX async call of PHP function to update values in MYSQL database not working

Question

I have the following script:

$(function (){
            $('.press_me').click(function(){
            var request = $.ajax({
                                    type: "POST",
                                    url: "counter.php"

                                  });
                                  request.done(function( msg ) {

                                        alert('Success');
                                        return;

                                  });
                                  request.fail(function(jqXHR, textStatus) {
                                        alert( "Request failed: " + textStatus );
                                    });
            });
    }); 

and counter.php:

<?php
// Connection to database
  $connection=mysqli_connect("host","user","pass","db");
// Check connection
  if (mysqli_connect_errno())
    {
    echo 'NOT_OK';
    //echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

// Increasing the current value with 1
 mysqli_query($connection,"UPDATE table SET amount = (amount + 1) WHERE ID='1'  ");

  mysqli_close($connection);

  echo 'OK';   ?>

1.In order to see the updated value, I have to refesh the page, which i believe it means that the ajax is not working asynchornously, and that's what i would want.i tried everything with the async parameter but i failed.

2.What update clause should i use so as to update each row separately, as the code in this state updates only one row or if i omit the where clause, it updates all of them. Can anyone help me?

Answer 1

To answer your 2 questions:

1. You're not telling the page what to do with the result once the AJAX request has been completed. All you're doing is an alert that says "Success". If you want the page to update with the new number of amount from your database, your php script has to give this new amount back to the AJAX function. See javascript part below, where it says "Here comes the part where you actually update...". In this part, you will have to put something that actually updates the HTML (DOM) of the web page without the user refreshing the webpage. This can easily be done with javascript. See below.

2. I'm not sure what you mean. Right now you are increasing the amount in table by 1 where ID='1', so only the amount of the row with ID = 1 will increase by 1. I'm assuming you have multiple buttons with class='press_me'. If that is the case, you'll have to give all these buttons a differnt ID, and then pass that ID along to the AJAX post call.

So your button would be:

<button class="press_me" id="ID HERE">Click me</button>

And your javascript would be:

$('press_me').click(function(){ 
    var button_ID= $(this).attr("id");

    $.post('counter.php', {button_ID: button_ID}, function(result){

        // the var 'result' is the new count of this button, 
        as generated by the PHP page below. Do with this var whatever 
        you want. If you want to show the new amount of this counter 
        in a div for example, you can do:

        $('.counter_div').html('New count: ' + result);

    });
});

And your PHP:

<?php
$connection=mysqli_connect("host","user","pass","db");

mysqli_query($connection,"UPDATE table SET amount = (amount + 1) WHERE ID='" . $_POST["button_ID"] . "'");

//Get the new count for this button, and echo it, so it can 
be picked up by the AJAX call return:

$get_count= mysqli_query("SELECT * FROM `table` WHERE `ID`='" . $_POST["button_ID"] . "'");
$count_data= mysqli_fetch_array($new_count_data);
echo($count_data["amount"]);

mysqli_close($connection);
?>