Hi everybody. Please assist me with this issue. I am trying to use preloader dynamically that it is when user click login to show preloader and ajax call background works when response is made from server I should be able to hide it.
This is what I have be doing so far but preloader is not working;
$$('#login').on('click', function (e) { //on click login button
//assign form value fields to variables
var email = $$('#email').val(); //get email field
var password = $$('#password').val(); //get password field
//validate email address is correct
if(email === ''){
app.toast.show({
text: 'Please enter email',
});
return false;
}
if(password === ''){
app.toast.show({
text: 'Please enter password',
});
return false;
}
// Show preloader before Ajax request
app.preloader.show();
if(email !== '' && password !== ''){
//make ajax call for authentication
app.request.post('localhost/auth', { email:email, password: password }, function (data) {
//after response from the server hide preloader
app.preloader.hide();
var response = JSON.parse(data);
if(response.success == true){
//redirect to dashboard
app.views.main.router.navigate({
name: 'dashboard',
params: { token: 1 },
});
}else{
//show error message using toast
app.toast.show({
text: response.error,
});
}
});
}
// Hide preloader when Ajax request completed
app.preloader.hide();
});