Want to manipulate DOM using onAfterRendering()

[fahad_saplearning]

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

[fahad_saplearning]

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

[fahad_saplearning · Accepted solution]

onAfterShow() did the job for me.

[former_member365727]

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.

[fahad_saplearning]

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

[Sharathmg]

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

[fahad_saplearning]

Hi Sharath,

Thanks for your response..

Unfortunately, onAfterRendering() is called only once in my case when I navigate back and forth. All my issues will be solved if onAfterRendering is called every time when I navigate to view B. What could be the reason?

Please note that I use jQuery to manipulate the DOM which works perfectly fine. The issue is caused by onAfterRendering() where it is called only during first time. I am not sure whether there is any explicit setting to be done by which onAfterRendering() will be called everytime when I navigate to View B. Or it is something else?

I have created the project using trial WebIDE in SAP Cloud platform.

Regards,

Faddy

[Sharathmg]

onAfterRendering is a hook method i.e. its controlled by framework.. we will not be able to control its flow.

Is your DOM structure is available to you(between view navigation), why do you want to use onAfterRendering, as you can use jQuery calls in any method triggered during navigation?

[fahad_saplearning]

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