This is a migrated thread and some comments may be shown as answers.

Navigate to remote view not working.

5 Answers 276 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 05 Feb 2013, 02:58 PM

This is the main page default.htm with the login view:

<body>

<div data-role="view" id="LoginView" data-title="Login to access suite" align="center" >

<div id="LoginForm">

<table>

<tr>

<td>User Name: </td>

<td><input type="text" id="UserNameText" data-bind="value: Credentials.userName"/></td>

</tr>

<tr>

<td>Password: </td>

<td><input type="password" id="PasswordText" data-bind="value: Credentials.password"/></td>

</tr>

<tr>

<td></td>

<td><input id="LoginButton" type="submit" value="log in" data-bind="events: { click: OnLogin }" /></td> 

</tr>

</table>

<span data-bind="text: Credentials.userName"></span>

</div>

<div data-role="layout" data-id="mainLayout">

<div data-role="header">

<div data-role="navbar">

bRisk Suite -

<span data-role="view-title"></span>

<a data-align="right" data-role="button" class="nav-button" href="#LoginView">Log Out</a>

<a data-align="right" data-role="button" class="nav-button" href="/Views/Home.htm">Home page</a>

</div>

<div data-role="footer" style="color: #800000">

<!-- <div data-role="tabstrip">

<a href="#homeView" data-icon="info">Home</a>

<a href="#loginView">Logs Out</a>

</div>-->

</div>

<script src="ViewModels/LoginViewModel.js" type="text/javascript"></script>

</body>

This is the application variable initialition

var app = new kendo.mobile.Application(document.body, {

layout: "mainLayout",

hideAddressBar: true,

initial: "LoginView",

transition: "zoom"

});

This is the login viewmodel script to be use by the view

var LoginViewModel = kendo.observable({

Credentials: {

userName: "",

password: ""

},

OnLogin: function () {

CallWebService("Security.svc/Login", this.Credentials.toJSON(),

function(msg) {

if (msg)

app.navigate('/Views/Home.htm');

});

}

});

The callwebservice is working and executing the parameter function

This is the second page Home.htm with only the home view located in the Views folder

<div data-role="view" id="HomeView" data-title="Home Menu" data-before-show="ValidateLogin">

home page

</div>

The function ValidateLogin is empty without any statements.
The nav button in the loginView is working ok "<a data-align="right" data-role="button" class="nav-button" href="/Views/Home.htm">Home page</a>", but the OnLogin javascript function isn't working navigating to the home view "app.navigate('/Views/Home.htm');" with the same url, this is my problem.

answered on 07 Feb 2013, 08:56 AM

example.zip

Hello Leytner,

You code looks OK. I prepared a small project in order to test it. Could you please check it and let me know what I am missing? Note that in order to load the remote view file successfully you should run the example from server (IIS, Apache, etc.).

All I changed is to remove the backslash from the relative path "Views/Home.htm" so it does not look up for the Views folter in the root directory. Also I bound the LoginView to the View-Model with the data-modal attribute.

Kind regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 11 Feb 2013, 11:48 AM

Hi Leytner,

I tested this with the official release (v2012.3.1114) and got it working as expected. Please compare your current implementation with the one presented in the example. If you still experience problem, would it be possible for you to provide a link of your project which I can access?

In addition, it is not recommended to use the DOM click event in mobile application as it will cause troubles when the application is opened on mobile device. Instead of HTML submit button please consider using mobile Button widget and its build-in click event.

Regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!