CODEWITHSUNDEEP
dartpolymerdart-polymer
Azael
Azael

Reputation: 654

Dart: Can't access dynamically set Element Ids

So I wanted to set an Id dynamically in dart, but i can't access it. btn will always be null. Chrome does show that the Button got the Id, but i get no Access to the Id in Dart..

    // extended Td html
    <polymer-element 
        name="crud-tr" extends="tr" attributes="metaData entry">   
        <script type="application/dart" src="crud-tr.dart"></script> 
    </polymer-element>

--

// extended Td Dart
@CustomTag('crud-tr')
class CrudTrElement extends TableRowElement with Polymer, Observable {
    void attached() {
        super.attached();
        TableCellElement editTd = new TableCellElement();      
        ButtonElement edit_cancel = new ButtonElement();
        edit_cancel
            ..text = "Edit"
            ..id = 'edit_cancel'
            ..onClick.listen((event) => toggleEditMode());
        editTd.append(edit_cancel);

        TableCellElement deleteTd = new TableCellElement(); 
        ButtonElement delete_save = new ButtonElement();
        delete_save
            ..id = 'delete_save'
            ..text = "Delete"
            ..onClick.listen((event) => deleteEntry());
        deleteTd.append(delete_save); 

        this
            ..append(editTd)
            ..append(deleteTd);
    }

    void toggleEditMode() {         
            ButtonElement editBtn = this.shadowRoot.querySelector('#edit_cancel');
            ButtonElement deleteBtn = this.shadowRoot.querySelector('#delete_save');
            /* -> Both null / Exception */      
    }

     CrudTrElement.created() : super.created() {
        polymerCreated();
    }
}

Upvotes: 2

Views: 394

Answers (2)

montyr75
montyr75

Reputation: 941

"Exception: The null object does not have a method 'querySelector'."

Could that error possibly be because the <polymer-element> definition has no <template>? Perhaps a shadow DOM is never created in that instance, so shadowRoot is null. Just guessing here...

I wonder, also, if this..append() attaches elements to the shadow DOM. Seems unlikely.

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

This is expected behavior (as designed). Dynamically created elements are not included in the map accessible with $. You need to use shadowRoot.querySelector('#someButton'); instead.

Update

I guess the problem is the missing element in your elements HTML. Why do you add these elements imperatively instead of markup?. You add the elements as children not as content of the the shadow DOM. If this is intentionally you need to use this.querySelector() instead of shadowRoot.querySelector()

Upvotes: 3

Related Questions