document.getElementById().setAttribute();

Ionic Framework ionic-v3
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