The server remains unreachable despite multiple attempts to send data using Angular's $http

I am encountering an issue with triggering $http.post:

app.controller('editPageController', function($scope, $routeParams, $http) {

    $scope.page = $routeParams.pageid;

    // retrieve page data from the server
    $http.get('/pages/' + $scope.page).
        success(function(data, status, headers, config) {
            $scope.Name = data[0].name;
            $scope.Content = data[0].content;
            $scope.Location = data[0].location;
        }).
        error(function(data, status, headers, config) {
            alert("Could not retrieve the page from the server");
        });

    // save page data on the server
    $scope.saveEditPage = function() {

        var postOBject = {Name: $scope.Name, Content: $scope.Content, Location: $scope.Location};
        $http.post('/pages/' + $scope.page + '/edit', postObject).
            success(function(data, status, headers, config) {
                alert("Success");
            }).
            error(function(data, status, headers, config) {
                alert("Could not edit the page on the server");
            });
    };

});

The template code:

<script type="text/ng-template" id="editPage.html">
    <h1>Edit page:</h1>
    <form ng-submit="saveEditPage()">
    <p>Name:</p>
    <input type="text" ng-model="Name" value="{{Name}}">
    <p>Content:</p>
    <textarea ng-model="Content">{{Content}}</textarea>
    <p>Location:</p>
    <input type="text" ng-model="Location" value="{{Location}}">
    <p><input type="submit" value="Save"> <input type="button" value="Cancel" ng-click="$back()"></p>
</form>

Unfortunately, the $http.post is not getting triggered. I have attempted wrapping the post call around $scope.$apply without success.

How can this be resolved?

Thank you

EDIT: RESOLVED

Answer №1

Remember, JavaScript variable names are case sensitive. In this case, you declared postOBject but tried to pass postObject.

An error occurred: ReferenceError: postObject is not defined

Once I corrected the typo, everything worked as expected for me.

By the way, I suggest using an IDE with static analysis feature - it can help identify undefined variables right away. Additionally, tools like Firebug or Chrome DevTools javascript console are extremely helpful in JavaScript development.

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 nested JavaScript object within another object

I need to create an object using the angular.forEach() function and then push another object while initializing all values to false. However, the current approach is causing errors. How can I achieve this correctly? Using "item.id" and "index.id" does not ...

Verify whether an option is chosen in CakePHP 3 form

I'm working on a form where users can select Types and each type has an associated color. In my TypesController, I have a function that retrieves the list of types with their IDs, names, and colors. $types = $this->Types->find('list') ...

Enhancing Real-time Communication with NodeJS and NowJs Servers

Recently, I stumbled upon NodeJS and NowJS and I'm fascinated by the technology. My goal is to develop a Facebook-style instant commenting application where users can post comments that will instantly appear on the feed. After watching the screencast ...

I encountered a SyntaxError that reads "Unexpected token instanceof" while using the Chrome Javascript console

I find it quite surprising that the code below, when entered into the Chrome JavaScript console: {} instanceof Object leads to the error message displayed below: Uncaught SyntaxError: Unexpected token instanceof Could someone kindly explain why this ...

React Next.js failing to trigger useEffect hook on live application

Recently, in my Next.js/React application, some previously functional pages began to exhibit strange behavior. Specifically, certain Axios requests within a useEffect hook are no longer being sent at all. Additional Information: The problematic file is a ...

When using jQuery, the value of an input type text field remains constant despite any alerts

My issue involves an input text used to check if the corrected values are being displayed in an alert. However, when I modify a value in the form and check if the updated value appears in the alert box, it still shows the old value. Below is the relevant ...

javascript - data needed

Currently, I am diving into practicing javascript coding on CodeAcademy. While testing out my code in Codeacademy, I rely on console.log to display strings to the built-in browser within the platform. Everything runs smoothly there. The challenge arises wh ...

Ways to rearrange items in the navigation bar?

I am working with a Bootstrap template and I am trying to adjust the layout to be right-to-left (RTL). Currently, when I set the site title to RTL in the navbar, the buttons in the navbar also switch to RTL alignment. This is not the desired layout I want. ...

Obtaining an output from a function during an asynchronous Ajax request using the `then` method

Just started exploring these new techniques. Defining an async ajax request like this: async function makeAjaxRequest(email) { let response; try { response = await jQuery.ajax({ url: ajaxurl, type: 'POST' ...

Embed a Telegram account onto an HTML page using the <iframe> element

Is there a way to display the personal Telegram account in an iframe tag? I experimented with the code below, but unfortunately it did not produce the desired result: <iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe> ...

Update the second dropdown menu dynamically according to the choice made in the first dropdown list

I need help with creating two drop down lists, ddl1 and ddl2. When an item is selected in ddl1, I want the corresponding items to be populated in ddl2. For example, if "Accounts" is selected in ddl1, then ddl2 should display "Account officer, Account man ...

Dividing functionalities in Angular

Recently, I have developed an angular application with a unique structure. In my index.js file, I have configured the application, defined routes, directives, controllers, and filters (though I am aware that this is not considered best practice). All of my ...

Security Measures for Parsing Arrays using eval() Function

When I receive a string of an array containing objects via an http request, I use eval() to parse it. Since I am expecting an array object after parsing, how can I secure this eval() process beyond using if (Array.isArray(parsedObj)) ... Is there a bette ...

Tips for refreshing the direction route in google-maps-react

I have an array of coordinates, and when I add a new coordinate to the array, I want the route direction on the map to update accordingly. This is the code snippet from my googlemap.js file: /* global google */ import React, { Component } from "react ...

Node Express Heroku Issue: 'apiKey.id is missing'

I have a unique setup for my Express/Angular app with Stormpath handling authentication. The local implementation works flawlessly, but when I try to deploy it on Heroku, it crashes and shows the error message below. Error: "015-10-07T03:40:29.632276+00: ...

Error encountered when attempting to upload PHP file using an AJAX request

This is my HTML form validated by PHP with AJAX request. However, after submission, I encounter the following error: Notice: Undefined index: img in D:\Software Installed\xampp\htdocs\wix\users\insert_galary.php on line 12 ...

Need to remove bold formatting? Try this compact WYSIWYG editor!

Hello Stack Overflow community, I discovered a method called str.bold() that wraps text in <b></b> tags, which is perfect for a small WYSIWYG editor (I understand there are many open source solutions available, but I wanted to learn by creatin ...

What is the best way to check the validity of an if statement within JavaScript or AngularJS?

Here is a snippet of code that I have: $scope.changePassword = function () { sessionService.save($scope.sessionData); if(sessionService.account.newPassword == sessionService.account.currentPassword) { ...

End node.js once and for all

After starting my server using forever start start.js It ran normally. However, when I attempted to stop it with forever stopall The server was removed from forever list as expected Nevertheless, upon running lsof -i tcp:3000, my server still showed u ...

jquery token selection dropdown box

I am not encountering any errors with this particular issue, however upon reviewing the plugin it appears that it should only toggle "admin admin" in the dropdown list. I am currently utilizing the most recent version of jquery. Upon further investigation ...