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

Navigate to remote view not working.

5 Answers 241 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Leytner
Top achievements
Rank 1
Leytner asked on 05 Feb 2013, 02:42 AM
I have two html pages
default.htm With LoginView
Views/Home.htm With HomeView

in javascript when login is successfull In trying to navigate to HomeView with this sintax
app.navigate('Views/Home.htm');
and produce this url
http://localhost/Default.htm#ViewsHome.htm

that is incorrect and shows a blank page only

but if I navigate with a link
<a data-align="right" data-role="button" class="nav-button" href="Views/home.htm">Home page</a>
produce this url
http://localhost/Default.htm#HomeView

and shows all the markup.

I've tried all the url variations and still doesn't know what's happening please help me.

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 05 Feb 2013, 02:46 PM
Hello Leyther,

This does not sound like a known issue. Is it possible for you to send us a sample project, so that we can reproduce the problem on our side? 

Thank you in advance,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Leytner
Top achievements
Rank 1
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> <!--onclick=" OnLogin()"-->
            </tr>
        </table>
        <span data-bind="text: Credentials.userName"></span>
        </div>
    </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>
        <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>-->
            Copyright 2013 Abound Resources
        </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.
0
Alexander Valchev
Telerik team
answered on 07 Feb 2013, 08:56 AM
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!
0
Leytner
Top achievements
Rank 1
answered on 07 Feb 2013, 05:39 PM
Hi Alexander,

The example code that you send is ok to me, the only thing maybe is that I have my project in a website folder, in http://localhost/TestSite, so you can test in the same environment than me, and I've downloaded the trial version of kendo UI.
0
Alexander Valchev
Telerik team
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!
Tags
General Discussions
Asked by
Leytner
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Leytner
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or