AngularJS: Refresh/Reload data & update DOM & Make form pristine

Question

I have hit another wall! Been on this for hours now.

I have a list of products being pulled in from a JSON file for a shopping cart system.

When a customer adds products to the cart, I want go refresh the JSON feed as I have set this to adjust the stock level based on what the customer has in the cart so they can't add too many products the the shop doesn't have.

The 'add to cart' is working well. But I can't figure out how then to 'push' the updated feed to update the DOM elements.

Here is what I have so far:

$scope.reloadData = function(detailSection) {
    // Find the URL title of the current click product
    var prod_detail_url = $scope.products[detailSection].url_title;
    var prod_category_id = $scope.products[detailSection].discount_category;
    var prod_sku = $scope.products[detailSection].title;

    // Set the defaults of the info to load in
    var detailurl = '/order/series_detail/' + prod_detail_url + '/' + prod_category_id + '/' + prod_sku;
    $scope.productDetail = [];

    // Process the details of the product
    $scope.reloadedDetails = function (data, status) {
        $scope.productDetail = data;
        $scope.productDetail.push(data);
        $('.detailloader').hide();
    }

    // Fetch the Details of the product
    $scope.reloadDetail = function () {
        $('.detailloader').show();
        $http.get(detailurl).success($scope.reloadedDetails);
    }

    // Instantiate the process
    $scope.reloadDetail();
};

$scope.reladedDetail is firing and my .detailloader is showing. As far as I can see from the inspector, its fetching the the URL. $scope.reloadedDetails, but it isn't pushing the new data and hiding the .detailloader.

I 'believe' I also need to make the form 'pristine' again after the submission? I haven't looked into this properly yet. Current test have allowed me to add one thing to the cart, but if I then go add try to add another, the form doesn't submit.

Any advice on this? Can I just tell Angular to make the form pristine again after the new data has loaded? I'm not sure I have the right end of the stick here.

Thanks very much for taking the time to help.

Answer 1

try, $scope.$apply() inside your reloadedDetails function.

You are passing the reloadedDetails as success function, so this will be in another scope.