I made a function to change the "selected" attribute in the iron -page and running, but in some cases the "selected" attribute returns the last value giving the feeling of not changing.
The element
<template is="dom-bind" id="fulltemplate">
<div id="fullContainer" class="vertical layout flex" hidden>
<iron-pages id="pages" class="fancy flex center center-justified" selected="{{pageSelected}}" unresolve>
<div id="logincontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox vertical layout" elevation="3">
<div class="hiddenof">
<h4 id="loginTitle"><iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{loginTitle}}</span></h4>
<h5 id="changePassword" hidden class="red">{{changePassword}}</h5>
<section>
<paper-input-container id="usernamedecorator">
<label>{{labuser}}</label>
<input id="usernameinput" pattern="[0-9]*" bind-value="{{valUsername}}" is="iron-input" onkeypress="keyPressLogin(event)" required>
<paper-input-error>{{errorInputUser}}</paper-input-error>
</paper-input-container>
<paper-input-container id="passworddecorator">
<label>{{labpass}}</label>
<input id="passwordinput" bind-value="{{valPassword}}" is="iron-input" maxlength='15' onkeypress="keyPressLogin(event)">
<paper-input-error>{{errorInputPass}}</paper-input-error>
</paper-input-container>
<paper-input-container id="confirmpassdecorator" hidden="true">
<label>{{labpass}}</label>
<input id="Text1" bind-value="{{valCPassword}}" is="iron-input" maxlength='15' onkeypress="keyPressLogin(event)">
<paper-input-error>{{errorInputPass}}</paper-input-error>
</paper-input-container>
</section>
<div id="bottomline" class="horizontal layout center">
<div class="clickable red medium flex" id="forgpassText" onclick="goto(1)">{{forgpassText}}</div>
<%--<paper-item class="clickable red medium flex" id="forgpassText" onclick="goto(1)">{{forgpassText}}</paper-item>--%>
<paper-spinner id="spinner" hidden></paper-spinner>
<paper-button id="loginButton" raised class="buttonNeutral" onclick="clickLogin(event);">{{btentrar}}</paper-button>
</div>
<paper-toast
id="errorToast"
duration="4000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="passremcontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox vertical layout" elevation="3">
<div class="hiddenof">
<div class="titbox justify">
<p id="rempassTit" class="big bold center">
<iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{rempassTit}}</span>
</p>
<p id="rempassSub" class="medium">{{rempassSub}}</p>
</div>
<div class="horizontal layout center-justified">
<section class="notoppadding">
<paper-input-container id="passreqdecorator">
<label>{{labemail}}</label>
<input id="passreqinput" bind-value="{{valmailpass}}" is="iron-input" onkeypress="keyPressLogin(event)">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
</section>
</div>
<div class="horizontal layout">
<div class="flex"></div>
<paper-button id="cancelPassB" raised class="buttonCancel" onclick="goto(0)">{{btcancelar}}</paper-button>
<paper-button id="acceptPassB" raised class="buttonNeutral" onclick="sendpassreq()">{{btenviar}}</paper-button>
<paper-spinner id="passspinner" hidden></paper-spinner>
</div>
<paper-toast
id="remToast"
duration="2000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="masinfoDiv" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox bigboxshadow layout vertical" id="infoshadow" elevation="3">
<div id="infoDivScroll" class="hiddenof flex vertical layout">
<div class="titbox justify" class="bigboxshadow">
<p id="moreinfoTit" class="big bold center-text"><iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{moreinfoTit}}</span></p>
<p id="moreinfoSub" class="medium">{{moreinfoSub}}</p>
</div>
<div id="masinfoContent" class="flex horizontal layout center-justified redim">
<section class="notoppadding flex">
<paper-input-container id="nomapedeco">
<label>{{labnomape}}</label>
<input id="nomapeinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="empresadeco">
<label>{{labempresa}}</label>
<input id="empresainput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="actecodeco">
<label>{{labactecon}}</label>
<input id="actecoinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="tlfdeco">
<label>{{labtlf}}</label>
<input id="tlfinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="maildeco">
<label>{{labemail}}</label>
<input id="mailinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="consultadeco">
<label>{{labconsulta}}</label>
<input id="consultainput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
</section>
</div>
<div class="horizontal layout" id="masinfoBotones">
<div class="horizontal end-justified layout flex">
<paper-button id="cancelInfoB" raised class="buttonCancel" onclick="goto(0)">{{btcancelar}}</paper-button>
<paper-button id="acceptInfoB" raised class="buttonNeutral" onclick="sendinforeq()">{{btenviar}}</paper-button>
</div>
<paper-spinner id="infospinner" hidden></paper-spinner>
</div>
<paper-toast
id="infoToast"
duration="4000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="whatiscontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox layout vertical" id="whatischadow" elevation="3">
<div>
<div class="titbox justify">
<p id="whatistit" class="big bold center">
<iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{whatis}}</span>
</p>
</div>
<div horizontal layout center-justified>
<section class="notoppadding">
<p class="medium">{{whatisContent}}</p>
</section>
</div>
</div>
</paper-material>
</div>
</iron-pages>
</div>
</template>
Function
function goto(i){
var maintemplate = document.querySelector('#fulltemplate');
if(i==0){
document.getElementById("pagesubtitle").removeAttribute("hidden");
document.getElementById("lefttopbar").removeAttribute("hidden");
document.querySelector("#iconinfo").removeAttribute("hidden");
maintemplate.pageTitle = "<%= Resources.GlobalResources.TITLE %>";
} else if(i==2){
maintemplate.pageTitle = "<%= Resources.GlobalResources.MASINFORMACION %>";
document.getElementById("pagesubtitle").setAttribute("hidden", true);
document.getElementById("lefttopbar").setAttribute("hidden", true);
document.querySelector("#iconinfo").setAttribute("hidden", true);
}
maintemplate.pageSelected = i;
}
Any ideas to correct the problem ?
Thanks for your time.
You could try using
instead of using a property of the maintemplate as 'this' refers to your custom element. Hope that helps.
Another option would be is to select the iron-pages element and directly set the selected property
Cheers