1

There is a single Page Application in AngularJS. It has nested tabs. In the inner tab there is a button on which some event gets fired.I need to trigger the click event of this button present on the inner tab Button gets rendered after both the tabs are rendered. What is the best way to wait until the tabs render themselves and the button is available.

I tried using 'while loop'(i.e keep looping until id for button is undefined) and $timeout(set timeout to 2-3 seconds) service but both have their consequences when there is delay in tab render.

Please suggest if there exists a better approach.

Bibek Sharma
  • 3,210
  • 6
  • 42
  • 64
John
  • 333
  • 1
  • 4
  • 12
  • how do these DOM elements are retrieved ? using ajax ? because the html should be there otherwise ( angular will only populate the data.. ) could you explain the whole scenario ? – jony89 Jul 14 '15 at 11:37
  • using angular, html templates are loaded. – John Jul 14 '15 at 11:51
  • Check the answer on this similar question: https://stackoverflow.com/questions/40398054/observe-on-mutationobserver-parameter-1-is-not-of-type-node – Andy Roberts Dec 13 '19 at 00:52

3 Answers3

2

Things have changed quite a bit since this question was asked, so there's now a much nicer solution.

requestAnimationFrame(() => {
   // this will be called just before the next video frame.
   // That will be after any changes to the DOM have been completed.
});

The docs are here... https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Peter Bagnall
  • 1,794
  • 18
  • 22
1

Even though this question is really old, I've found a solution that works for me and I think it might be helpful for some people.

Calling element.getBoundingClientRect() before executing further code worked for me. According to docs this method returns information about the position relative to the viewport (docs):

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

Assuming that the screen has to render to find information about the position of an element, this function would technically wait for the html element to render or even make the html element render.

Remember, this is only an assumation and I can't guarantee that it works.

täm
  • 56
  • 1
  • 4
-1

You can do it with jQuery: $(document).ready(callbackFn);

or native JS:

document.addEventListener('readystatechange', function onReadyStateChange() { if (document.readyState !== "complete") return; callbackFn(); }, false);

G_hi3
  • 588
  • 5
  • 22
  • i think this is wrong as probably the html is retrieved async, otherwise it will be easy – jony89 Jul 14 '15 at 11:40
  • Well, in this case the event-listener (and probably the ready function also) can be called on the ajax event, I think (maybe use another event-type) – G_hi3 Jul 14 '15 at 11:44
  • as this a SPA, the above event already gets fired and is not fired on tabs rendering – John Jul 14 '15 at 12:10