I have a page, which allows the user to add/edit/delete database table.
The database staff, and add/edit/delete, all work fine.
However, in my AngularJS method, I add location.reload(), trying to refresh the page to show the updated table. Unfortunately, the database has been updated, but the page isn't.
If I press F5 to manually reload, the result is right. I don't use route in the page.
Just want a simple function, and it can automatically refresh after being updated.
Below is sample codes
$scope.add = function(){
//add something in database
//no problem of this part
location.reload() //doesn't work
};
Try adding the $ and the location service to the controller
MyController($scope, $location){
$scope.add = function(){
$location.reload();
}
}
Related
I have an add form that if the user file the form and submit, in the same time, user can see the data in the same page in table with ui-view and this is not an issue!!
Problem is: if i open more than one tab in the same browser, that post or change reflection doesn't show in other tab without refreshing or reloading. i want to see change in other tab of browser or other browser without reload
I want to see the change without refresh or reloading.
if i reload in other tab, it works but if i dont reload in other tab, the change doesn't effect
here you go for my post method:
$scope.formModel = {};
$scope.onSubmit = function () {
$http.post('http://127.0.0.1:8000/api/v1/contact/create/', $scope.formModel)
.then(function(response) { //if success, below fuction will execute
$scope.successPost = 'You have successfully submitted your Contact';
$timeout(function() {
$scope.successPost = '';
}, 4000);
//below $scope will push data in client site if the request is success
$scope.contacts.push(response.data);
//if any error occurs, below function will execute
}, function(response) {
// below variable will get predefined message that will explain exactly what happened
var errorData = response.data;
$scope.errorPost = Object.values(errorData)[0][0];
$timeout(function(){
$scope.errorPost = '';
}, 4000);
});
$scope.formModel = {}; //It means, after submit, the form field will clear
$scope.addContactForm.$setPristine();
};
I want to see the change in the other tab without refresh or reload
well browser tabs are per definition separated from each other and can't communicate directly between each other.
there are certain possibilities to handle that: for example you can have a separate external service and always poll that service for latest changes and if something changes automatically call reload.
or you could use a service that provide a websocket that sends you to the frontend an update notification once something changed in your data.
Just want to point you in the right direction, the topic is to big to provide a finished solution. I recommend to do some research on how to communicate between tabs / how to build a service with an update notification for new data
Edit: Just to add #Yftach point from the comments: Theoretically localstorage is shared between tabs, so theoretically you could have a variable there and watch in an interval for changes. However the solution with a separate server is (at least in my eyes) way better
is it possible to use angularJs to refresh view's data automatically when the data in database is changed? Please help me how to do it
I made this script, but as you can see the data only refresh if viewData() is triggered.
$scope.viewData = function(){
$http.get("sample.php").then(function(response){
$scope.mine = response.data;
});
}
I want to create page like timeline in twitter which can load new tweets without refreshing the page. Thank you
You can do longpolling like this from Angular side:
setInterval($scope.vievData, 1000);
since setInterval is not monitored by Angular you will have to add the following line in $scope.viewData
$scope.$$phase || $scope.$digest();
immediately after $scope.mine=...
This will refresh $scope.mine every second regardless of the changes in DB, it is a bit crude. To do this only when the values are changed in the database you will probably have to use WebSockets, but that is a bit more complex, both front and back.
is it possible to clear all fields in one controller by clicking on a button from the previous controller?
I'm trying to do so by setting cache: false in routes.js in the controller that needs to be cleared, however, I realized that it clears the controller's fields every time it's loaded.
I need to be able to clear the fields of the pages once a user clicks on login, however, I also need to be able to go back to the previous pages once I enter the "review info" page.
How should I go about this?
If you are using ionic version-1 framework, then use
$scope.logout = function(){
// first, clear the history
$ionicHistory.clearHistory();
// clear the cache before you navigate to a page
$ionicHistory.clearCache().then(function(){
$state.go("app.login");
});
}
HI I'm building out a basic social media site with ionic and am tracking the like counts for each post. On page load I successfully show the like count that is in the db for each record.
$scope.getNewData = function () {
$scope.page = 1;
// get generic feed
FeedService.getFeed(1)
.then(function (data) {
//We will update this value in every request because new posts can be created
// console.log(data.totalPages)
$scope.totalPages = data.totalPages;
$scope.cards = data.posts;
$scope.$broadcast('scroll.infiniteScrollComplete');
return "loaded new data";
})
.then(function (data) {
//$rootScope.$broadcast('newDataLoaded');
})
$scope.$broadcast('scroll.refreshComplete');
};
Issue is after the page loads and another user likes the record I want the like count to automatically update for all users. I started playing around with $interval which works but the whole $scope changes , almost looks like a page refresh. How can I only update the $scope.cards.Post_Likes_Count without having to refresh the entire $scope.cards?
Here is my markup:
<div class="actions-brief">
{{card.Post_Likes_Count}} Likes
<a ng-controller="CommentsCtrl" ng-click="showComments(card)" class="subdued">{{card.comments}} Comments</a>
<!--{{card.shares}} Shares-->
</div>
Ideally I would just want to refresh the $scope.cards.Post_Likes_Count. Not sure how to keep everything in sync if I don't use $scope.cards. I show 10 posts per page but as the user scrolls I grab 10 more records.
Any suggestions or tips would be greatly appreciated.
The whole $scope should not change ... According to best practices, you should make the $http call in factory or service. Lets say you made an http call to your server to update the like done by your one user... You should call activate() function..
Activate function should be a user defined function which makes a request to the server while loading the page to get all the data from database and reload the $scope.yourData variable with latest data.
Moreover you should call the same activate() function from your controller using $interval. This would make your code more structured and proper.
And moreover you should push data in your $scope.YOURDATA variable in your activate() function rather than assigning it each time...
I'm using angular-seed template (AngularJS) and I have routeProvider setup and such, now I want to execute a function (which resides in a factory), but only the very first time when the page gets loaded. I found many solutions for this, but I don't want to execute the code each time the users switches between tabs (via routeProvider of course, page doesn't get reloaded) - the code must be executed only when the whole page gets (re)loaded.
How should I approach this? I tried to call the function from run and then broadcast the event when page gets loaded, but there are no event listeners - I guess that is because the run part gets executed before the controllers are setup, so there are no listeners attached at the time when the event gets broadcast.
So, any suggestions how to approach this?
UPDATE
Use case:
when user types the url in the page, the page gets loaded
when pages gets loaded, a $http.get request is performed, which gets a random content
this content can be changed only by clicking a button, to explicitly request a change of content.
if users clicks to a different page e.g. view2 (routeProvider) and then back to the view1, the content must not change
when users refreshes the page (F5), the content changes again (or as already stated, by a click of a button)
Use the run method:
app.run(function(yourService){
yourService.cacheRandomContent();
});
It runs only once after the app is bootstrapped and services are created.
To access the data in controller, just inject the same service:
app.controller('someCtrl',function($scope, yourService){
yourService.getCachedRandomContent().then(function(resp){
$scope.data = resp.data;
});
});
Your service would be something like:
app.service('yourService',function($http){
var promise;
return {
cacheRandomContent: function(){
promise = $http.get();
},
getCachedRandomContent : function(){
return promise;
}
}
});