Question

What i want to do?
I am thinking of changing javascript ajax to jQuery ajax. It seems shorter, and i saw many people using it, but i can’t really get it working.

What i have so far?
I have an element:
<li id="unique_id" onmousedown="check_element(event, this)">1</li>
When i click on the element, it check which key has been pressed, if its mouse1 then checks background of the element. If element has no background color it changes it to “red” and add id of the element to MySQL database using ajax.
If it had red background already (meaning it was added before) it uses ajax to delete it from database.

Code
Checking function

function check_element(evt, e){
    if(evt.which == 1){
        if(e.style.background == "") {
            e.style.background = "red";
            send_with_ajax("add", e);
        } else {
            e.style.background = "";
            send_with_ajax("delete", e);
        }
    }
} 

Ajax (with javascript):

function send_with_ajax(action, e){
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    xmlhttp.open("GET","ajax/send_calendar.php?data="+e.id+"&action="+action+"",true);
    xmlhttp.send();
}

send_calendar.php is nothing out of ordinary. Just grabs variables from $_GET[''] and INSERTS or DELETES values from database. The thing is, how can i change this function to make it jQuery Ajax?

What have i tried?

function send_with_ajax(action, e){
    $.Ajax({
        type: "GET",
        url: "send_calendar.php",
        data: "data="+e.id+"&action="+action+"",
        success: function(msg){
            alert( "Data Saved: " + msg ); //never shows this alert
        }
    });
} 

also i get error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'Ajax'

PS. Never worked with jQuery Ajax before, so i have NO CLUE what i am doing wrong.

Answer 1

It’s $.ajax (case-sensitive), not $.Ajax.

Also notice, the data option accepts an object as input and $.ajax will do the parameter serialization by itself.

$.ajax({
    type: "GET",
    url: "ajax/send_calendar.php",
    data: {
        "data" : e.id,
        "action": action
    },
    success: function(msg) {
        alert("Data Saved: " + msg);
    }
});

There also exist shorthand methods for GET and POST requests, .get() and .post() respectively.