[SOLVED] ComponentUrl With Context Not Being Rendered


#1

I have a problem rendering my components (v3 Latest release).

Here is 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 place_name = routeTo.params.address;
    var lat = routeTo.params.lat;
    var lon = routeTo.params.lon;

        resolve(
          {
            componentUrl: './pages/sign-up-page.html'
          },
          {
            context: {
              address: place_name,
              lat: lat,
              lon: lon
            }
          }
        );
    }
  },`

And On my sign-up-page.html component: I have

My DOM7 is rendered referred to as $$

`
return {
data: function () {
return {
departments: null,
API_URL = ‘https://api.website.com/’,
}
},
methods: {
//validate email
isEmail: function(email) {
var regex = /^([a-zA-Z0-9_.±])[email protected](([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
},

            //register
            signUp: function () {
              var self = this;
              var app = self.$app;
              var $ = self.$$;
              var router = app.router;

              var full_name     = $('input#full_name').val(); 
              var email_address = $('input#email').val();
              var password      = $('input#password').val();
              var dob           = $('input#dob').val();
              var clinic_name   = $('input#clinic_name').val();
              var phonenumber   = $('input#phonenumber').val();
              var department    = $('select#department').val();
              var gender        = $('select#gender').val();
              var valid_from    = $('input#valid_from').val();
              var valid_to      = $('input#valid_to').val();
              var lat           = $('input#lat').val();
              var lon           = $('input#lon').val();
              var address       = $('input#address').val();



                  //validate now
                 if(//Validate data here...)
                  }
                  else
                  {
                    router.navigate('/sign-up-now/'+full_name+'/'+email_address+'/'+password+'/'+dob+'/'+valid_from+'/'+valid_to+'/'+phonenumber+'/'+gender+'/'+clinic_name+'/'+department+'/'+lat+'/'+lon+'/'+address);
                  }
            },

            //Native Toasts
          showToast: function(text,duration,position,opacity,backgroundColor) {

              window.plugins.toast.showWithOptions(
                {
                  message: text,
                  duration: duration,
                  position: position,
                  styling: {
                    opacity: opacity,
                    backgroundColor: backgroundColor, 
                    textColor: '#FFFFFF',
                    cornerRadius: 0
                  }
                }
              );

            },

          noConnection: function() {
                var self = this;
          
                var message = 'Error, Poor Internet Connection!';
                var stayFor = '5000';
                var position_at = 'center';
                var opacity = '0.8';
                var backgroundColor = '#333333';

                self.showToast(message,stayFor,position_at,opacity,backgroundColor);
            }
      },
      // Page Events
      on: {
            pageInit: function(e, page) {

              var self = this;
              var app = self.$app;
              var $ = self.$$;
              var router = app.router;
              
              // Calender dob
              self.calendarModal1 = app.calendar.create({
                inputEl: '#my-calendar-default',
                openIn: 'customModal',
                header: true,
                footer: true,
                dateFormat: 'MM dd yyyy',
              });

              // Calender valid from
              self.calendarModal2 = app.calendar.create({
                inputEl: '#my-calendar-valid-from',
                openIn: 'customModal',
                header: true,
                footer: true,
                dateFormat: 'MM dd yyyy',
              });

              // Calender valid to
              self.calendarModal3 = app.calendar.create({
                inputEl: '#my-calendar-valid-to',
                openIn: 'customModal',
                header: true,
                footer: true,
                dateFormat: 'MM dd yyyy',
              });

             self.numpadLimited = app.keypad.create({
                  inputEl: '#demo-numpad-limited',
                  valueMaxLength: 10,
                  dotButton: false
            });
            
              
              //Load depts
              app.dialog.preloader("Preparing, Please Wait...");

                app.request({
                    url: self.API_URL + 'departments.php',
                    dataType: 'json',
                    method: 'GET',
                    cache: true,
                    timeout: 5000,
                    crossDomain: true,
                success: function(data) {
                  app.dialog.close();
                  
                    self.$setState({
                      departments: data,
                    });
                },
                error: function() {
                  app.dialog.close();

                  self.noConnection();
                  
                  router.back(); 
                }
                });
            }
    },
    pageBeforeRemove() {
        var self = this;

        self.calendarModal1.destroy();
        self.calendarModal2.destroy();
        self.calendarModal3.destroy();
      },
  }
</script>`

My sign up button:

<button class="col button button-big button-fill color-red" @click="signUp">PROCEED AND REGISTER</button>

Here Is how i render what I I get from API

<li> {{#if departments}} <!-- Show dept list when it is loaded --> <a class="item-link smart-select smart-select-init" data-open-in="sheet"> <select id="department" required> <option value="" selected>None Selected</option> {{#each departments}} <option value="{{dept_id}}">{{dept_name}}</option> {{/each}} </select> <div class="item-content"> <div class="item-inner"> <div class="item-title">DEPARTMENT</div> </div> </div> </a> {{else}} <!-- Otherwise show preloader --> <div class="block block-strong text-align-center"> <div class="preloader"></div> </div> {{/if}} </li>

My context like this:

      `<input type="hidden" id="lat" value={{lat}}>
       <input type="hidden" id="lon" value={{lon}}>
        <input type="hidden" id="address" value={{address}}>`

departments is an array like:

{dept_id:1, dept_name: somename},{dept_id:1, dept_name: somename}....

It cant show nothing…


#2

Also, on my component page, i use <template></template> tags. I simply dont know what am doing wrong.

  {
"dept_id": "46",
"dept_name": "Fevers",
"description": "Malaria, Typhoids And All Fevers"
},
  {
"dept_id": "45",
"dept_name": "Cancer",
"description": "All Cancers"
},
  {
"dept_id": "44",
"dept_name": "ENT",
"description": "Ear, Nose And Throat"
}

There is my sample response… from the API on pageinit().
v3.4.0 core.

This my firsr time doing components. So…@nolimits4web


#3

Could it be because I am using cordova plugins? They workwell in my general app.js.

Could it be because I am not sure how to redirect like app.router.navigate('/path/') on the component?

is it because of my $ = this.$$;, I declared my DOM7 like that…

I have several plugins installed, no emulator because I use PGB… I simply would like to know where I am making errors from, When I put a kitchen sink calender example, it worked well. Also, my API data was well passed to the calender testing page. As to why it is not working now, I surely dont know…


#4

Put a / to the end of your path definition…


#5

@hibernata, thanks but this has nothing to do with routing… Anyother content on that page is rendered except on when I put this that I have shared.


#6

Problem Solved! I downloaded Kitchen Sink and checked the console, turns out it was one stupid ‘false’ method I was referencing somewhere and it didnt exist. I couldn’t read the console from my PC since I have several native plugins already, using kitchen sink as debugger will save your day.

I mark this as solved. Thanks a lot…

This framework is extremely awesome!..