I'm almost new in AngularJS and IonicFramework. I'm developing my own app where there is a little social network with timeline (which I get from mysql and i encode in json with php) and a sort of likes. It's a very simple thing.
I use $http.get to retrieve json data and it's like this:
[{
"id": "2",
"timestamp": "2015-04-15 23:26:48",
"autore": "reallidontknow",
"likes": "2",
"testo": "asd"
},
{
"id": "3",
"timestamp": "2015-04-15 23:26:39",
"autore": "costi",
"likes": "2",
"testo": "rotfl"
},
{
"id": "1",
"timestamp": "2015-04-15 23:06:27",
"autore": "stevvi",
"likes": "1",
"testo": "aaaaahahah"
}
]
This is my HTML:
<div class="list card" ng-repeat="post in posts">
<div class="item item-avatar">
<img src="img/icon.png">
<h2>{{post.autore}}</h2>
<p>{{post.timestamp}}</p>
</div>
<div class="item item-body">
<p ng-bind-html="post.testo">
</p>
<p>
<a href="#" class="subdued"><i>{{post.likes}}</i> Mi Piace</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#" ng-click="like(post.id)">
<i class="icon ion-thumbsup"></i>
Mi Piace!
</a>
</div>
</div>
And this is a part of my controller: NOTE: with the http get I do a "post", i know it's an orrible way but is simple so the get in real do a post. (with idPost, i send to the server which post have to make +1 on his likes column)
$scope.like = function(idPost) {
var lsVar = "like"+idPost;
if (window.localStorage[lsVar] != undefined)
{
return;
}
else
{
urLike = "http://my_link.php?ggettt="+idPost;
$http.get(urLike).success(function(data, status, headers, config) {
console.log(JSON.stringify(data));
if ((data.idPost == "false") || (data.idPost == "null"))
{
alert("Error.\n retry!");
$window.location.reload(true);
}
else if (data.idPost == "noId") {
alert("Error FATAL.");
$window.location.reload(true);
}
else {
window.localStorage[lsVar] = idPost;
alert("LIKE inserted");
});
}
}).error(function(data, status, headers, config) {
console.log(JSON.stringify(data));
});
}
}
My problem is that if I click on "like" button, I have to reload the whole page (that's orrible!!!!) using $window.location as you can see, because if I reload only using the $state command it doesn't realod anything.. the same if I use $route.reload().
I've to change in real time the like (put a +1) and to change button from "active" to "not active"
And with this problem, if a person already liked (it saves in localstorage so it remember it) and the person click another time on "like" it appear (as it must be) the alert. But when the person click on "ok" the and click in another place, the alert reappear. What is this!?
Regarding not seeing the +1 like immediately, that is because you are only updating the localstorage when you receive a "success response" from the server.
In order to fix that you should replace
<a class="tab-item" href="#" ng-click="like(post.id)">
with
<a class="tab-item" href="#" ng-click="like(post)">
Then, modify the "like" function as following (considering the "data" returned from the server is the actual post which contains the likes) :
$scope.like = function(post) {
var lsVar = "like"+post.id;
if (window.localStorage[lsVar] != undefined)
{
return;
}
else
{
urLike = "http://my_link.php?ggettt="+post.id;
$http.get(urLike).success(function(data, status, headers, config) {
console.log(JSON.stringify(data));
if ((data.idPost == "false") || (data.idPost == "null"))
{
alert("Error.\n retry!");
$window.location.reload(true);
}
else if (data.idPost == "noId") {
alert("Error FATAL.");
$window.location.reload(true);
}
else {
window.localStorage[lsVar] = idPost;
post = data;
alert("LIKE inserted");
});
}
}).error(function(data, status, headers, config) {
console.log(JSON.stringify(data));
});
}
}
the "post = data;" might require some changes depending on the response you receive from the server + you might have to execute $scope.$apply() or update the $scope.posts directly in order to refresh the data on the screen but the general idea is you have to update the number of likes in your $scope.posts in order for it to refresh on screen.
Anyhow, you should know that best practice is to save and validate which user liked what on the server side as saving and validating this on the client side means users can edit / delete the data + same user will be able to login from different machines / browsers and like the same post a couple of times.
I hope this demo will help you get going again...
change your html (just button div) like this:
<div class="item tabs tabs-secondary tabs-icon-left" ng-hide="post.has_liked">
<a class="tab-item" href="#" ng-click="like(post.id)">
<i class="icon ion-thumbsup"></i>
Mi Piace!
</a>
</div>
<div class="item tabs tabs-secondary tabs-icon-left" ng-show="post.has_liked">
<span class="tab-item">
<i class="icon ion-thumbsup"></i>
+1
</span>
</div>
After that in your js, when you got confirmation from server put true in has_liked attribute of post object.
post.has_liked = true;