Jquery .ajax not working as expected
<p>I've got the following code to call a json web service in a separate functions.js file.</p>

<pre><code>function getMajorGroups(){

var element = $(".item-group-button");

$.ajax({
    type:"GET",
    url:"localhost:6458/posApplication/getAllMajorGroups",
    data:"{}",
    contentType:"application/json; charset=utf-8",
    dataType:"json",
    done:successResult(majorGroups),
    fail:errorResult(error)
});
}

function successResult(majorGroups){
    var mGroups = response.d;
    $("#item-groups").empty();

    $.each(majorGroups ,function(){
        var h3 = $('h3').append(majorGroups.code);
        element.append(h3);
        $("#item-groups").prepend(element);
    });
}

function errorResult(error){
    alert("error");
}
</code></pre>

<p>When I run the web page and I use firebug to trace the steps I can see the script is executed. But it does not execute the success or failure code inside the ajax call. Am I doing anything wrong here?</p>

<p>Below is an example of the string which the service return.</p>

<p>{"majorGroups":[{"update":"false","hasMore":"false","status":"A","description":"Beverage","majorGroupId":"48","code":"Beverage"},{"update":"false","hasMore":"false","status":"A","description":"Laundry","majorGroupId":"51","code":"Laundry"},{"update":"false","hasMore":"false","status":"A","description":"Cigarette","majorGroupId":"50","code":"Cigarette"},{"update":"false","hasMore":"false","status":"A","description":"Food","majorGroupId":"47","code":"Food"},{"update":"false","hasMore":"false","status":"A","description":"Health Center","majorGroupId":"52","code":"Health Center"}],"failure":"false"}</p>
