multiple status buttons - background-color

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.

W开发者_Go百科hat the best way dealing with this using Jquery Ajax?

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 
        });
    });
});

Just do what you described... I'll start you up. I'm not feeling like doing all your work! :D

in the html

<input id="processing" type="button" />
<input id="newOrder" type="button" />

in a script

$(document).ready(function() {
  $('input#newOrder').click(function(){
    $(this).css([changeBg]);
    $.ajax({
      url: "[pageToHandleUpdate]",
      data: "[update DB data]",
      success: function(){ //this is what I do after finishing the ajax call...
        $(this).css([change the style]);
        $('#newOrder').css([changeBg]);
      }
    });
    return false;
  });
}); 

The [...] are incomplete.