Redirect (show) tab with click event after authentication

[Marco]

I have multiple divs with datarole "view". In the first view we want to authenticate a user and when valid the user have access to other views (tabs).

Authentication Tab:
    <div data-role="view" id="tabstrip-login" data-title="Login" data-layout="mobile-tabstrip-unauth">
        <ul data-role="listview" data-style="inset" id="lvLogin">
            <li>Username <input id="loginUsername" required /></li>
            <li>Password <input id="loginPassword" required /></li>
        </ul>
        <a data-role="button" onclick="login()" id="btnLogin">Login</a>
    </div>


Tab To show after authentication
    <div data-role="view" id="tabstrip-projects" data-title="Projects" data-init="listProjects" data-layout="mobile-tabstrip-auth">
        <ul data-style="inset" id="projectList"></ul>
    </div>

The validation wil take place in the login function:
        function login() {
//authenticate with a json call that sets a session
if (session){
//Show tabstrip-projects 
}
else
{
// show failed login message
}
        }

So the question is how to show a view or tab within a click event function.. I hope the question is clear.

Thanks,
Marco

[Petyo]

Hello,

This is yet undocumented, but you can use the navigate(url) method of the mobile application instance. 

On a side note, instead of onclick="login()", you can use data-click="login" for better performance on touch devices. 


Regards,
Petyo
the Telerik team