cancel
Showing results for 
Search instead for 
Did you mean: 

addContent of view is asynchronous with DOM change?

Former Member
0 Kudos

Hi experts,

I've just encountered a problem with sap.ui.jsview. Here's the thing: when I add some content into the view using "addContent" method, I was expecting that I can get the DOM element of the newly added content immediately. But I found it doesn't work. I can only get the DOM element in a setTimeout function.

Here is the example: http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/23872

As you can see I am trying to get the dom node of the newly added text control using jquery. But I can't get it unless I put my logic into setTimeout. Also I found that removeContent has the same problem. UI5 will remove the DOM asynchronously.

I am wondering is this a by-designed behavior? And if so, is there any better way for me to access the dom other than putting all code into setTimeout, which may make my code more complex and unreadable?

Thank you for the help!

Best Regard,

Luke Lu

Accepted Solutions (1)

Accepted Solutions (1)

saivellanki
Active Contributor
0 Kudos

Hi Luke,


I am not able to access your code. Since, it is at SAP work environment.

However, you can try using addEventDelegate method of view. In onAfterRendering event you will be able to access the DOM  -



var oView = new sap.ui.jsview();

oView.addEventDelegate({                                          

  onAfterRendering: function(){

          // Your Logic

  }

}, oView);

Please check API for more info - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.Element


Regards,

Sai Vellanki.

Former Member
0 Kudos

Hi Sai,

I get your point.

Here's my code:


sap.ui.jsview('testView', {

    createContent: function(){

        var view = this;

        return [new sap.m.Button({

            text: 'click',

            press: function () {

                view.addContent(new sap.m.Text({

                    id: 'hello',

                    text:'hello'

                }));

                alert(jQuery('#hello').length); // I expect it to be 1, but it is 0 actually.

                setTimeout(function(){

                    alert(jQuery('#hello').length); // It outputs 1 in the setTimout function.

                });

            }

        })]

    }

});

sap.ui.jsview('testView').placeAt('content');

Your idea does solve the problem. However, I've got a concern that the onAfterRendering event will be triggered more times than I expected. For example, say we have two addContent method to add different contents, the onAfterRendering will be triggered twice. But probably I need different handling logic for each addContent method. This will need extra effort. Anyway I can see there is some way to try. But this code structure seems not quite natural. I wonder why UI5 is designed like this...

Still, thank you for you help!

former_member182862
Active Contributor
0 Kudos

HI Luke

Can you share why you need to access the DOM?

When content is added to a SAPUI5 object, it needs to be rendered so that DOM for the new content is created.

Thanks

-D

Former Member
0 Kudos

Hi,

Our situation is: We need render several charts into a view. The chart library is not using UI5 tech and it just need a dom node so that it can render the charts into it. Before that we need some Ajax call to get the charts' type.

So we tried some code like: (highly simplified)


getChartsType().done(function(){

view.addContent(new sap.ui.core.HTML({content: '<div id="chartContainer"></div>'}));

myChartLib.renderInto('chartContainer'); // error was thown up, no such element

});

former_member182862
Active Contributor
0 Kudos

HI Luke

the proper way is the create a custom control for the chart.

Thanks

-D

Former Member
0 Kudos

Thank you Dennis, I'll try

former_member182862
Active Contributor
0 Kudos

Hi Luke

Here is an example with D3.js

JS Bin - Collaborative JavaScript Debugging

Answers (0)