Dynamic HTML error Onsen 2

munsterlander

@Omar-Hassan Even using the innerHTML method of adding elements?

Omar Hassan

@munsterlander said:
Yes, it also does ,not work.
For example here if you chnaged onlick here to be ng-click

onsItem.setAttribute('ng-click', "functionName()");

it will not work, all things works well in onsen 1.3.

munsterlander

@Omar-Hassan Hmm, interesting. Let me play with this a bit tonight and I will post something back within about 5 hours.

Fran Diox

@Omar-Hassan Oh! Sorry, I didn’t notice you were using AngularJS 1.x. In that case you do need to compile, sorry for the misunderstanding.
The error says that the div that you get (el variable) is not an HTMLElement. Which element are you passing? The check el instanceof HTMLElement fails.

Omar Hassan

@Fran-Diox
Here is a sample from my generated HTML,

<ul class="tabs">
   <li class="current" ng-click="oneClick(0)">ملاحظات</li>
   <li class="current" ng-click="oneClick(1)">عام</li>
</ul>
<br>
<div class="form" ng-show="shouldShow(0)"></div>
<div class="form" ng-show="shouldShow(1)">
   <p>رصيد أيام الإجازة</p>
   <br><input id="BalanceVactionDays" value="7" name="BalanceVactionDays" type="text" class="text-input" onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57" ng-init="BalanceVactionDays= 7" ng-model="BalanceVactionDays">
   <div class="error-msgs" ng-messages="requestDetailsFrom.BalanceVactionDays.$error">
      <p ng-message="emptyValidator">Required nn</p>
   </div>
   <p>مدة الإجازة الفعلية \ يوم</p>
   <br><input id="ActualVacationDays" value="1" name="ActualVacationDays" type="text" class="text-input" onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57" ng-init="ActualVacationDays= 1" ng-model="ActualVacationDays">
   <div class="error-msgs" ng-messages="requestDetailsFrom.ActualVacationDays.$error">
      <p ng-message="emptyValidator">Required nn</p>
   </div>
</div>

Omar Hassan

@Fran-Diox

If i changed your example to this

 var onsItem = document.createElement('ons-list-item');
            onsItem.setAttribute('modifier', "chevron");
            onsItem.setAttribute('ng-click', 'functionName()');
            onsItem.innerHTML = '<img src="" alt="something here" />';
            ons.compile(onsItem);

            var ccc = document.getElementById('listIDorSomething');
            ccc.appendChild(onsItem);

It give me this error

Error: AngularJS Scope is null. Argument DOM element must be attached in DOM document.
    at Object.ons.compile (angular-onsenui.js:472)
    at Scope.$scope.login_click (app.js:171)
    at angular.js:13924
    at angular-onsenui.js:11397
    at Scope.$eval (angular.js:16052)
    at Scope.$apply (angular.js:16152)
    at ons-button.listener (angular-onsenui.js:11396)
    at defaultHandlerWrapper (angular.js:3346)
    at ons-button.eventHandler (angular.js:3334)(anonymous function) @ angular.js:12520
17:4400/plugins/cordova-plugin-whitelist/whitelist.js:25 No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.

munsterlander

I have been working on this, but unfortunately my AngularJS is horrible and haven’t had much success. Hopefully someone else will be able to assist - apologies!

Omar Hassan

@munsterlander

Thanks for your cooperation,

Waiting for someone help in this.

Omar Hassan

Dears Onsen ui developers , No fix for this issue ?

munsterlander

@Omar-Hassan The Onsen team @Fran-Diox just published an article demonstrating this here: https://onsen.io/blog/auto-style-app-onsen/

Fran Diox

@Omar-Hassan For AngularJS you need to append the element before calling ons.compile. This is explained here: https://onsen.io/guide/overview.html#onscompilefunction

And I think the error is just that, Argument DOM element must be attached in DOM document. Hope you can fix it with this :)

raju

@munsterlander Its not working with looping. Could you suggest? Code below.

for(int i=0;i<3;i++){
var onsItem= document.createElement(‘ons-list-item’);
onsItem.setAttribute(‘modifier’, “chevron”);
onsItem.setAttribute(‘onclick’, “functionName()”);
onsItem.innerHTML = ‘<img src="" alt=“something here” />’;
document.getElementById(‘content’).appendChild(onsItem);
}