The post function is causing an issue and displaying an error

I am currently working on a test application that is based on the tutorial found at https://docs.angularjs.org/tutorial/step_00. The app is functioning well, however, I am encountering an issue with the post method.

index.html

...
<div class="control_panel" ng-controller="phonecatControllers">
            <button class="btn btn-default" ng-click="chiliSpicy()">Chili!</button>
            <button class="btn btn-default" ng-click="sendData()">send!</button>
</div>
...

controllers.js

'use strict';

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', '$log',
    function ($scope, $http, $log) {
        $http.get('http://localhost:8080/webapp/rest/myresource/posts').
            success(function (data) {
                $scope.posts = data;
            });

        $scope.data = "hello world";

        $scope.chiliSpicy = function () {
            $log.info('chili function');
        };

        $scope.sendData = function () {
            $http.post('http://localhost:8080/webapp/rest/myresource/',  {'data' : $scope.data} )               
                .succes(function (data, status, headers, config) {  
                    $log.info('sent');
                })
                .error(function (data, status, headers, config) {
                    $log.error('not sent')
                });
        };
    }]);

The GET method works fine and the chiliSpicy function also works. However, there is an error thrown by the sendData function at line 39.

 TypeError: undefined is not a function
    at l.$scope.sendData (http://localhost:8080/webapp/controllers.js:39:18)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:198:424
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:798:21
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:310)
    at l.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1478:22)
    at HTMLButtonElement.<anonymous> (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:797:25)
    at HTMLButtonElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:32:363)

The server is able to receive the data, but the success function does not execute. Any ideas or suggestions? Thank you.

Answer №1

Typo found in the word success, spelled incorrectly as succes.

Answer №2

There seems to be a typo in the code. It should say 'success' instead of 'succes'.

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', '$log',
    function ($scope, $http, $log) {
        $http.get('http://localhost:8080/webapp/rest/myresource/posts').
            success(function (data) {
                $scope.posts = data;
            });

        $scope.data = "hello world";

        $scope.chiliSpicy = function () {
            $log.info('chili function');
        };

        $scope.sendData = function () {
            $http.post('http://localhost:8080/webapp/rest/myresource/',  {'data' : $scope.data} )               
                .success(function (data, status, headers, config) {  // !!! here is line 39
                    $log.info('sent');
                })
                .error(function(data, status, headers, config){
                    $log.error('not sent')
                });
        };
    }]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a personalized autocomplete textfield in Yii is a straightforward process

As a beginner in yii, I am looking to create a custom auto complete feature instead of using CJuiAutocomplete. Can someone please provide guidance or assistance on developing this custom autocomplete text field? The goal is to display the name in the text ...

Utilizing the fs module in Node.js

Hello friends! Currently I am faced with an issue while trying to import the fs module in nodejs. Initially, I utilized require to import it like so: const fs = require('fs'); Everything was functioning smoothly until recently when it suddenly ...

Issue found in VS2015 with the sequence of AngularJS TypeScript ts files within the appBundle.js file

I've been diving into AngularJS and TypeScript with the VS2015 RC Cordova TypeScript project. Recently, I created a "MyController.ts" file in the same folder as "index.ts". The code worked perfectly fine: module MyTestApp{ export class MyContro ...

The download attribute is not functioning properly on both Chrome and Edge browsers

I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...

Troubles Encountered While Implementing Splice Function within Ajax for Data Transmission

I attempted to apply a splice function to the array in this particular context, but for some reason, the page only updates after submitting the form. Is there anyone available who knows how to resolve this issue? submitHandler: function(form) { var ...

Tips for retrieving the return value from a function with an error handling callback

I am having an issue with my function that is supposed to return data or throw an error from a JSON web token custom function. The problem I am facing is that the data returned from the signer part of the function is not being assigned to the token const a ...

What is the best way to use Immer to update Zustand state when incorporating objects that are added through a controlled form using React-Hook-

Having some trouble with integrating Zustand and Immer using React-Hook-Form. My goal is to capture a series of values from a form, store them in a list, and allow for the addition of new objects to that list. In this scenario, the user inputs data for a ...

Why was the express.js boilerplate code created?

As a newcomer to Node and Express, I am curious about the purpose of the boilerplate directories that are automatically generated when setting up an express project. I have searched online for explanations on the significance of these files without much l ...

Show only the selected option with jQuery's on change event and disable or remove the other options

My goal is to make it so that when a user selects an option from a dropdown menu, the other options are disabled or hidden. For example, if option "1" is selected, options "2", "3", and "4" will be removed: <div class="abc"> <div class="xyz"> ...

Managing the ajax response to showcase a button within datatables

Here is my current datatable structure: <table id="list" class="display" width="100%" > <thead> <tr> <th>Title</th> <th>Description</th> <th>delete</th> ...

Ways to bring GIFs into NextJS

I am currently working on my portfolio website using Nextjs and I would like to incorporate gifs into the site. However, I have been struggling to figure out how to do so. Below is the code that I have been working with: https://i.stack.imgur.com/zjoiD.pn ...

Hide the form using jQuery specifically when the login submit button is selected, not just any random button

One issue I am facing is that when a form is submitted correctly, it hides the form. However, I have added a cancel button to close the pop-up thickbox window, but instead of closing the window, it also hides the form. How can I ensure that hitting cancel ...

Steps for generating an observable that mirrors the structure of an observable array

I am in the process of creating an observable array using JSON data retrieved from the server. var ViewModel = function (data) { var self = this; self.list = ko.observableArray(data); self.selected = ko.observable(); } ...

Transmit information via AJAX to the @RequestBody annotation in a Spring application

When working with Spring Java, I used response entity and request body to insert data but encountered an error - 404 not found. This is my controller: @RequestMapping(value = "insertuserlogin/", method = RequestMethod.POST) public ResponseEntity<?> ...

Every time I rotate my div, its position changes and it never goes back to

Trying to create an eye test by rotating the letter "E" when a directional button is clicked. However, facing an issue where the "E" changes position after the initial click instead of staying in place. Here is a GIF showcasing the problem: https://i.stac ...

"Encountering a Type Error while implementing the $resource service in Angular

I encountered a strange error while working with angularjs. I incorporated the $resource module in angularjs to handle rest requests by adding this service: $provide.service("CustomerService", ['$resource', function ($resource) { return $res ...

What is causing the addListener function in the events class to malfunction?

I am a beginner in the world of node.js and attempting to execute this piece of code: var eventlib= require('events'); var emitter= new eventlib(); eventlib.addListener('MessageEvent', function() { console.log('Registered the ...

What is the method for creating a function using the const keyword in JavaScript?

I trust you are doing well. Recently, I have embarked on a coding journey and encountered an interesting challenge. The task requires me to create a function that outputs specific weather conditions for different countries to the console: The weather in ...

Adding labels to a JavaScript chart can be done by using the appropriate methods

https://i.stack.imgur.com/uEgZg.png https://i.stack.imgur.com/y6Jg2.png Hey there! I recently created a chart using the Victory.js framework (check out image 1) and now I'm looking to incorporate labels similar to the ones shown in the second image ab ...

How can I retrieve the position of a div or an image within a div (specifically the top and left coordinates) and incorporate these values into CSS?

I'm currently working on a website that is dynamic and utilizes bootstrap. I am looking to incorporate an animation where the dynamic thumbnails in the col-md-4 div zoom to 100% when clicked, appearing at the center of the container. I am struggling ...