Change iron-pages selected value on button click

Question

I'm using the Polymer Starter Kit as a base for this project.

I'm trying to make two buttons that takes users to the next and previous page inside a iron-page element.

<iron-pages selected="0">
                <div>
                    <paper-material elevation="1">
                        <paper-radio-group class="layout vertical" selected="1">
                            <paper-radio-button name="1">1</paper-radio-button>
                            <paper-radio-button name="2">2</paper-radio-button>
                            <paper-radio-button name="3">3</paper-radio-button>
                        </paper-radio-group>
                    </paper-material>
                    <div class="horizontal justified layout">
                        <div>
                            <paper-button raised>Previous</paper-button>
                        </div>
                        <div>
                            <paper-button raised>Next</paper-button>
                        </div>
                    </div>
                </div>
                <div>Page 2</div>
                <div>Page 3</div>
                </iron-pages>

It might be worth noting that this iron-page element is placed inside the iron-page element that the Starter Kit uses to handle the menu items.

I have tried a bunch of methods to make this work. I tried changing the divs into "sections" and use the same method that the starter kit uses for the menu with data-routes, but I couldn't get that to work. I have also tried to make a function in the script file that listens for a click event but it changed page in the wrong iron-page element. It jumped to the next page in the menu.

Is it possible to just make the "Next" button change the selected value to "2" somehow?

Maria Maria · Accepted Answer · 2015-08-14T17:39:35

Here is how you could do it. Give your iron-pages component and the buttons an id, so they will be easy to find later on.

<iron-pages id="pages" selected="0">

    <paper-button raised id="next">Next</paper-button>

Define the event-handler and refer to the iron-pages by their id. You can then set selected to the page number (starting at 0) that you want to jump to or call selectedNext() to jump to the next page.

<script>
    var pages = document.querySelector("#pages");
    var next = document.querySelector("#next");
    next.addEventListener("click", function(){
        // choose an option here
        pages.selectNext();
        pages.selected = 2;
        pages.selected = pages.selected +1;  
     });
</script>

Edit If you are using the structure of the starter kit, you can try adding the button click handler into the dom-change callback.

app.addEventListener('dom-change', function() {
    console.log('Our app is ready to rock!');

    var pages = document.querySelector("#pages");
    var next = document.querySelector("#next");
    next.addEventListener("click", function(){
        // choose an option here
        pages.selectNext();
        pages.selected = 2;
        pages.selected = pages.selected +1;  
     });
});

Change iron-pages selected value on button click

2 Answers