ajax and php flag script - set and check for cookie and work with DB

Question

As the title states, I am looking for a flag script, explained below:

It should be like any video site flag script: click the small grey flag once, it becomes colored and you cannot click it again. It should be done in ajax as I don't want my user to have his page reloaded (and all activity restarted) just because he made the mistake of flagging an item on my site.

The php behind should not add multiple flags from the same user - i though it would be a good idea if it checked for a cookie, if not set -> increment field in MySQL and set cookie, if set ->ignore.

This is really urgent, as I am a total noob at ajax and Javascript and I need it done by Tuesday...

The reason I need this is that I really want to know how it's done because a project that we are studying at school has something similar and my homework is to think of a solution that would accomplish the same thing, without looking at the initial source code. I thought of a solution but don't have the time to implement it because this week as well as the next one, I have a ton of exams and I really don't want to miss any...

Thanks in advance for any help you give me!

Cheers!

Answer 1

Make an ajaxrequest, and let that do you php handling, when its done you send the return to your page.

I made you a template. I guess you can do the PHP yourself?

function setFlag(state){
    var ajaxRequest;  // The variable that makes Ajax possible!
    //Set AjaxRequest for all Major browsers, nothing to do here, this is standard
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser is lame!");
                return false;
            }
        }
    }
    // When the Ajax Request waits for php you get some status codes, everything is done when it reaches 4. Add your javascript events etc here...
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState < 4){
        //document.getElementById('ajaxCatchbox').innerHTML = "Load...";
        }
        if(ajaxRequest.readyState == 4){
    // Some Javascript to change your flag colour image
    }
    }

    // this is here your php happens without page reload. (In the php file)
    var queryString = "?state=" + state;
    ajaxRequest.open("GET", "ThePhpFileThatDoesYourDatabaseHandling.php" + queryString, true);
    ajaxRequest.send(null);
}

The PhP does your database and sets the right var on 1 so you'll know which flag is clicked. Every time you refresh the page you use this var to display which flag is clicked. Just when there is no flag clicked yet, you'll add this function and in the Javascript change it on the fly because on that moment you havent reloaded yet.

i added something like state to the function coz I thought you might want to know which flag is clicked but ofc you can add ID our flagnumber etc... and you can send that to php using the querystring...

Gr