I am trying to refresh the page on the back button to get the new data for article list. To be more specific I have an article list, and the article page, on both of them I have an option of liking an article. When a user likes an article on the article page, if it hits the back button the like icon on the article list page won't get refreshed with the new state. I have tried with making a function on clicking the back button, and then getting the data again, but the icon doesn't change. The data that I get on console.log is new data and I get the value for like=1 which is correct if the user has liked the article, but the icon doesn't change.
This is my code:
I get the articles like this in my front page controller:
ArticleService.all().then(function(data){
$scope.articles = data;
})
In my article page html I have a back button link:
<a ng-click="refresh()"></a>
And in my article list I check which value I have for like and then show the icon according to that:
<a ng-if="article.like == 1" ng-click="like(article)" class="subdued">
<img class="social-images" src="icons/heart.svg"/> Lik
</a>
<a ng-if="article.like == 0" ng-click="like(article)" class="subdued">
<img class="social-images" src="icons/heart-outline.svg"/> Lik
</a>
This is my function in the article controller:
$scope.refresh = function (){
return $state.go('main.front').then(function(state) {
ArticleService.all().then(function(data){
$scope.articles = data;
console.log(data);
})
})
};
But since that function is in the article controller it cannot refresh the data on the front page. How can I refresh the data in the front page controller from the page that has a different controller?
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
try adding cache : false in your state to reload the state on enter ...
Try one of these:
1.
$scope.$on('$ionicView.beforeEnter', function () {
$scope.refresh();
});
$scope.refresh = function (){
return $state.go('main.front').then(function(state) {
ArticleService.all().then(function(data){
$scope.articles = data;
console.log(data);
})
})
};
2.
$scope.$on('$tateChangeSuccess', function () {
$scope.refresh();
});
It may be cache issue. So add,
<ion-view cache-view="false" view-title="My Title!">
</ion-view>
Related
Please see this code.
html code
<script type="application" id = "abc">
<md-dialog>
{{loadServerFile();}}
</md-dialog>
</script>
javascript code
loadServerFile : function(){
$.ajax({
url: "/homepage/create"
success: function(){
console.log("success");
$scope.closeDialog();
}
});
}
Here closeDialog close the id = 'abc' dialog.
But console.log("success") calling is doing more than 10 times.
Why this kind of problem happen?
How can I make this function call once?
javascript code
angular.module("imageedit").service('canvas',['$rootScope','$mdDialog'],function($rootScope, $mdDialog){
...
start: function(url){
$mdDialog.show({
template: $('abc').html()
controller: 'GGG'
clickOutsidetoClose: false,
})
...
}
...
})
Here I called $mdDialog.show to call dialog.
But in fact I only want to call loadServerfile in GGG controller.
Have you got any answer?
What I expect: $rootScope.call(loadServerFile);
Based on the new information, that you do not want the dialog, in your GGG controller, add this code, which will run one time. It will place the result of the call in $scope.homepageCreateResult. If you don't need to make this call at all, and do not need the dialog, delete all of the code you reference.
$scope.homepageCreateResult = {};
$http.get("/homepage/create")
.then(function(resp) {
console.log('success', resp);
$scope.homepageCreateResult = resp.data;
});
In your HTML, just remove all of this:
<script type="application" id = "abc">
<md-dialog>
{{loadServerFile();}}
</md-dialog>
</script>
In many of code, closeDialog function only hides dialog and not really close dialog.
And showDialog can be called lots of times.
You cannot see that but according to your question, console.log is called lots of times so my expection will be right.
I have a navigation bar which has a drop-down menu item Log Out which calls the ngPostLogOut() function.
In app.js
.when("/logout", {
controller: 'AuthController',
templateUrl: "client/html/auth/logout.html"
});
AuthController
$scope.ngPOSTLogOut = function() {
if ($rootScope.user) {
$rootScope.user = null;
}
if ($window.sessionStorage) {
$window.sessionStorage.clear();
alert('Entered..');
}
alert('Before HTTP');
$http.post('server/auth/logout.php')
.then(function(result) {
$scope.logout = result.data;
});
alert('After HTTP');
/*
$timeout(function() {
$location.path('/');
}, 10000);
*/
};
logout.html
<div ng-controller="AuthController as auth">
<p ng-show='user == null' class="text-center">{{logout}}</p>
<br>
<button ng-click='ngPOSTLogOut()' class="btn btn-default btn-block">Angular To PHP</button>
Now, if a person clicks the Log Out item from the drop-down in the navbar then the function is called. I know this because I have set up alerts and they do pop up. But, the 'echo' from the login.php doesn't get featured. But, the odd thing is is that if I press the Angular to PHP button which also calls the ngPostLogOut() function, the function completes perfectly and as intended.
My guess
My guess is that ngRoute forces Angular to prioritize the HTML template switch making it so that the ngPOSTLogOut() function's parametres get ignored or dismissed.
The entire project on GitHub
https://github.com/AquaSolid/RAMA_Angular_PHP
Change this:
<li ng-click='ngPOSTLogOut()' ng-show='user != null'>Log Out</li>
to this:
<li ng-show="user != null"><a ng-click="ngPOSTLogOut()">Log Out</a></li>
And consider using ng-if rather than ng-show.
From a different controller a modal pop up opens. On closing of the modal pop up , I will do something and I want to transfer the data to a different controller which populates a UI grid and is bound to $scope.searchResultsGridOptions.
So in my ABCCtrl.js file :
On closing of a modal , I do :
$("#iConfirmationModal").on('hidden.bs.modal', function () {
$state.go('transaction.search.results', {});
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
//Using them I hit the web service again and get the data to reload the UI Grid
TransactionServices.getTransactionAdvSearchResults(searchResultsParam).then(function (result) {
//I got the result
console.log(result);
/Now I want to reload the grid with this data , but the grid scope object which binds to this , is in separate controller
searchResultsGridOptions.data = result;
});
});
In DEFCtrl.js
I have
getSearchResultsGridLayout: function (gridOptions, uiGridConstants, datas) {
gridOptions.multiSelect = false;
// gridOptions.data.length = 0;
// gridOptions.data = '';
gridOptions.data = datas;
console.log("Grid Data ");
console.log(datas);
console.log(gridOptions.data);
angular.element(document.getElementsByClassName('grid')[0]).css('height', '0px');
// console.log(datas.length);
return gridOptions;
}
But how would I only change the data only when modal closes ?
Rest of the time it should not refresh the Grid ?
Or ,
Is there any way when on closing of the modal , instead of simply go back to the state using $state.for() and seeing the previous unrefreshed data , I can see the refreshed data ?
Hi I think you do not need to call the "TransactionServices.getTransactionAdvSearchResults()" in the "ABCCtrl" controller but you have to call it in the "DEFCtrl" controller.
You need to find a way to pass the "searchResultsParam" extracted in "ABCCtrl" to "DEFCtrl".
You can use the ui-router state parameters. You can specify a parameter in the "transaction.search.results" state, like this:
.state('transaction.search.results', {
...
params: {
searchResultsParam: null
}
...
})
And in the "ABCCtrl" pass it to the state:
$("#iConfirmationModal").on('hidden.bs.modal', function () {
//I close all the modals
$uibModalStack.dismissAll();
//I get the stored search criteria
var searchResultsParam = TransactionDataServices.getSavedSearchParams();
$state.go('transaction.search.results', {searchResultsParam: searchResultsParam});
Then, in "DEFCtrl" you can read it and call the "TransactionServices.getTransactionAdvSearchResults()" method.
I want to have a button on the front end (AngularJS) that refreshes the changes made to the database. I have tried the following in the html:
<button ng-click="reloadState" data-translate> Refresh Database </button>
In the app.js file, I have this function in my controller:
$scope.reloadState = function() {
$state.go($state.current, {}, {reload: true});
}
I have also tried:
$scope.reloadState = function() {
$state.reload();
};
and:
$scope.reloadState = function() {
window.location.reload();
}
Why does nothing happen when I click the button? Ps. I am using ui-router.
Try $state.transitionTo($state.current, {}, {reload: true})
The simplest way to do this is traditional Javascript by using location.reload();
http://www.w3schools.com/jsref/met_loc_reload.asp
window.onload= function(){
var page = window.location.hash;
if(window.location.hash != ""){
page = page.replace('#page:', '');
getdata('src/'.page);
}
}
After the window loads, i want the page to look in the URL, see if there is a # is set, and if so, i want to grab the page and display it inside a DIV. So for example, a link would be link. So when somenone clicks on the link, the page thinks and grabs the data from contact.php, and puts it inside the div. But now, this isn't working. No errors, no warnings, no nothing. Help please? Thanks!
Edit: Getdata:
function getdata(file){
openloading(); // loading message
$('#content').fadeOut('slow', function () { // Content is the div where all the content must be in
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn('slow');
})
})
updateusersonline();
}
And updateusersonline() directly too:
function updateusersonline(){
$.get('src/usersonline.php', function(data3) {
$('#usersonline').html(data3);
})
getdata('src/'.page); should be getdata('src/' + page);