[SOLVED] Routing not stable at component

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…

com-optimize|281x500

There should be some error in code, it can’t do such back/forward without a reason. Do you have live example upload somewhere of that app with the issue?

1 Like

Thanks @nolimits4web, since I had a deadline, I coped and edited some code from the core sample I use for testing since my app already has cordova plugins requiring a native environment, and I don’t like using emulators as I dont want Android studio on my PC for solely debugging, I rely on my phone and chrome USB debugging… It now works as expected but up to now, I don’t know what the issue was! For now, I will mark this as SOLVED because, this was extremely strange… Even now, I don’t really feel like my code is even different from how it actually was but it works…

1 Like