Hello,
Am getting my head around using the new V2 and the app.request() in place of $,post() and $.ajax().
At the moment I can do successful ajax requests and parse the response but the following are still pending.
- Show and hide the Indicator during the Ajax request.
- Route the screen to index page if Ajax successful.
- Stop execution if successful ajax response code. I have noticed the the on error event is executed despite a success response.
This is my code in the template:
<script>
return {
methods: {
signIn: function () {
var $ = this.$;
var app = this.$app;
var router = this.$router;
var username = $('input#username').val();
var password = $('input#password').val();
var postData = {"api_key" : 'A1234567',
"mydata" :
{
"username" : username,
"password" : password
}
};
//Show Indicator
app.preloader.show();
app.request({
url: 'https://example.com/',
method: 'POST',
dataType: 'json',
crossDomain: true,
data: postData,
success: function(data, textStatus ){
// We have received response and can hide activity indicator
app.preloader.hide();
console.log('Success');
console.log(data.STATUS_CODE);
if (data.STATUS_CODE == 1)
{
localStorage.setItem( 'my_data', JSON.stringify(data));
resolve(
{
componentUrl: './pages/index.html',
}
}
app.alert('Login was unsuccessful, please verify username and password and try again');
return;
},
error: function(xhr, textStatus, errorThrown){
// We have received response and can hide activity indicator
app.preloader.hide();
console.log('Fail');
console.log(xhr.response);
app.alert('Login was unsuccessful, please verify username and password and try again');
return;
}
//app.preloader.hide();
}
}
}
</script>