Re: [angular.js] Trying to figure out why 'load' event not firing...

949 views
Skip to first unread message

Renan T. Fernandes

unread,
Jun 4, 2012, 2:00:48 PM6/4/12
to ang...@googlegroups.com
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus <evan.e...@gmail.com>
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/lYiiQqXjBlIJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.



--
Renan Fernandes(aka "ShadowBelmolve")

Misko Hevery

unread,
Jun 6, 2012, 8:26:34 PM6/6/12
to ang...@googlegroups.com
angular binds on DOM CONTENT READY see startup: http://ci.angularjs.org/job/angular.js-misko/580/artifact/build/pkg/1.0.0rc10/docs-1.0.0rc10/guide/concepts

depending on the browser this maybe before or after load event. 

Why are you listening on the DOM event? what are you trying to achieve. By the time angular is up it should be safe to do any DOM manipulation you want.

On Tue, Jun 5, 2012 at 6:44 PM, evaneus <evan.e...@gmail.com> wrote:
So I tried a few things to get the directive working. For context, what I'm trying to do here is build an infinite scroll directive (behaviour like facebook newsfeed) that calls a function to load more data into a div. This is triggered when the bottom of the div is above the bottom the browser view. It works fine when scrolling once the page is loaded (I just listen for scroll events.) The problem is that on initial page load I want to see if the div bottom is above page bottom (and load some extra data if it is), and this is the part I cannot get to work.

I tried....

1) capturing a load / or jqlite ready event - this does not work within a partial (works at top level) (http://plunker.no.de/edit/EdU2iF)
2) watching the data in the model for updates, but the model is updated before the view, so my check on div bounds in the directive doesn't work
3) using $defer to trigger my function that checks the div bounds - but this causes an '$apply is already in progress' error and I'm not sure how to workaround.

 I guess what would be ideal is if there were a life-cycle event in angular that I could latch on to that is fired late in the cycle once the view is updated. As far as I can tell this isn't available.

Anyone have a suggestion how I might go about getting this to work? I'm about ready to give up and just pre-load the page with enough content that I can be sure it will be beneath the page view.

Thx

On Tuesday, June 5, 2012 1:07:36 PM UTC-4, evaneus wrote:
I should add, I am guessing that the partial is just not loaded until after the load event is fired, so am wondering how I could go about effectively firing something on load within a partial.

On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Tuesday, June 5, 2012 1:07:36 PM UTC-4, evaneus wrote:
I should add, I am guessing that the partial is just not loaded until after the load event is fired, so am wondering how I could go about effectively firing something on load within a partial.

On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Tuesday, June 5, 2012 1:07:36 PM UTC-4, evaneus wrote:
I should add, I am guessing that the partial is just not loaded until after the load event is fired, so am wondering how I could go about effectively firing something on load within a partial.

On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Tuesday, June 5, 2012 1:07:36 PM UTC-4, evaneus wrote:
I should add, I am guessing that the partial is just not loaded until after the load event is fired, so am wondering how I could go about effectively firing something on load within a partial.

On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Tuesday, June 5, 2012 1:07:36 PM UTC-4, evaneus wrote:
I should add, I am guessing that the partial is just not loaded until after the load event is fired, so am wondering how I could go about effectively firing something on load within a partial.

On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")


On Monday, June 4, 2012 3:18:38 PM UTC-4, evaneus wrote:
Yes, the load event does fire in the JSFiddle for me too, but in my actual code (which is the exact same apart from the fact that the directive is used from a div that is loaded in a partial) it doesn't work. So I guess the fiddle demonstrates that it should work in principle, now I'm trying to figure out why it isn't working in practice :) 


On Monday, June 4, 2012 2:00:48 PM UTC-4, Renan T. Fernandes wrote:
strange, the load event is fired here.... chrome 19 on ubuntu 12.04

2012/6/4 evaneus
I have a JSFiddle showing the load and scroll events correctly being fired in my infinite scroll directive....


However in my actual codebase the 'scroll' event gets fired but not the 'load'. The important code is just the same, the difference is primarily that in my actual code the view that has the div is loaded in a partial. 

Anyone have a suggestion as to what the cause might be, or an alternate strategy?

(By the way, what I'm actually trying to do here is figure out when the page loads if the bottom of the div that holds my repeated data is above the bottom of the window, if it is I plan to load the next ten rows.)

--

--
Renan Fernandes(aka "ShadowBelmolve")

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/nPVeLQ2hunsJ.
Reply all
Reply to author
Forward
0 new messages