Question

I want to enhance my tool’s page where as soon use click a button. Request goes to server and depending upon return type (fail/pass) i change color of button. No Refresh/page reload

Page has multiple buttons : some what like below.

Name       9-11  -  11-2      2-5

Resource1 - Button - Button - Button 

Resource2 - Button - Button - Button 

Resource1 - Button - Button - Button

I am a c++ programmer so you might feel i asked a simple question

Answer 1

Here’s a sample of jQuery Ajax posting a Form. Personally, I’m unfamiliar with PHP but Ajax is the same no matter what. You just need to post to something that can return Success = true or false. This POST happens asynchronously so you don’t get a page refresh unless you do something specific in the success: section.

$("document").ready(function () {

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: yourUrlHere,
                dataType: "json",
                cache: false,
                type: 'POST',
                data: $(this).serialize(),
                success: function (result) {
                    if(result.Success) {
                        // do nothing
                    }                           
                }
            });
        }
        return false;
    });
});

Of course you don’t have to be doing a POST either, it could be a GET

type: 'GET',

And if you don’t need to pass any data just leave data: section out. But if you want to specify the data you can with data: { paramName: yourValue },

The cache: false, line can be left out if you want to cache the page. Seeing as how you aren’t going to show any changes you can remove that line. jQuery appends a unique value to the Url so as to keep it from caching. Specifying type: "json", or whatever your specific type is, is always a good idea but not necessary.