why isn't my function sending the POST

Question

Here's the fiddle in reference to the broken code. When I try it, the server it is supposed to be sending to doesn't respond, which leads me to believe it's not recieving any traffic from my app. Is the problem obvious? If not, what troubleshooting methods can I use to investigate the problem?

stackoverflow wants me to include my code inline so here it is.

index.html

<div ng-controller="DataEntryCtrl">
      <form ng-repeat="entryField in entryFields">
            <input type="text"
                   ng-model="entryField.fieldData"  
                   placeholder="{{entryField.pHolder}}">
      </form>

      <input type="button" ng-click="sendJSON()" value="Object To JSON" />
      <hr/>
       {{res}}
     <ul>
       <li>ID: {{entryFields.id.fieldData}}</li>
       <li>description: {{entryFields.description.fieldData}}</li>
       <li>date: {{entryFields.date.fieldData}}</li>
    </ul>            

</div>

controller.js

'use strict';
/* Controllers */
var app = angular.module('Hubbub-FrontEnd', ['ngResource']);

app.controller('DataEntryCtrl', function($scope,$resource) {
   $scope.entryFields = {
     id:           {pHolder:'ID goes here',fieldData:""},
     description:  {pHolder:'Description goes here',fieldData:""},
     date:         {pHolder:'Drop Dead Date goes here',fieldData:""}
   };

   $scope.showJSON = function() {
       $scope.json = angular.toJson($scope.entryFields);
   };
   $scope.sendJSON = function() {
       $scope.entry = angular.toJson($scope.entryFields);
       $scope.res = $resource('http://10.64.16.6:3000/Create',
         {create:{method:'POST'}},{params:$scope.entry});
       };



});

Good question, but title lacks "angularjs". – Wiseman Feb 19 '13 at 14:17 — Wiseman, Feb 19 '13 at 14:17

jaime · Accepted Answer · 2012-12-05T02:02:43.587

3

Currently you are creating the same resource every time the user clicks the button.

What you could do is create the service somewhere in your controller

var Res = $resource('http://10.64.16.6:3000/res/:id', {id: '@id'});

Then, when a user clicks the button, create a new instance of the resource and pass it the data you want to send

$scope.sendJSON = function() {
    $scope.entry = angular.toJson($scope.entryFields);
    var r = new Res();
    r.$save({params: $scope.entry});    
};

The method $save in inherited from ngResource and does a POST request. Here's a jsfiddle http://jsfiddle.net/jaimem/FN8Yg/19/

In the developer tools the request method will be listed as OPTIONS because it makes it from jsfiddle. The request params will be something along these lines

params:{"id":{"pHolder":"ID goes here","fieldData":"sdf"},"description":{"pHolder":"Description goes here","fieldData":"sdf"},"date":{"pHolder":"Drop Dead Date goes here","fieldData":"sdf"}}

You can read more $resource here

edited Dec 05 '12 at 02:02

answered Dec 05 '12 at 01:51

jaime

41,281
10
80
52

Okay now I'm getting "resource failed to load", but no response from my server. I would think if this was a problem with my server, it would have complained about a bad request, or something like that. Anyway, closer to the solution than I was before, so thanks. :) – Michael Litchard Dec 05 '12 at 18:36
So it seems it was not sending the traffic to port 3000. I've modified my server to listen on port 80, and will figure this problem out once I've got the bigger ones solved. – Michael Litchard Dec 05 '12 at 20:32
Also, several unwanted Access-Control-Request-Headers are being sent. Removing those may solve a big problem, I'm going to go investigate that. – Michael Litchard Dec 05 '12 at 21:05

score 1 · Answer 2 · edited May 23 '17 at 12:27

This question might prove useful as well AngularJS performs an OPTIONS HTTP request for a cross-origin resource. You may need to set up some headers to allow cross origin support.

Beyond that I think you may also have your parameters mangled when you're creating your resource:-

$scope.res = $resource('http://10.64.16.6:3000/Create',
     {create:{method:'POST'}},{params:$scope.entry});

Try:

$scope.res = $resource('http://10.64.16.6:3000/Create', null,
     {create:{method:'POST', params: $scope.entry}});
$scope.res.create();

And yes you could create the resource ahead of time so you aren't recreating it every time the button is clicked.

This didn't solve the problem, but made apparent some of the things (maybe all?) that is wrong with my code. — Michael Litchard, Dec 05 '12 at 01:48

why isn't my function sending the POST

2 Answers2