Javascript Function Call inside dropdown change event Error

Question

var TourItinerary = {  
    EXCURSIONS:{

    },
    init:function(){
        console.log('Initializing...');
        this.initializeElements();
    },       
    initializeElements:function(){
        console.log('init elements...');
        $("select[id^='start_city_']").change(function(){
            var day_id = $(this).attr('id').replace("start_city_","");
            getPossibleExcursions(day_id);
        });
    },    
    getPossibleExcursions: function(day_id){
        console.log('Day Id ='+day_id);
    }
};

how to call getPossibleExcursions(day_id) function inside dropdown change event?

It always shows:

Uncaught ReferenceError: getPossibleExcursions is not defined.

var self = this; at the start of the function, then self.getPossibleExcursions(day_id); — Niet the Dark Absol
– Niet the Dark Absol, Commented Mar 6, 2018 at 9:31
Thanks for the reply. Devesh now it shows Uncaught RangeError: Maximum call stack size exceeded — Chamara
– Chamara, Commented Mar 6, 2018 at 9:37
TourItinerary.getPossibleExcursions if you only need this to work “statically” ... — C3roe
– C3roe, Commented Mar 6, 2018 at 9:41
CBore thanks for the replay. But still get the same error. Uncaught RangeError: Maximum call stack size exceeded — Chamara
– Chamara, Commented Mar 6, 2018 at 9:43

Aneesh R S · Accepted Answer · 2018-03-06 09:57:00Z

You have to assign this to some variables for future reference. When you define change event, this refers the DOM object that you are going to add event, not the actual object. So assign this to some variables, say self and reuse it in the on change function.

Now you can use both self for referring the object and this for the DOM object

var TourItinerary = {  
    EXCURSIONS:{

    },
    init:function(){
        console.log('Initializing...');
        this.initializeElements();
    },       
    initializeElements:function(){
        console.log('init elements...');
        var self = this;
        $("select[id^='start_city_']").change(function(){
            var day_id = $(this).attr('id').replace("start_city_","");
            self.getPossibleExcursions(day_id);
            console.log("value = " + $(this).val());
        });
    },
    getPossibleExcursions: function(day_id){
        console.log('Day Id ='+day_id);
    }
};

$(document).ready(function(){
    TourItinerary.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="start_city_123">
   <option value="a">a</option>
   <option value="b">b</option>
   <option value="c">c</option>
   <option value="d">d</option>
   <option value="e">e</option>
</select>

Collectives™ on Stack Overflow

Javascript Function Call inside dropdown change event Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related