document.getElementById().setAttribute();

#1

document.getElementById().setAttribute(); is not working when run on an iOS device.
With Ionic Serve it works perfectly well. I’m using Ionic 3.

System:
Node : v7.10.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.0
ios-sim : 5.0.12
npm : 4.2.0

#2

Try not to use it, but do it the Angular way if possible.

But:
What does not work - the setAttribute or the getElementById?

#3

I think it’s getElementById() that doesn’t work.

How can I do it the Angular way?

#4

Find out by saving it in a variable and then calling .setAttribute on that variable.

That depends on what you are actually doing here.

#5

Actually I got it to work now, but with ONE BUT.

When I do ``this.app.getRootNav().push(Tabs2Page);, because I've got two sets of Tabs,getElementById()` stops working for some unknown reason.

Any clues why?

#6

Do you use the same ID on both tabs? Or the same page twice in the hierarchy?

1 Like
#7

I’m not using ID’s for my Tabs pages at all. These are two different pages (HTML, SCSS, TS) respectively.

Here’s the code for each page. Should I add ID’s? And how?

<ion-tabs [color]="light">
  <ion-tab [root]="tab1Root" tabTitle="EXPLORE" tabIcon="ios-search"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="INBOX" tabIcon="ios-chatboxes-outline" [tabBadge]="notifications > 0 ? notifications : null" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="PROFILE" tabIcon="ios-person-outline"></ion-tab>
</ion-tabs>
<ion-tabs><div class="tabs2-div-container">
  <ion-tab [root]="tab1Root" tabTitle="ADD" tabIcon="ios-add-circle-outline"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="INBOX" tabIcon="ios-chatboxes-outline"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="PROFILE" tabIcon="ios-person-outline"></ion-tab>
</div></ion-tabs>
#8

You are using getElementById - you must use IDs somewhere.

#9

I’m using that to change the class and name for an element.

#10

And adding ID’s like this doesn’t help either:

<ion-tabs #tabs2 id="tabs2">

#11

I have no idea why giving IDs to tabs should be of any relevance here and still don’t know what you are actually doing with that code.

#12

I’m using the following code:

        document.getElementById(listingID).setAttribute("name", "ios-heart-outline");
        document.getElementById(listingID).setAttribute("class", "like icon icon-md ion-ios-heart-outline");

To dynamically (upon button click) to change the following. From an outline heart to a full heart icon, and vice versa. this is my solution to a “like button/favourites button”.

<ion-icon [id]="i.listingID" [hidden]="i.myListing || i.addedToSaved" [class]="i.iconClass" [name]="i.iconName" item-left></ion-icon>

Also the outer div element has the (click) method which calls the getElementById().

#13

Have a look at this:
https://angular.io/guide/template-syntax#template-expressions
https://angular.io/guide/template-syntax#property-binding--property-

1 Like
#14

I know these and I’m using them. I don’t think the problem is there. Somehow when Angular executed getRootNav(), Angular no longer dynamically executes changes made by getElementById().setAttribute().

#15

No, I meant: Why are not using this instead of setAttribute?

#16

I think I got it. I’ve looked at the HTML code, and each time I do a getRootNav(), Ionic copies the code below, so the change is made ok, but on the old code! I have no idea why this copies the code like that. Is there maybe a way to clear the cache/memory(not the right words I think, but the idea in general). What do you think?

#17

I think @Sujan12’s recommended approach is along these line. At least this is what I do for a like button, not sure if it works for tabs.


<ion-tab [root]="tab1Root" tabTitle="EXPLORE" tabIcon="notSelected" *ngIf="!tab1Selected"></ion-tab>
<ion-tab [root]="tab1Root" tabTitle="EXPLORE" tabIcon="selected" *ngIf="tab1Selected"></ion-tab>

Here tab1selected is a boolean variable, and I’m just using selected and notSelected to make a point.

1 Like
#18

I don’T even understand how tabs are relevant here. @dimitri320?

#19

Don’t try to do it yourself, just let Angular do the work for you.

#20

Further investigation is pointless until we get down to only one set of tabs per page. Multiple sets are unsupported and likely to result any any amount of unexpected weirdness.

1 Like