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);