Skip to Content

Want to manipulate DOM using onAfterRendering()

Hello Experts,

I have 2 XML views (Say A an B). When I click on one button in view A, it goes to B, manipulates the HTML DOM of B (for your info, I have to draw a line between two buttons in View B, hence I use some HTML/CSS tricks to draw the line. That is why I manipulate DOM of View B)..

I have tried the following:

Round 1: Wrote the code to draw line between HTML elements (by manipulating DOM) in patternMatched handler of View B.

Result: Got error in browser console saying reference to HTML elements is undefined.

My interpretation about this error: The HTML DOM elements have not rendered when patternMatched event is called, so got this error.

Round 2: Moved the code to draw line between HTML elements from patternMatched handler to onAfterRendering() of View B.

Result: Got the expected result when navigated from View A to B for first time.. When I navigated back to A and then to B again, I did not get the HTML result re-rendered.

My interpretation about this result: onAfterRendering() is called only once (similar to onInit) during first navigation.

Round 3: With the set up mentioned in Round 2, I have invoked onAfterRendering() from patternMatched event handler explicitly (using this.onAfterRendering())

Result: Same as Round 2

My interpretation about this result: I do understand that invoking onAfterRendering() like this is not correct and it violates the purpose of onAfterRendering(). However, I was desperate to get the result hence tried with this, but in vain

Round 4: I have read in some forums that I can call this.getView().invalidate() will invoke onAfterRendering() method every time when I navigate to View B. Hence I have added this.getView().invalidate() in patternMatched event handler and retained the code to render HTML DOM manipulation results in onAfterRendering().

Result: Same as Round 2

My interpretation about this result: Same as Round 3.

Now, I am left with no options.

My questions are:

1. What is the best way to handle the above scenario?

2. Is it an expected behavior that onAfterRendering() is called only once (similar to onInit)?

3. Do we have any settings by which onAfterRendering() will be called always when we navigate to a view (irrespective of first load, 2nd load etc)

Regards,

Faddy

Add comment
10|10000 characters needed characters exceeded

  • Can anyone please help me here.

    When I wrote jQuery code to manipulate DOM in patternMatched handler, it is not working as DOM does not exist at the point. When I put the jQuery code in onAfterRendering(), it gets executed only during first time visit so not giving the desired result during 2nd visit onwards.

    Regards,

    Faddy

  • Get RSS Feed

3 Answers

  • Best Answer
    Aug 13, 2017 at 06:20 PM

    onAfterShow() did the job for me.

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 10, 2017 at 04:14 PM

    As mentioned by Sarath 'onAfterRendering' is called after rendering the screen. If you are navigating from View A to View B for the first time then 'onAfterRendering' of VIew B will be called, now if you go back to View A and come again to View B 'onAfterRendering' will not be called.....this mainly to avoid unnecessary rendering in view B as no UI will be changed.

    Round 1 of your code should work in this case...I have used 'RouteMatched' event instead of 'PatternMatched' in a project same like your scenario and it worked fine.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Srikanth,

      In my case, the DOM element processing would be sensible only after rendering as I have to process DOM elements whcih will be available only after onAfterRendering(). I need to draw line with different colors or between different buttons each time when I visit View B, so onAfterRendering() has to be called every time when I navigate to View B..

      How to achieve this?

      Regards,

      Faddy

  • Aug 10, 2017 at 02:26 PM

    onAfterRendering is called after rendering the screen. If the screen is rendered after navigation, it should still be called unlike init, which is called only once in the lifecycle.

    To manipulate the HTML, have a method which could use jQuery to perform your drawing. Call it from onAfterRendering and also while navigating between views. Once the screen is loaded i.e. HTML is rendered, your jQuery should be able to access the DOM and manipulate it. If its going to rendered again, it should call your onAfterRendering.

    Regards,

    Sharath

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Sharath,

      When I wrote jQuery code to manipulate DOM in patternMatched handler, it is not working as DOM does not exist. That is why I wanted to execute jQuery code only in or after onAfterRendering (by when the whole DOM will be ready)

      Regards,

      Faddy