CODEWITHSUNDEEP
javascriptjqueryangularjsajax
Libin C Jacob
Libin C Jacob

Reputation: 1138

How to Refresh ng-repeat using $.ajax success

I am new in angularjs. I was trying to insert some reviews about a project. I am inserting the reviews using jquery ajax and bind all the reviews using angularjs on page load. My question is can I refresh or update the ng-repeated data immediate after the $.ajax success

This is my jquery

    $("#reviewSubmit").click(function () {
        var reviewData = JSON.stringify({ "Review": $('#txtReview').val() });
        document.cookie = "ScrollPosition=" + $(window).scrollTop();
        $.ajax({
            url: "@Url.Action("MyReview", "ProductDetail")",
            data: reviewData,
            dataType: 'json',
            type: "POST",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                if (data == true) {
                    alert('Authorized');
                    $("#review_write").hide(250);
                    Test();
                }
                else {
                    var url = "@Url.Action("Login", "Login", new { area = ""})";
                    window.location = url;
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
    });
});

This is my Angular js

app.controller('ReviewModel', function ($scope, UserReviews) {
    getReviews();
    function getReviews() {
        UserReviews.getReviews().
        success(function (data) {
            $scope.Reviews = data;
            console.log($scope.Reviews);
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
            console.log($scope.status);
        });
    }
})

app.factory('UserReviews', ['$http', function ($http) { 

    var UserReviews = {};

    UserReviews.getReviews = function () {
        var url = appurl + "/ProductDetail/GetUserReview";
        return $http.get(url);
    };

    return UserReviews;
    }]);

This is my View

                <div ng-app="myApp">
                    <div id="myElementWithController" ng-controller="ReviewModel">
                        <ul ng-repeat="item in Reviews">
                            <li>{{item.Comment}}</li>
                        </ul>
                    </div>
                </div>

Upvotes: 0

Views: 1113

Answers (4)

Libin C Jacob
Libin C Jacob

Reputation: 1138

Finally I've solved it. Inside the $.ajax success method I wrote the following line of code

var element = angular.element($('#MyElementWithController'));
element.scope().$apply();

It's immediately affected the DOM.

Upvotes: 1

Rajan Singh
Rajan Singh

Reputation: 631

You can check if "digest is already in progress or not", if not you can forcefully run digest cycle.

if (!$scope.$$phase) {
    $scope.$apply();
    }

Your code will look like

 UserReviews.getReviews().then(
                        function(data) {
                                $scope.Reviews = data;
                                if (!$scope.$$phase) {
                                       $scope.$apply();
                                       }
                             }, 
                        function(error) {
                            console.log('error', error);
                        });

Upvotes: -1

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Here because you are updating scope variable from jQuery method(out of angular context). Which doesn't run digest cycle & binding didn't get updated.

Use $http.post instead of $.ajax post will take care of digest cycle.

Upvotes: 2

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22925

You can manually kick a digest cycle to sync the view and model. You can do this by $apply, In success callback, do something

$scope.$apply();

One more thing, success and error are deprecated so use standard then

Upvotes: 1

Related Questions