CODEWITHSUNDEEP
angularjshttp-postsharepoint-2013
Craig Roberts
Craig Roberts

Reputation: 171

REST HTTP POST to SharePoint List with angularjs

I'm using angularjs to create a simple SPA which allows users to interact with a Bookings list in Hosted SharePoint 2013.

I've got the HTTP GET working fine and retrieving bookings for various filtered queries.

However, now I want to Insert and Update records into the list, but Fiddler shows an 'HTTP Error 403' occurred and the following under JSON tab:

value=The security validation for this page is invalid and might be corrupted. Please use your web browser's Back button to try your operation again.

I would appreciate some help confirming the following code should work. A Submit button on new booking form triggers the post:

$scope.submitForm = function () {
  //new booking
    if ($scope.editableBooking.Id == 0) {
        service.insertBooking($scope.editableBooking, function (data) {
            $scope.editableBooking = data;
        });
    }
  // Update booking
    else {
        console.log("[submitForm] Update");
        service.updateBooking($scope.editableBooking, function (data) {
            $scope.editableBooking = data;
            console.log('[updatedBooking] id = ' + $scope.editableBooking.Id)
        });
    }
}

Within my factory I have a service to insert booking:

var insertBooking = function (newBooking, callback) {
    console.log('[insertBooking] Id = ' + newBooking.Id + " Storeno = " + newBooking.Storeno);

    $http({
        method: 'POST',
        url: "/_api/web/lists/GetByTitle('Bookings')",
        data: $.param({
            Title: newBooking.Storeno,
            Description: newBooking.Description,
            BookedBy: newBooking.Bookedby,
            StartDate: newBooking.StartDate
        }),
        headers: { 'Accept': 'application/json; odata=verbose' }
    }).success(function (data) {
        console.log("[insertBooking] POST worked");
        console.log('[insertbooking] New Id = ' + data.Id);

        callback(data);

    }).error(function (er) {
        console.log('[insertBooking] Error = ' + er);
    });
}

Searching StackOverFlow is this post on Error 403 which talks about the AppManifest. I don't have access to this file - it's on a corporate intranet - and I haven't built an installable app, just angularjs files called via a CEWP.

Any suggestions please on how to update a SP list?

Upvotes: 1

Views: 2786

Answers (1)

jasonscript
jasonscript

Reputation: 6170

I've had this same error in the past

The security validation for this page is invalid and might be corrupted. Please use your web browser's Back button to try your operation again.

I found this blog by Wictor Wilén that explains how to refresh the digest token.

Basically you insert this line before your $http invocation:

UpdateFormDigest(_spPageContextInfo.webServerRelativeUrl, _spFormDigestRefreshInterval);

Some main points from the blog:

  • This method is synchronous, so there's no need to worry about callbacks etc.
  • it uses an update interval and only updates the form digest when needed – so if your digest hasn't expired, there are no additional calls to SharePoint

Upvotes: 1

Related Questions