.Ajax with jQuery and MVC2

Question

Im trying to create an ajax (post) event that will populate a table in a div on button click.

I have a list of groups, when you click on a group, I would like the table to "disappear" and the members that belong to that group to "appear".

My problem comes up when using jQuery's .ajax...

When I click on the button, it is looking for a controller that doesnt exist, and a controller that is NOT referenced. I am, however, using AREAS (MVC2), and the area is named Member_Select where the controller is named MemberSelect. When I click on the button, I get a 404 stating it cannot find the controller Member_Select. I have examined the link button and it is set to Member_Select when clicked on, but here's the ajax call:

$.ajax({
    type: "POST",
    url: '/MemberSelect/GetMembersFromGroup',
    success: function(html) { $("#groupResults").html(html); }
});

I havent been able to find any examples/help online. Any thoughts/suggestions/hints would be greatly appreciated.

Thanks!

Answer 1

Have you tried navigating to /MemberSelect/GetMembersFromGroup to see what you get? - if it's 404'ing it's because the route can't be matched to a controller/ action.

I've not used the new areas functionality, but I'm not sure that the URL you've got is correct...I would have thought it would have been /AREANAME/MemberSelect/GetMembersFromGroup...but I could be wrong..!

Answer 2

When I did this, it worked fine. I didn't use POST and I don't know what AREAS means.

$("#item").autocomplete({
    source: function(req, responseFn) {
        addMessage("search on: '" + req.term + "'<br/>", true);

        $.ajax({
            url     : ajaxUrlBase1 + "GetMatchedCities/" + req.term,
            cache   : false,
            type    : "GET", // http method
            success : function(msg){
                // ajax call has returned
                var result = msg;
                var a = [];
                if (result !== null){
                  for(var i=0; i < result.length; i++) {
                    a.push({label: result[i].prop1, id: result[i].prop2});
                  }
                } 
                responseFn(a);
            }
        });
    }
});