Hi,
I am working with a login page, in that form i am having two fields(username, password). When i submit the page, it will validate the form and post the data to a url and api returns a message if the credential are correct. Now i want to get the success value to check whether its success/error. If success i am navigate to dashboard page. Please find my index.html, loginViewModel.js files. Kindly approach me how to get the response value from server and navigate to other page one its success.
index.html
<!DOCTYPE html><br><html><br><head><br><meta charset="ISO-8859-1"><br><title>Login</title><br> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" /><br></head><br><body><br> <div data-role="view" data-title="Settings" id="loginForm"><br> <header data-role="header"><br> <div data-role="navbar"><br> <span data-role="view-title"></span><br> </div><br> </header><br> Server: <input id="serverid" name="authserver" type="url" data-bind="value: authserver" required data-required-msg="Enter server address" data-url-msg="Enter a valid url for server"><br> <span class="k-invalid-msg" data-for="authserver"></span><br/><br> UserName: <input id="emailid" name="username" type="email" data-bind="value: username" required data-required-msg="You need to enter email" data-email-msg="Enter a valid email id"><br> <span class="k-invalid-msg" data-for="username"></span><br/><br> Password: <input id="pwd" name="password" type="password" data-bind="value: password" required validationMessage="Enter Password with minimum 6 characters"><br> <span class="k-invalid-msg" data-for="password"></span><br/><br> <button data-bind="click: getUserDetails">Login</button><br> </div><br> <script src="scripts/jquery.min.js"></script><br> <script src="scripts/kendo.all.min.js"></script><br> <script src="scripts/viewModel/loginModel.js"></script><br> <script src="scripts/viewModel/loginViewModel.js"></script><br> <script><br> /** Initial the kendo mobile application */<br> var app = new kendo.mobile.Application(document.body);<br> </script><br></body><br></html>
Below is the viewModel file loginViewModel.js
var validator = $("#loginForm").kendoValidator().data("kendoValidator");<br><br>var loginViewModel = kendo.observable({<br> authserver: "",<br> username:"",<br> password:"",<br> getUserDetails: function(){<br> if(validator.validate()){<br> // alert("Server Address -- "+ this.get("authserver")+" User Name -- "+ this.get("username")+" User Password -- "+ this.get("password"));<br> <br> var dataSource = new kendo.data.DataSource({<br> transport:{<br> read:{<br> url: "http://127.0.0.1/api/index.php",<br> type: "POST",<br> dataType: "html",<br> <br> }<br> },<br> change: function(data){<br> alert("aaa"+dataSource.data);<br> alert(data);<br> },<br> error: function(xhr, error){<br> console.log(xhr);<br> console.log(error);<br> }<br> });<br> }else{<br> alert("Not valid");<br> }<br> <br> },<br> <br>}) ;
kendo.bind($("#loginForm"), loginViewModel);