Question

I have this HTML

<a href="/noJavascript" id="rejoinGroups">Rejoin</a>
<a href="/noJavascript" class="removeGroup" id="Testing">Remove</a>

and I am binding the links to a function using unobstrusive javascript like so:

$(function SetUp()
    {
    var el = document.getElementById('rejoinGroups');
    el.onclick = rejoinGroups;
    var removeElements = document.getElementsByClassName('removeGroup');
    for (var i = 0; i < removeElements.length; i++) {
        removeElements[i].onclick = function() {
            removeGroup(this.id);
        }
    }
  });

There may be many ‘Remove’ link generated hence why I am binding it differently, (but currently I have only one), and am passing the id as the function parameter.

These are the functions I am biding to. I have deliberately made them identical for testing as the first one (with the groupName parameter) doesn’t work, but the second one does and I don’t understand why. Once this issue is fixed I’ll actually use the groupName parameter. The second returns a 200 code and the first immediately gives an ‘Error0’ message, then goes to the /noJavascript page. I can only assume it’s something to do with the parameter, but it seems to be set correctly, so I’m not sure what it is. What am I missing?

function removeGroup(groupName){    
    $.ajax({
            url: '/tasks/aTask',
            type: 'POST',
            data: {userId:38},
            success: function(data, textStatus, jqXHR) 
            {         
               alert(jqXHR.status);                      
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
               alert("Error" + jqXHR.status);
            }
        });
        return false;        
}

function rejoinGroups(){
   $.ajax({
            url: '/tasks/aTask',
            type: 'POST',
            data: {userId:38},
            success: function(data, textStatus, jqXHR) 
            {         
               alert(jqXHR.status);                      
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
               alert("Error" + jqXHR.status);
            }
        });
        return false;
}    

this is what I get in the chrome dev window for the second function:

Request URL:http://localhost:8888/tasks/aTask
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:9
Content-Type:application/x-www-form-urlencoded
Cookie:dev_appserver_login=[e-mail]:true:18580476422013912411; JSESSIONID=10yktze1j72fa
Host:localhost:8888
Origin:http://localhost:8888
Referer:http://localhost:8888/users/38
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
X-Requested-With:XMLHttpRequest
Form Dataview URL encoded
userId:38
Response Headersview source
Content-Length:0
Server:Jetty(6.1.x)

and this is what I get for the first (failing) one:

Request URL:http://localhost:8888/tasks/aTask
Request Headersview source
Accept:*/*
Content-Type:application/x-www-form-urlencoded
Origin:http://localhost:8888
Referer:http://localhost:8888/users/38
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
X-Requested-With:XMLHttpRequest
Form Dataview URL encoded
userId:38

Answer 1

I’m not very sure, but I think it might be because your anonymous function is not returning the result of the function. Try changing:

removeGroup(this.id);

to

return removeGroup(this.id);