$resource update method behaving strangely

Question

Reading/Creating/Deleting is all working fine for a particular $resource, however Editing is not going so well.

In my app config I have:

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

This is working fine for both POST/PUT, maybe it's worth mentioning.

My $resource definition looks like:

app.factory('Project', function($resource) {
    return $resource('project/:id',{},{
        query: { method: 'GET', isArray: false },
        update: { method: 'PUT' }
    });
});

Then in ProjectEditCtrl:

var ProjectEditCtrl = function ($scope, $routeParams, Project, $location) {
    var id = $routeParams.id;
    $scope.projectForm = Project.get({id: id});
    $scope.projectDo = function() {
        var params = $.param($scope.projectForm);
        Project.update({id: id}, params);
    }
}

Now when I actually run $scope.projectDo() I get a string of requests, not just the PUT, shown in this screencap:

Why are there any other calls other than the PUT project/1? Note that the DELETE 500's are occurring because there's no :id in the the path.

UPDATE:

Just for fun, I decided to alter the entire $resource definition to the following:

query: { method: 'GET', isArray: false },
update: { method: 'PUT' },
save: { method: 'GET' },
delete: { method: 'GET' },
get: { method: 'GET' }

Testing using this definition confirms that the Add/Delete controllers respect it, and attempt to use GET for Project.delete and Project.save.

Running Project.update now seems to exhibit fewer weird calls. Where as before there was:

• POST x1
• GET x2
• DELETE x2
• PUT x2

After forcing all except update() to GET, I now see:

• no POST
• GET x2
• DELETE x1
• PUT x2

Still just as confused, but possibly useful info.

UPDATE 2:

Decided to try abandoning the PUT method so Project.update() uses POST instead, however a similar problem occurs with lots of undesired requests.

Also note, that all of these requests fire at the same point in time, meaning none of them are sequential or reacting to the completion of another request.

UPDATE 3:

Tried using a different word other than update to see if I was somehow trampling on existing code, but Project.whaaaat() has the same effect.

UPDATE 4:

OK getting a bit closer to the truth now. Tried a method that was not defined, and the same behavior occurs. I suppose I'm simply firing every defined method when I call a method that's not recognized?

UPDATE 5:

Looks like the problem is caused by the combination of these 2 lines:

$scope.projectForm = Project.get({id: id});
var params = $.param($scope.projectForm);

In running $.param on the object returned by Project.get it's calling all Project methods since they are actually properties.

Running a loop over projectForm properties with typeof reveals:

name is a string id is a number $get is a function $save is a function $query is a function $remove is a function $delete is a function $update is a function

Is there a way to run $.param on an object and prevent the serialization of un-serializable properties?

Answer 1

Thank you so much for posting your findings. $.param() caused havoc when used with $httpProvider to send x-www-form-urlencoded data to my server. Was wondering where all those crazy background requests were coming from!

Answer 2

I ran into a the same problem recently using angularjs and codeigniter. It turns out that it depends on how you define your parameters.

var param1 = {'name':'some name'}; 
var param2 = { name :'some name'}; 
$http.post('some url/',$.param(param1),....); // babies die
$http.post('some url/',$.param(param2),....); // nuclear war averted