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
Below is the viewModel file loginViewModel.js
kendo.bind($("#loginForm"), loginViewModel);
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);
3 Answers, 1 is accepted
0
Hi Karthik,
Petyo
Telerik
While possible, the DataSource component is not suitable for login/logout requests, since such activity does not involve multiple recordsets being transferred. I would like to recommend that you use regular $.ajax calls instead. After this, you can use the navigate method to move to another view.
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sung
Top achievements
Rank 1
Rank 1
answered on 11 Oct 2013, 05:52 AM
Hi Karthik!
I also have the same problem here.
I would like to create a simple login function using $.ajax but I've got error says: ""
OPTIONS http://sample.webservice.com/ServiceAuth/SignIn 405 (Method Not Allowed) -jquery.min.js:5
OPTIONS http://sample.webservice.com/ServiceAuth/SignIn Origin null is not allowed by Access-Control-Allow-Origin. -jquery.min.js:5
XMLHttpRequest cannot load http://sample.webservice.com/ServiceAuth/SignIn. Origin null is not allowed by Access-Control-Allow-Origin. -index.html:1
here is my code:
I also have the same problem here.
I would like to create a simple login function using $.ajax but I've got error says: ""
OPTIONS http://sample.webservice.com/ServiceAuth/SignIn 405 (Method Not Allowed) -jquery.min.js:5
OPTIONS http://sample.webservice.com/ServiceAuth/SignIn Origin null is not allowed by Access-Control-Allow-Origin. -jquery.min.js:5
XMLHttpRequest cannot load http://sample.webservice.com/ServiceAuth/SignIn. Origin null is not allowed by Access-Control-Allow-Origin. -index.html:1
here is my code:
var productArr = new Array('Product 1'); function signIn(){ $.ajax({ type: "POST", headers: 'Authorization: Base64("ASD:FGH")', data: { 'username': $("#username").val(), 'password': $("#password").val(), 'Product': {Product:productArr} }, dataType:'json', // Expected return data type... success: function(data) { // After retrieving the data from the server alert(data); closeModalView(); } }); closeModalView(); }0
Hi Karthik,
You problem falls outside of the scope of the standard support services offered by Kendo UI.
The standard support services - the ones included in the support package that goes with the controls, cover only the built-in functionality of the corresponding products. In case you need consultancy, best-practices advice or general assistance that is not directly related to the functionality of the Telerik control that you are using, I would suggest to check our Professional Services. More information on them is available in the linked page.
Please let me know if you are interested and a member of our Professional Services team will contact you shortly.
Regards,
Kiril Nikolov
Telerik
You problem falls outside of the scope of the standard support services offered by Kendo UI.
The standard support services - the ones included in the support package that goes with the controls, cover only the built-in functionality of the corresponding products. In case you need consultancy, best-practices advice or general assistance that is not directly related to the functionality of the Telerik control that you are using, I would suggest to check our Professional Services. More information on them is available in the linked page.
Please let me know if you are interested and a member of our Professional Services team will contact you shortly.
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!