Newbie question

[Niko Lang]

I just worked through the tutorial and I am building my first own element. And I am missing some DOM-Scripting Functions I know from Prototype and jQuery that made my life very easy. But maybe my methods are just not right. This is what I have done so far:

<polymer-element name="search-field">
  <template>
   
    <div id="searchField">
        <ul id="searchCategories">
            <li><a id="search-categories-text" data-target="text" on-click="{{categoryClick}}">Text</a></li>
            <li><a id="search-categories-videos" data-target="videos" on-click="{{categoryClick}}">Videos</a></li>
            <li><a id="search-categories-audio" data-target="audio" on-click="{{categoryClick}}">Audio</a></li>
        </ul>
        <div id="searchContainer">
            <input id="searchText" type="text" />
            <input id="searchVideos" type="text" />
            <input id="searchAudio" type="text" />
        </div>
    </div>

  </template>
  <script>
    Polymer({
        ready: function() {
           
        },
        categoryClick: function(event, detail, sender) {
            console.log(sender.dataset.target);
            console.log(this.$.searchField.querySelector('#searchContainer input'));
            this.this.$.searchField.querySelector('#searchContainer input');
        }
    });
</script>
</polymer-element>

What I want to do is to set an active class to the bottom input-fields when one of the above links are clicked. On jQuery I would just observe a link and deactivate all input fields and activate the one input field I want to have. But I am not sure how to do it without jQuery. I could just use all the native javascript functions with loops etc but is there anything polymer can offer to make things easier?

[Max]

I'm not sure why you wouldn't use the appropriate id for the data-target, then you can use this.$[sender.dataset.target].classList.add('active')....or something.

However, somewhat tangentially, I have to wonder why you aren't using querySelectorAll() since there are several input elements in your #searchContainer, and why not use this.$.searchContainer directly.
...and this.this.$ doesn't look right at all (copy/paste error?)

HTH

Max.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f4fae7e7-ec08-46f8-88b3-78f8f08f0ca2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Niko Lang]

Thank you so much. Almost there. But how to remove all the active classes from the querySelectorAll-Array?

<script>
    Polymer({
        ready: function() {
           
        },
        categoryClick: function(event, detail, sender) {
            console.log(sender.dataset.target);

            console.log(this.$.searchField.querySelectorAll('#searchContainer input'));
            this.$.searchField.querySelectorAll('#searchContainer input').classList.remove('active');
            this.$[sender.dataset.target].classList.add('active');
        }
    });
</script>

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

[Max]

Can you not add that to your query? Something like ...querySelectorAll('#searchContainer input:not(.active)'...?

I'm still curious why you're not directly accessing searchContainer using Polymer's shortcut - eg by doing this.$.searchContainer.querySelectorAll('input:not(.active)')....

Max.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6a7303cf-f46c-4ade-b370-0112f9978711%40googlegroups.com.

[Niko Lang]

I think its cleaner to eliminate every active. I had the experience that another solution may be buggy. My final solution is:

<script>
        Polymer({
            ready: function() {
                this.$.searchText.classList.add('active');
                this.$.searchCategoriesText.classList.add('active');

            },
            categoryClick: function(event, detail, sender) {

                var i;
               
                var x = this.$.searchCategories.querySelectorAll('li a');
                for (i = 0; i < x.length; i++) {
                    x[i].classList.remove("active");
                }
               
                sender.classList.add('active');
               
                var x = this.$.searchContainer.querySelectorAll('input');
                for (i = 0; i < x.length; i++) {
                    x[i].classList.remove("active");

                }
               
                this.$[sender.dataset.target].classList.add('active');
            }
        });
    </script>

[Max]

ok, fair enough. I think I misunderstood what you said before, so my reply isn't what you were after :)

Max.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8b9bf940-0fd6-4ed3-a902-ce3746b3c13b%40googlegroups.com.