I am developing an ionic app where I load content dynamically on click event. I am using $ionicLoading.show() before hitting the API and $ionicLoading.hide() after getting the response.
I wish to retain loading atleast for 3 seconds even if data is completely loaded for some undefined reasons without using $timeout. I tried duration in $ionicLoading.show() but that does'nt help. Is this possible, if so how can I achieve that.
Try this. This will put a duration for the loading animation to show. After 3000 milliseconds the loader will auto hide
$ionicLoading.show({duration:3000});
Related
I must check data in API every for example 5sec and pass to array which is binding to html. When I invoke function in $interval like this:
$interval(refreshData, 5000);
It works, but destroy any other action which I doing for example close dropdowns etc.
What is the best way for create GET in specific interval?
I saw that in Firefox is ok, only Google Chrome,cancel any actions like coil selected dropdown list etc. when I load data to variable in promise. Anyone have idea why it happen?
I'm a beginner with AngularJs and i have some trouble understanding how to use $cookieStore :/
I have a lot of buttons. Everytime a button is clicked, a distinct function is called in the controller, and in this function, i'm trying to store a value in a cookie
example :
$cookieStore.put('cookie', '1');
And at the loading of the page, i added this line :
alert($cookieStore.get('cookie'));
When we load the page for the first time, it's normal to get an "undefined" popup. But the problem is, even after clicking multiple buttons, i always got an undefined popup after refresh.
Here's a working demo : http://plnkr.co/edit/6kuqaT7ISpo7uEwLHcZn?p=preview
Please help
Thanks
I checked your plunker cookie is setting properly :-)
Use STOP AND RUN button for refresh :P
I saw similar problem with refresh + $cookieStore some time ago, try using sessionStorage, if your target browser(s) allow that.
What Angular version do you use?
i'm working with angular js now for about ke 4 months and despite all the "first step failures" like not emphasising the async way anuglar thinks, I'm facing a problem I don't really understand. It's not that easy to describe.
I have a provider which registrates directives within the routeprovider's resolve function - during config phase. To compile programmatically preconfigured directives I create them on the specific controller call of each route. Acutally the directive I'm adressing here is a complex flotchart directive. It retrieves data from a rest api, transformes the retrieved data and prepares different kinds of option setups like proper stacked line charts or simple piecharts. Every single step takes its time, so I introduced promises to be sure that everthing is at it's right place before I finally call something like "$.plot".
So now I have the following situation: Imagine a singlepage app with two tabs. Each tab - like a first class menu item - refers to a new page with a new controller to process and new partials to render. For each page i have beside other directives one of these heavy flotchart directives to render. actually it takes about 5 seconds to render the chart. So we assume that we really start the app from beginning - like pressing F5. Now I enter the first page the first time and within the mentioned 5 seconds I switch tabs to enter the next page. I get to the next page, see different partials, layouts and stuff and a loading chart - but actually the directive of the first page is still bound to its link phase of that heavy flotchart directive (still preparing options for flot and calculating data to output graphically).
My problem is that this link phase actually really ends within a completely different template/route/controller context and gets stuck. It crashes with a console "replace" error from jquery.flot. I think this error means that flot tries to plot into a div which does not exist anymore. But that error occures just when I switch tabs during the link phase of the first page's heavy flot directive. It doesn't happen when the first page's chart is fully rendered and doesn't happen when the first page's directive hasn't entered its link phase (or am i missing something??). I tried placing some console.logs directly BEFORE hitting the jquery "$.plot" - remember only of the first page chart directive to dive into what's acutally happening. And the strange thing is when I manage to switch tabs within these magic 5 seconds, I still get the console log entries from the first page entry although I'm on a different page. And now guess what. That's strange - acutally two directive link phases are running side by side and one of them on a completely different view (or isn't it completely different, because its a singel page app?). Imagine I plot ("render") the chart in exactly the same div id - like $('#flot-chart'). so I have html parts containing id="flot-chart" on the first page AND on the second. when I now switch from the first to the second page (not finishing the first chart) I get the chart from the first page rendered in the #flot-chart div of the second page and like half a second later the actually correct chart rendered in that same div. So actually the link phase of the first page's chart directive ends in a completely different page in a way showing 2 charts consecutively. I know jquery.flot depends on DOM manipulation via jquery and that might be the problem (perhaps THAT'S the only real explanation for my problem), because jquery DOM manipulation is out from the angular way of life.
Or are there other explanations? I acutally solved the problem via $routeChangeStart listening and killing the $.plot process, but are there some hints, suggestions, explanations for that behaviour?
Plunker flot chart directive DOM collision
I have prepared a plunker which shows kind of a similar behaviour. i've delayed the creation of the directive and the directive's async data and option retrieval methods to somehow mock the behaviour of my app. this is non production code but describes simplified the way my problems occure. when you "fast click" the menu item one after the other many times, you can sometimes force angular to show 2 charts in one page. acutally one directive is linking and doing stuff in a different partial ? i know i'm missing something in my mind ... please give me a hint.
i used chrome for reproducing the error. stop the the plunker and press 'run'. directly after pressing 'run' click as fast as you can both links a couple of times.
Thanks a lot!
Let us say I have 5 jsps in my web app and I import the ext-all.js in all 5 jsps. In all 5 jsps, I write an Ext.onReady(function(){});
When I hit the first jsp by typing it in the browser url, will all 5 onReady() functions be called? Or only the onReady in jsp 1?
I ask becuase I have the vague idea that onReady event is fired only once per Ext application. So it is different from onLoad() which fires just for the particular page.
Yes, all five functions passed to onReady() will be executed, but each only once. Ext.onReady acts as a latch which guarantees the input functions won't execute before the DOM is ready. If Ext.onReady() is called after "DOM Ready" event, the function will be executed immediately.
Just to make it clear: the "DOM Ready" event only fires once per page load.
I've assumed that by "JSP page" you mean "a page fragment", that is all five JSP pages are used to construct a single document and all the JS code is on the same page.
You have to remember that a JSP leaves the server as plain HTML and there is just one HTML document per page (let's forget about iframes, etc., for simplicity).
I am using Jquery plugin http://timeago.yarp.com/ for showing time.
Issue is timeago will not take effect for dynamically generated items.
$(document).ready(function() {
$(".timeago").timeago(); // works perfectly fine for the items which are loaded on page load
//$(".timeago").live(timeago()); // gives me an error ie timeago is not defined
//$(".timeago").live($(".timeago").timeago()); // gives me an error too much recursion.
jQuery.timeago.settings.allowFuture = true;
});
From some google search I got to know something ie:
Using live is the same as using bind, except that it is limited only to the events click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Now how can do it cause I dont have any click event? How can I bind this?
.live() and .bind() assign callbacks to event. In your case, you don't have an event to assign the function to and so it fails.
You can, in theory, assign your callback to a custom event. You will however have to manually trigger the event (using .trigger()) whenever your item is generated. For example:
$("abbr.timeago").live("timeago", function() {
$(this).timeago();
});
// ... and in the bit that generates your item
$new_item.trigger("timeago")
Demo: http://jsfiddle.net/ZjuW4/9
Of course, using .live() in this situation is purely academic and does not really serve a good purpose.
If you do have access to the code that's generating the items, you can simply chain in the call to .timeago() as the items are generated, i.e. http://jsfiddle.net/ZjuW4/3/
take a look in this topic
here was discussed how to put timeago on dynamically loaded items
for example the results of an ajax request.
Activate timeago on newly added elements only
PS: allowFuture does not have anything to do with putting timeago on newly created items on your page. it just allows dates in the future (f.e. "in 3 days", "next week")