send same event to different functions in angular2

Question

I have a search form in my homepage that has input box and select dropdown. The user can search other users either by typing the location or by html5 geolocation. So when user visits the page for first time, it asks user if they let app know their location. If they agree, then latitude longitude and selected option from dropdown is taken and run database query. However I am not sure if my following attempt is the way it should be. Since I also want to bind the select when user searches with or without geolocation. My select input is

<div class="input-group-btn">
  <select class="btn btn-danger btn-lg" style="border-radius: 0px;" bindon-ngModel="btype" on-ngModelChange="search($event)" on-ngModelChange="successPosition($event)" name="btype" >
      <option *ngFor="let btype of bloodtypes" [value]="btype">{{btype}}</option>
  </select>
</div>

My geolocation function inside the angular2 component looks like this

geolocation: function(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(this.successPosition,
            this.failurePosition, { 
                                    enableHighAccuracy: true, 
                                    timeout:3000,
                                    maximumAge: 4000 });
    }
    else{
        return(false);
    }
},
successPosition: function(position){
    if(position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    }else{
        self.btype = position;
    }
    window.location.replace("/users?utf8=✓&longitude=" + 
         encodeURIComponent(self.longitude) + "&latitude=" + 
         encodeURIComponent(self.latitude) + "&btype=" + 
         encodeURIComponent(self.btype));
    },

but when successPosition() recieves the parameter I cannot assign latitude, longitude and btype at the same time. If I assign latitude and longitude, btype is undefined and vice versa. Please tell me is this how should I do or there is another method?

could you just send the event to a single function. Then have that function call other functions? — LLai
– LLai, Commented Aug 24, 2017 at 2:21
if I send event to single function then I also need to send position object to get latitude and longitude. I need to form url from latitude longitude and btype — Rabin Poudyal
– Rabin Poudyal, Commented Aug 24, 2017 at 2:32

Sonicd300 · Accepted Answer · 2017-08-24 02:28:22Z

0

is this what you're looking for:

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

edited Aug 24, 2017 at 2:28

answered Aug 24, 2017 at 2:15

Sonicd300

2,0591 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rabin Poudyal Over a year ago

kind of but the problem here is if, if condition fails then only self.btype gets assigned and self.latitude and self.longitude becomes undefined. :(

Sonicd300 Over a year ago

check the updated function, if position.coords on fail is set anyways but lat lng are undefined, then you have to do something like position.coords.hasOwnProperty('latitude') in the ternary operator's condition

Rabin Poudyal Over a year ago

in that 'something else' part I want to retrive the old value of self.latitude and self.longitude can you format the code please.

Sonicd300 Over a year ago

then just change 'something else' for self.latitude/longitude respectively, as im assuming you have self in a global scope, therefore old values are available in self. Please confirm to edit the answer :D

Sonicd300 Over a year ago

Wait, but first time self.latitude self.longitude would be undefined if it fails, you dont have previous value, grouping these in the if was the right answer no need for a ternary operator.

|

mayorsanmayor · Accepted Answer · 2017-08-24 13:48:04Z

Adding to the answer by Sonicd300 above, the problem is actually with your if-else block in the successPosition function. In the answer above he's providing you with an option to rewrite the function by providing a tenary operator, read more about it here - Javascript one line If...else...else if statement

You can rewrite this -

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

By writing this and assigning a default longitude and latitude in case not provided by the user on page load.

successPosition: function(position) {
    self.btype = position;
    if (position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    } else {
    self.latitude = 'assign some default latitude'; // you should never assume that this will always be provided by the user on page load
    self.longitude = 'assign some default longitute'
}
window.location.replace("/users?utf8=✓&longitude=" + 
     encodeURIComponent(self.longitude) + "&latitude=" + 
     encodeURIComponent(self.latitude) + "&btype=" + 
     encodeURIComponent(self.btype));
}

Collectives™ on Stack Overflow

send same event to different functions in angular2

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related