0

I wrote a code that enables me to post an input value (using AngularJS 1.3.5 $http.post) and save it into a db then display it in my html page. To get the new input value after clicking on save I have to refresh the page to display it. I must find a solution without using php and jQuery. I saw an answer Here: changing from $http.post to $xhr.post wasn't possible may be it's caused by the angularJs version I am using. What should I do? 

<form ng-submit="save()">
  <input ng-model="stack"></input>
  <button type="submit">Save</button>
<p>{{stack}}</p> 
</form>
$scope.save = function(url, data1) {
            /* post to server */
            $http({
                url : url,
                data : {
                    "stack" : data1
                },
                method : "POST",
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).success(function(data, status, headers, config) {
                $scope.stack = data.stack;
            }).error(function(data, status, headers, config) {
                $scope.status = status + ' ' + headers;
            });

        };

Notice that I am displaying the input value in my html page from the backend.

Community
  • 1
  • 1
nour nour
  • 85
  • 1
  • 2
  • 9

2 Answers2

3

Bind the get call inside a function and call that function inside the same controller, this will update data without refresh. 

  $scope.getData = function() {
        $http({
            method : 'GET',
            url : '/getData'         //any url
        }).then(function(response) {
            //success code

        })
    }
    $scope.getData();
Deepanjan
  • 649
  • 2
  • 8
  • 15
  • thank you for your answer. The call of get method in the controller caused an access allow control error. I updated my question with my controller code – nour nour Jun 23 '16 at 09:27
  • Are you returning the updated object from the backend? – Deepanjan Jun 23 '16 at 10:05
  • yeah after inserting it in the db I used the select request to call it from the db and get it in the web service and finally display it – nour nour Jun 23 '16 at 10:09
  • So you are making a get call in the frontend? can you show me the get call? – Deepanjan Jun 23 '16 at 10:11
  • app.factory('myapp', ['$http', function($http) { return $http.get('Url') .success(function(data) { return data; }) .error(function(err) { return err; }); }]); – nour nour Jun 23 '16 at 10:23
  • 1
    modify something like this app.factory('myapp', [ '$http', function($http) { return { method : function($scope) { $http.get('Url').success(function(data) { $scope.stack=data; }).error(function(err) { $scope.stack=err; }); } } } ]); and call it like this in your controller and inject $scope into it myapp.method($scope) – Deepanjan Jun 23 '16 at 10:31
  • I got many parsing errors when I did this. Thank you for your help anyway :) – nour nour Jun 23 '16 at 10:38
  • Welcome. What technology are you using in the backend. ?What kind of errors its showing? – Deepanjan Jun 23 '16 at 10:40
  • I am using java in the backend. here are the errors: angular.js:11500 Error: [$injector:unpr] http://errors.angularjs.org/1.3.5/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20myapp at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:6:416 at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:38:22 at Object.d [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:36:49) etc.... – nour nour Jun 23 '16 at 10:42
  • There might be some serialization problem when you are making get call. – Deepanjan Jun 23 '16 at 10:44
  • In fact my factory and my controllers are in two different files and I am parsing three different json files : app.factory('myapp', ['$http', function($http) { function getLists() { var tab = ['url1', 'url2', 'url3']; var list = []; for(i=0; i – nour nour Jun 23 '16 at 10:51
  • Can you create a plnkr for it ? – Deepanjan Jun 23 '16 at 11:06
  • Did u get the solution? – Deepanjan Jun 23 '16 at 12:03
  • not yet I was not online I will create now a plnkr :) – nour nour Jun 23 '16 at 12:14
  • Yeah sure waiting for it. – Deepanjan Jun 23 '16 at 12:29
  • I followed your method and now it automatically refresh the whole page. I made a progress! I hope that I will find as soon as possible a solution to get a partial refresh thank you :) – nour nour Jun 23 '16 at 15:26
1

Step 1: Make your request return the new data

Step 2: Use that data to replace the old data

Since you didn't provide much info about how the structure is I'll try to be generic as possible. Assuming you're updating a product and fetching its new price:

$scope.product = {
    name: 'Pop Rocks',
    price: 1.99 // can be changed from an input with `ngModel` or something
};

$scope.save = function() {
    // post new price
    $http.post('/api/products', $scope.product).then(function(response) {
        // response.data contains the JSON object for he product,
        // with new price/name/etc
        product = JSON.parse(response.data) // parse it into an object
        $scope.product = product // replace old $scope.product with new product
    });
}

$scope.doublePrice = function() {
    // using this will update the new price immediately -in the view-,
    // just to show you how binding works. It will not update DB
    $scope.product.price *= 2;
}

Assuming your view has something similar to this:

<strong>Price:</strong> {{ product.price | currency:"$" }}

Your changes should reflect thanks to 2 way binding!

casraf
  • 21,085
  • 9
  • 56
  • 91
  • thank you for your answer I tried to follow the steps but still have the same problem. I updated my question with the controller code – nour nour Jun 23 '16 at 09:28
  • Does your `data.stack` actually hold the data you need? It should work. Try wrapping the assignment with a `$timeout` call (`$timeout(function() { $scope.stack = data.stack})`) – casraf Jun 23 '16 at 09:33
  • yeah it should hold the data to post to my web service . I tried with $timeout but I still have the same problem – nour nour Jun 23 '16 at 09:54