Hello, @nolimits4web, @Timo plus anyone else that can kindly help me…
steps to problem:
Tap Link->request data->resolve to component.->Form on component->(check if user entered somehing, else alert and warn them)-****PROBLEM LIES HERE, user will be taken back tonprevious page and then alert... to go back, you need to request again and go back to a reset form
I have a strange issue, after async route
, I resolve
a component with some context, I am trying to do validation before saving this form data but every time I check to alert
to remind user of something, the whole page takes me back, requests data again, and brings me back a fresh. I have also noticed that in case changes their mind and want to go back, on tapping back icon, it instead makes a new API request, loads the context and refreshes itself. I am confused as to why this is actually happening!
my route:
{
path: '/load-sign-up-form/:address/:lat/:lon/',
async: function(routeTo, routeFrom, resolve, reject) {
//router
var router = this;
//app
var app = router.app;
var lat = routeTo.params.lat;
var lon = routeTo.params.lon;
var address = routeTo.params.address;
app.progressbar.show('multi');
app.request({
url: apiurl + 'departments.php',
dataType: 'json',
method: "GET",
timeout: 5000,
crossDomain: true,
success: function (data) {
infiniteLoading = false;
app.progressbar.hide();
resolve(
{
componentUrl: './pages/sign-up-page.html',
},
{
context: {
departments: data,
lat: lat,
lon: lon,
address: address
},
}
);
},
error: function () {
infiniteLoading = false;
app.progressbar.hide();
NoInternetConnection();
reject();
}
});
},
},
And Now component:
<script>
return {
methods: {
isEmailValid: function(email){
//validate email
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
},
completeDoctorRegistration: function () {
var self = this;
var app = self.$app;
var $ = self.$;
var dob = $('input.dob').val();
var full_name = $('input.full_name').val();
var email_address = $('input.email').val();
var clinic_name = $('input.clinic_name').val();
var password = $('input.password').val();
var phonenumber = $('input.phonenumber').val();
var gender = $('select.gender').val();
var valid_from = $('input.valid_from').val();
var department = $('select.department').val();
var valid_to = $('input.valid_to').val();
var lat = $('input.lat').val();
var lon = $('input.lon').val();
var address = $('input.address').val();
....
else if(full_name.trim().indexOf(' ') <= -1)
{
app.dialog.alert('Enter Both Names Eg. John Doe');
}
.... several data validation...
else
{
app.router.navigate('/sign-up-now/'+full_name+'/'+email_address+'/'+password+'..../);
}
},
},
on: {
pageInit: function(e, page) {
var self = this;
var app = self.$app;
self.calendarModal = app.calendar.create({
inputEl: '#demo-calendar-modal',
openIn: 'customModal',
header: true,
footer: true,
dateFormat: 'MM dd yyyy',
});
self.calendarModal_two = app.calendar.create({
inputEl: '#demo-calendar-modal_from',
openIn: 'customModal',
header: true,
footer: true,
dateFormat: 'MM dd yyyy',
});
self.calendarModal_three = app.calendar.create({
inputEl: '#demo-calendar-modal_to',
openIn: 'customModal',
header: true,
footer: true,
dateFormat: 'MM dd yyyy',
});
},
pageBeforeRemove: function(e, page) {
var self = this;
self.calendarModal.destroy();
self.calendarModal_two.destroy();
self.calendarModal_three.destroy();
},
}
}
</script>
if say the user entered one name, it will take me back to previous page, alert and then stay there sometimes… I don’t why it is behaving like this?!
As seen in the gif shared, first click, reloads the page, second click alerts but takes me a step back… Kindly help…