How to display the saved input value from the db without refreshing the web page?

Question

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.

isn't the new input value same as u sent it earlier , you can display that only. otherwise make a new ajax call in success handler of save() call — Piyush.kapoor
– Piyush.kapoor, Commented Jun 23, 2016 at 9:05
What is the data returned by data.stack? Are you sure it has the updated data? — Bon Macalindong
– Bon Macalindong, Commented Jun 23, 2016 at 10:21
@BonMacalindong data.stack returns the input value to post to the backend — nour nour
– nour nour, Commented Jun 23, 2016 at 10:24

Deepanjan · Accepted Answer · 2016-06-23 09:10:50Z

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();

answered Jun 23, 2016 at 9:10

Deepanjan

6492 gold badges8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

nour nour Over a year ago

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

Deepanjan Over a year ago

Are you returning the updated object from the backend?

nour nour Over a year ago

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

Deepanjan Over a year ago

So you are making a get call in the frontend? can you show me the get call?

Deepanjan Over a year ago

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)

|

casraf · Accepted Answer · 2016-06-23 09:10:03Z

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!

answered Jun 23, 2016 at 9:10

casraf

21.8k10 gold badges60 silver badges93 bronze badges

3 Comments

nour nour Over a year ago

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

casraf Over a year ago

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}))

nour nour Over a year ago

yeah it should hold the data to post to my web service . I tried with $timeout but I still have the same problem

Collectives™ on Stack Overflow

How to display the saved input value from the db without refreshing the web page?

2 Answers 2

16 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related