@digitalxp Not completely sure what your question still is. But if you are referring to calling the polling your backend every 5 seconds could for instance be done by calling your suntion with $interval(fn, delay); where fn is the function you want to call and delay is the amount of time you want between the function calls in ms (so 5000 for you 5 seconds).
Something like that?
$interval(
$http.post('http://www.digitalxp.it/appwork/include/read_chat.php?U_FROM='+$localstorage.get('name')+'&U_TO='+$stateParams.id)
.success(function(data){
$scope.messages = data;
$scope.doneLoading = true;
$timeout(function(){viewScroll.scrollBottom()}, 0);
})
.error(function(){alert("Errore di comunicazione!")});), 5000)I donāt have the time to test this right now for you @digitalxp but you should be able to tell if itās working pretty easily if you have everything up and running. At a glance itās seems fine. Although I would put the most of it in a service and simply call that in the $intervalal. Furthermore Iām not sure what a $timeout with zero delay does but if it works for you this isnāt an issue.
Ok, this work for me:
$interval(function() {
$http.post('http://www.digitalxp.it/appwork/include/read_chat.php?U_FROM='+$localstorage.get('name')+'&U_TO='+$stateParams.id)
.success(function(data){
$scope.messages = data;
viewScroll.scrollBottom();
console.log("aggiorno chat");
})
.error(function(){alert("Errore di comunicazione!")})},
5000);
My only problem is that when Iām on textinput to write a message, when the interval load, I cant write again (I have to put the cursor again to the input).
I think the problem is viewScroll.scrollBottom(), but without that the new message loaded dont appear (I have to scroll bottom manually!).
If you want you could see a demo to http://www.digitalxp.it/appwrok username and password: demo
thank you very much i solve it with your suggetstion!
1 Like
Here is the app I developed that is using a āspecial elastichatā :~)
I shared it in the [What are you building with Ionic? We want to know!]
(What are you building with Ionic? We want to know! ) thread.
Please check it out if you have time, thanks!
2 Likes
I want to share a few improvements I made to elastichat that made it into my own app. I felt it is important to keep your footer buttons down at the bottom when the textarea grows. All you need is some CSS to accomplish this.
CSS
/* add this to keep your footer buttons down
at the bottom as the textarea resizes */
.footer-btn-wrap {
position: relative;
height: 100%;
width: 50px;
top: 7px;
}
.footer-btn {
position: absolute !important;
bottom: 0;
}
HTML
<div class="footer-btn-wrap">
<button class="button button-icon icon ion-android-send footer-btn"
type="submit"
ng-disabled="!input.message || input.message === ''">
</button>
</div>
The result -
There is another improvement I have made that scrolls you to the bottom after the keyboard is shown on a device (just like iMessage). Just do this in your keyboardShowHandler within the controller -
function keyboardShowHandler(e) {
console.log('keyboardShowHandler');
keyboardHeight = e.keyboardHeight;
$timeout(function() {
viewScroll.scrollBottom(true, true); // read below on this
}, 0);
}
I am using a forked version of Ionic beta 14 that has a modified scrollBottom and scrollTop function because I donāt want to call ionic.DomUtil.blurAll(); in certain situations. I am not aware of the implications of this so I didnāt want to change the original behavior of these functions so I added an additional parameter to the function. My fix is similar to what someone suggested in the Github issue that @claw opened.
self.scrollTop = function(shouldAnimate, noBlur) {
if (!noBlur) {
ionic.DomUtil.blurAll();
}
self.resize().then(function() {
scrollView.scrollTo(0, 0, !!shouldAnimate);
});
};
self.scrollBottom = function(shouldAnimate, noBlur) {
if (!noBlur) {
ionic.DomUtil.blurAll();
}
self.resize().then(function() {
var max = scrollView.getScrollMax();
scrollView.scrollTo(max.left, max.top, !!shouldAnimate);
});
};Does not anyone has problem with $ionicView.leave ? It will only work when coming from a certain state/view. If Iām coming from somewhere else it will not trigger. for example I go there this way:
$state.go('app.chats.conversation', {conversation: conversation_id});
It wonāt trigger when coming back or changing any screen in fact. I need to press reload. 
@Ross Iām a bit confused with the revisions and improvments. Have you got a sample with the final version of the resizing textarea? I have a comment box that is waiting for its! 
@robypez The codepen in the opening post is the latest revision. Take a look at this post to accommodate the iOS keyboard.
It will be of interest to know that patching angular-elastic is not necessary. It has been emitting a resize event from its own code for some time already:
The custom taResize is not needed if you listen to elastic:resize.
2 Likes
Very nice job, but i have a problem when i test the code with ionic view. Sorry for my english, i am french. I implement this in a ionic blank app to test it on ionic view, it works, but there are 2 problems in the view.
- First the textarea limit is 20 characters per line when i enter text.
- Secondly, the text area shift up very high when i enter text and the keyboard is shown. And we can see the messages under the text area.
( Please, look on the picture joined )
I donāt understand whyā¦
The test is done with ionic view app on iphone 6 plus.
All is ok on google chrome view.
Any idea to help me please?
@novarea, @Ross explains how to fix all of that here (the same link from 2 posts above you) I followed all of his tips there EXCEPT is didnāt do the alteration to the angular-elastic directive but rather did as @zarko suggested and just listened for elastic:resize.
After doing that it worked for me (had the same problem as you before). It looks great for me now, but I have a 5S.
@Ross Thanks a lot for sharing this!
I suck hard at UI, andi I just finished setting up firebase for real time chat and was dreading figuring out how to make a UI that looked good. Then I found this!
Thank you very much. Iāll try thisā¦
But māy weak level for english is a problem and i donāt understand exactly where modify or add the code in my scriptā¦
Does anyone can put for me the right code in good place in jsā¦
Sorry for my request, but iām really desappointed.
Thanks, i succeed in hiding scrolling area, but why the textarea slide so high and doesnāt stick the keyboard?
did you set cordova.plugins.Keyboard.disableScroll(true) on entering the controller and
cordova.plugins.Keyboard.disableScroll(false) on exiting the controller?
I donāt know where exactly 
$scope.$on('$ionicView.enter', function() { cordova.plugins.Keyboard.disableScroll(true); window.addEventListener('native.keyboardshow', keyboardShowHandler); window.addEventListener('native.keyboardhide', keyboardHideHandler);
//plus anything else you need to do
});
$scope.$on('$ionicView.leave', function() { window.removeEventListener('native.keyboardshow', keyboardShowHandler); window.removeEventListener('native.keyboardhide', keyboardHideHandler);
cordova.plugins.Keyboard.disableScroll(false);
//anything else you may need to do
});
@Ross, quick question. I loaded up the codepen using ionic start myapp http://codepen.io/rossmartin/pen/XJmpQr, added iOS platform, and ran it on my ios device (iphone 4). Everything is compiling and running, but getting a blank screen on the iPhone. It works fine on browser though (ionic serve). Any thoughts?
Regardless, fantastic work and thank you for contributing.