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

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...

Create a custom Angular directive that allows you to replace tags while inserting the template

I have created a custom directive that can take templates based on the attribute provided. Check out the Plnkr example JS var app = angular.module('app', []); app.directive('sample', function($compile){ var template1 = '<d ...

Loading external scripts prior to component loading in Vue.js

Within my Vue project, I have the need to fetch a script from a server location (e.g. https://myurl.com/API.js). This script contains a variable that I intend to utilize within my Vue component/view. The issue arises when I attempt to load this script usi ...

Issue with Vue 2: Promise does not resolve after redirecting to another page

Although I realize this question might seem like a repetition, I have been tirelessly seeking a solution without success. The issue I am facing involves a method that resolves a promise only after the window has fully loaded. Subsequently, in my mounted h ...

Regular expressions are used for validation purposes

I've been using the regular expression shown below to validate certain text: ^\d+(?:fs|sf)[-+]\d+[hmd]$/ Here are some sample texts I have validated with this regular expression: 20fs-4d 10sf+20m 3fs-2h So far, it's been working we ...

Create a Vue application that is built on modules which could potentially be absent

I am currently developing a Vue+Vite app with module-based architecture. I have several Vue components and some parts of the app are functioning correctly. However, I want to ensure that the missing components are not imported or used in the application. H ...

Developing with Phonegap Build: A Guided Process

With all the conflicting information available, I am seeking clarity on this topic. Objective: To create and enhance a Phonegap app using Phonegap Build. 1) My preference is to utilize Phonegap Build without needing to install Android and iOS SDKs. 2) I ...

The imported package is not functioning properly within the project

I've recently developed a Typescript Package and I want to test it in an application before publishing it on NPM. The main file (index.ts) of the package is structured like this => import Builder from './core/builder'; export default ...

javascript increment variable malfunctioning

Below is the script I am working with: $(function() { var fileCount = {{$image_counter}}; $('#remove-file').click(function() { fileCount--; }); if (fileCount >= '5'){ $("#d ...

Is there a way to showcase the generated results on a graph after the user presses the submit button?

I've been working with to generate a bar chart. Currently, when the user clicks 'submit', the input numbers are shown in a graph on http://jsfiddle.net/jx9sJ/5/. Now, I want to make some changes. I am attempting to send the input numbers t ...

Issue with adding dynamic keys to state in Next.js using Zustand for state management not resolving

I've been experimenting with dynamically adding a key to a state in zustand. I've attempted various methods such as 1. const store = (set, get) => ({ keyAttrib: {key1: "value1", key2: 2}, update: (key, value) => { let new ...

StopPropagation() method in Ng-class not functioning properly in Angular for parent element

I am facing an issue with 2 nested ng-repeats. The parent one is supposed to add a class based on ng-click, but even when I click the child, it still triggers when I don't want it to. <div class="add-filter-tags" data-filter="{{f1}}" ng-class="{&a ...

What is the process for including item prices in Angularjs?

I have a question regarding adding work item costs and encountering issues with displaying the original values. Here's an example: item[1].cost = 2, item[2].cost = 2 .. When I add the cost of the 3rd item (item[3].cost = 8), the total shows as 228. ...

Disabling the ability to edit the rightmost portion of an input number field

I am looking for something similar to this: https://i.stack.imgur.com/ZMoNf.jpg In this case, the % sign will be shown in the input field by default and cannot be changed or removed. The user is only able to modify the number to the left of the % sign. P ...

Selecting a JSON object at random

My data is stored in JSON format. [ ["Apple","A"], ["Orange","O"], ["Grape","G"], ["Kiwi","K"] ] Is there a way to randomly select an array item from this data (e.g. ["Grape","G"])? var letterNum = ""; $.ajax ( { url:"getletter.json" }).done( ...

Enhance Your GoJS Pipeline Visualization with TextBlocks

I am facing challenges in customizing the GoJS Pipes example to include text within the "pipes" without disrupting the layout. Although I referred to an older response on the same query here, it seems outdated or not detailed enough for me to implement wit ...

The addition operator cannot be used with the Number type and the value of 1

Encountering an issue where the operator '+' cannot be applied to types 'Number' and '1' buildQuerySpec() { return { PageSize: this.paging.PageCount, CurrentPage: this.paging.PageIndex + 1, MaxSize: '' ...

Updating data in a table upon submission of a form in Rails

In my Rails 3.2 application, I am displaying a table of results using the @jobs variable passed to the view from a SQL query. I want to add a button that will trigger a controller action when clicked. The action should perform some database operations and ...

Is there a clear definition of behavior when using non-Promise values with Promise.all?

Are the behavior of Promise.all() docs guaranteed in Node when non-Promise values are passed? For example, using Node 6.10.2: Promise.all([1, 2, 3]).then( res => console.log(res) ); In this scenario, it prints [ 1, 2, 3 ], but is it sure that Promis ...

Picture is not showing up on my MVC software

Within a table containing multiple other tds, I am having an image tag. <table class="MyClass"> <tr> <td> @Html.LabelFor(m => m.ShopName) </td> <td> @Html.TextBoxFor(mode ...