Question

On the order page, there is 3 buttons

[New Order] [Processing] [Completed]

If I click on the processing button – the background of the button should change. It will also update the order status to the database.

[New Order] button will have green background by default. If I click on the [Processing] button, the background-color will turn into green. [New Order] will no longer have a background-color.

What the best way dealing with this using Jquery Ajax?

Answer 1

Use jQuery’s css and get/post functions….

HTML:

<button class="button">New Order</button>
<button class="button">Processing</button>
<button class="button">Completed</button>

CSS:

button.button {
    background-color:#fff;
    border:thin solid #000;
}
button.button:first-child {
 background-color:green;   
}

JS:

$(document).ready(function() {
    $("button.button").click(function() {
      $("button.button").css("background-color","#fff");
      $(this).css("background-color", "green");
        $.post("updateOrder.php", {orderStatus: $(this).text()}, function(data) {
           //database updated completion logic here 
        });
    });
});