Live refresh when new data is inserted angularjs

Question

I want to get a live update of records when a new record is inserted into the db. when a new record is inserted i want the div containing the item in cart to refreshed

.controller('newitem_ctrl', ['$scope', '$http', function($scope, $http) {

    $http.get('http://localhost/spree/work/items/item.php').success(function(data) {
        $scope.cart = data;
    });

    $scope.newitem = function() {
        $ionicLoading.show({
            template: '<p>Wait...</p><ion-spinner></ion-spinner>'
        });
        event.preventDefault();
        $http.post("http://localhost/work/scripts/new_payment.php", {
                'item': $scope.item
            })
            .success(function(data, status, headers, config) {
                console.log(data)
            }).error(function(error) {
                console.error(error);
            });
    };
}]);

HTML

<div ng-controller="newitem_ctrl">
    <form method="post">
        <input type="text" name="item_name" placeholder="Item Name" ng-model="item" />
        <button class="button button-balanced" ng-click="newitem()">Add</button>
    </form>
    <div ng-repeat="item in cart">
        {{item.product_name}}
    </div>
</div>

codeandcloud · Accepted Answer · 2016-08-17 18:01:30Z

1

Try this

$http({
    method: 'POST',
    url: 'http://localhost/work/scripts/new_payment.php',
    data: { 'item': $scope.item }
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
    $scope.cart.push($scope.item);
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

Unrelated: .success and .error callbacks are obsolete. Use .then

answered Aug 17, 2016 at 18:01

codeandcloud

55.6k47 gold badges169 silver badges259 bronze badges

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

1 Comment

num8er Over a year ago

seems like he is using old version of angular

Umair Farooq · Accepted Answer · 2016-08-17 18:04:46Z

1

You can do something like this. Add the item in the cart array when you get a success response from post call.

.controller('newitem_ctrl', ['$scope', '$http', function ($scope, $http) {
        $http.get('http://localhost/spree/work/items/item.php').success(function(data){
                    $scope.cart=data;
                   });

                $scope.newitem=function() {
                $ionicLoading.show({template: '<p>Wait...</p><ion-spinner></ion-spinner>'});
                event.preventDefault();
                    $scope.newItem = {'item':$scope.item}
                    $http.post("http://localhost/work/scripts/new_payment.php",
                    $scope.newItem)
                    .success(function(data,status,headers,config){
                         console.log(data);
                         $scope.model = {product_name: $scope.newItem};
                         $scope.cart.push($scope.model);
                    }).error(function(error){
                         console.error(error);
                    });
                    }

            }])

It will update the div because the bound array is changed

edited Aug 17, 2016 at 18:04

answered Aug 17, 2016 at 17:10

Umair Farooq

1,7022 gold badges14 silver badges25 bronze badges

9 Comments

user6579134 Over a year ago

it doesn't update it lively to see results unless i refresh the page myself

Umair Farooq Over a year ago

You want when a new item is added then the div containing the items is refreshed. Right ?

Umair Farooq Over a year ago

Please tell what error you are getting while using this

codeandcloud Over a year ago

@UmairFarooq: ah, i think, if you look at the view you can see that you don't have to push $scope.newItem to cart. wont $scope.cart.push($scope.item); do?

Umair Farooq Over a year ago

@naveen I have edited the code. I think its correct now

|

num8er · Accepted Answer · 2016-08-17 22:59:17Z

0

Because You're not using socket.io or something alike

And You're asking about:

update of records when a new record is inserted into the db

I can only decide to continuously request the php script and get fresh data.

I've made additions to Your code.
So You can copy-paste it:

.controller('newitem_ctrl', ['$scope', '$http', function ($scope, $http) {

  function getCart(currentScope) {
    $http
      .get('http://localhost/spree/work/items/item.php')
      .then(function(data) { // success
        currentScope.cart = data;
      })
      .catch(function(err) { // error
        console.log(err);
      })
      .finally(function() { // always
        // to not throttle browser and server with requests will wait for http request end 
        // and recall getCart again
        setTimeout(function() {
          getCart(currentScope);
        }, 5000); // 5 sec
      });
  }
  getCart($scope);

  $scope.newitem = function() {
    $ionicLoading
      .show({template: '<p>Wait...</p><ion-spinner></ion-spinner>'});

    event.preventDefault();
    $http
      .post("http://localhost/work/scripts/new_payment.php", {'item': $scope.item})
      .then(function(data, status, headers, config) { // success
        console.log(data);
      })
      .catch(function(error) { // error
        console.error(error);
      })
      .finally(function() { // always
        getCart($scope);
        $ionicLoading.hide();
      });
  };
}]);

edited Aug 17, 2016 at 22:59

answered Aug 17, 2016 at 17:11

num8er

19.5k4 gold badges50 silver badges61 bronze badges

3 Comments

user6579134 Over a year ago

i get this error $http.get(...).success(...).always is not a function at getCart

num8er Over a year ago

@user6579134 fixed it, can You try?

user6579134 Over a year ago

Now the error doesn't appear again but the CurrentScope.cart=data is not producting anything. i've using console.log(JSON.stringify(data)); to see if anything is return but is blank. Please when you are done can you check out his question for me? stackoverflow.com/questions/38858112/…

Collectives™ on Stack Overflow

Live refresh when new data is inserted angularjs

3 Answers 3

1 Comment

9 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related