Page reload using angularJs

Question

I am newbie to angularJS. I have started learning with CRUD operation. I am getting a problem that when I delete an entry then the page should reload

I have gone through $location and $route too. and implementing as follow :

config

app.config( function ( $locationProvider, $routeProvider ) {
  $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'MainCtrl'
    });
    $routeProvider.when('/this',{
        templateUrl: '/views/about.html',
        controller: 'MainCtrl'
    }); 
});

and when action success then I am writing as :

$location.path('/this');

but when I do this then the url changes from http://localhost/someapp to http://this but the page does not refresh. What should I do in this case please help me guys ?

Edit :

Here is my deletion code :

$scope.deletecode = function (id) {
    name = '';
    if (confirm("are you sure to Delete the name")) {
        $http({
            method: 'POST',
            url: 'rohit.php',
            data: {
                "name": name,
                "id": id,
                "delete": "true"
            },
        }).
        success(function (data, status, headers, config) {
            alert("data deleted successfully");
            $location.path('/this');
        }).
        error(function (data, status, headers, config) {
            alert("Unable to load data.");
        });
    } else {
        alert("Data deletion cancelled by user ... ");
    }
};

On init I am getting the data from a php file :

$http({
    method: 'GET',
    url: 'test.php'
}).
success(function (data, status, headers, config) {
    $scope.samples = data;
}).
error(function (data, status, headers, config) {
    alert("Unable to load data.");
});

all the data is stored in $scope.samples which returns two things user_id and name

I'm not sure you actually want to refresh the page. Deleting an item, if done correctly, will update the view without the need to refresh the page. — Ayush, Jul 10 '13 at 06:52
the view is not updated, how can I update the view, I am posting my deletion function — Rohitashv Singhal, Jul 10 '13 at 06:53
can't you use `location.reload();`? simple javascript method — Satpal, Jul 10 '13 at 07:38
If you absolutely must reload, just use `location.reload()` like @Satpal suggests. Your Angular will be completely reinitialized anyways once you refresh the page. — Ayush, Jul 10 '13 at 08:08
`splice` is to delete the item from the array. The whole point of using Angular is to build single-page web-apps that don't need page loads or reloads. If you're going to reload the page everytime you delete or add an item, it defeats the purpose. — Ayush, Jul 10 '13 at 08:28
but in the above exaple I am not able to delete from array using splice, can you help me please ? — Rohitashv Singhal, Jul 10 '13 at 08:30
Why are you unable to delete? Find the right index, and you can delete. http://jsfiddle.net/YqQZ9/ — Ayush, Jul 10 '13 at 08:35
Like I said in the comment in my answer, you need to loop over `$scope.samples` and find the index of the element you are deleting. — Ayush, Jul 10 '13 at 08:36
Here's a code sample for how you can find the index of an element: http://jsfiddle.net/YqQZ9/1/. I really recommend you spend some more time getting familiar with Javascript before jumping into Angular. [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) is a great starting point. — Ayush, Jul 10 '13 at 08:41
Thanks I am able to find the index using : $scope.samples.splice( $scope.samples.indexOf(id), 1 ); — Rohitashv Singhal, Jul 10 '13 at 08:43

score 0 · Accepted Answer · edited Dec 18 '14 at 20:41

0

Your http request is deleting the item from your server, but you are not deleting it from your client-side code, which is why your view is not updating. You want to remove it from you client-side code as well once it has been removed from the server:

// all items in an array
$scope.items = [item1, item2];
// delete an item
$scope.deletecode = function (id) {
    name = '';
    if (confirm("are you sure to Delete the name")) {
        $http({
            method: 'POST',
            url: 'rohit.php',
            data: {
                "name": name,
                "id": id,
                "delete": "true"
            },
        }).
        success(function (data, status, headers, config) {
            alert("data deleted successfully");
            // at this point, the item has been deleted from your server
            // remove it from $scope.items as well
            // removes 1 item at index idx
            $scope.items.splice(idx, 1);
        }).
        error(function (data, status, headers, config) {
            alert("Unable to load data.");
        });
    } else {
        alert("Data deletion cancelled by user ... ");
    }
};

edited Dec 18 '14 at 20:41

Mo.

26,306
36
159
225

answered Jul 10 '13 at 07:36

Ayush

41,754
51
164
239

Hey what is idx, is it id in my case ? – Rohitashv Singhal Jul 10 '13 at 08:06
idx is the index of the item in the array that you are deleting. You will need to track that. So, if you're deleting the first item, `idx = 0`. If you're deleting the last element, `idx = $scope.items.length - 1` – Ayush Jul 10 '13 at 08:07
I am getting the data into view from a php file and storing into `$scope.samples = data`.it is giving user_id and name and after deletion i am doing `$scope.samples.splice(user_id, 1)`. whats wrong with this ? – Rohitashv Singhal Jul 10 '13 at 08:09
`user_id` is not the index. For example, if the first element in the array is a user with `user_id=1337`, the index is still 0. If you don't have the index, loop over the array and search for the index. – Ayush Jul 10 '13 at 08:16
I had to add `$scope.$apply();` after the splice to make it work. – Wim Deblauwe Apr 14 '14 at 08:26

Page reload using angularJs

1 Answers1