CODEWITHSUNDEEP
javascriptjquery
Milano
Milano

Reputation: 18745

JQuery converting anonymous function to named function doesn't works correctly

I have a js file with one $(document).ready.. block. Since there are many anonymous functions inside this block, I've decided to move them and create functions. The problem is that when I've changed anonymous function to function, js stopped working properly.

In this case, I'm trying to create a destination_from_0_changed function to avoid anonymous.

For example:

BEFORE (works)

$(document).ready(function () {
    var destination_from_0 = $("#id_form-0-destination_from");
    var destination_to_0 = $('#id_form-0-destination_to');
    destination_from_0.on('change', function () {
        var destination_id = $(this).val();
        if (destination_id==''){
            return;
        }
        var ajax_loading_image = $('#ajax-loading-image');
        destination_to_0.empty();
        ajax_loading_image.show();
        $.ajax({
            url: '/ajax/get-destination-to-options/' + destination_id + '/',
            success: function (data) {
                ajax_loading_image.hide();
                destination_to_0.append('<option value="" selected="selected">'+"---------" + '</option>');
                $.each(data, function (key, value) {
                    destination_to_0.append('<option value="' + key + '">' + value + '</option>');
                });
                destination_to_0.change();
            }
        })
    });

NOW: (doesn't work)

$(document).ready(function () {
    var destination_from_0 = $("#id_form-0-destination_from");
    var destination_to_0 = $('#id_form-0-destination_to');
    destination_from_0.on('change', function(){
        destination_from_0_changed(destination_to_0);
    });

function destination_from_0_changed(destination_to_0){
    var destination_id = $(this).val();
        if (destination_id==''){
            return;
        }
        var ajax_loading_image = $('#ajax-loading-image');
        destination_to_0.empty();
        ajax_loading_image.show();
        $.ajax({
            url: '/ajax/get-destination-to-options/' + destination_id + '/',
            success: function (data) {
                ajax_loading_image.hide();
                destination_to_0.append('<option value="" selected="selected">'+"---------" + '</option>');
                $.each(data, function (key, value) {
                    destination_to_0.append('<option value="' + key + '">' + value + '</option>');
                });
                destination_to_0.change();
            }
        })
}

Do you guys know where the problem is?

Upvotes: 2

Views: 99

Answers (2)

Jaromanda X
Jaromanda X

Reputation: 1

if you want to get rid of the anonymous function altogether, you can change the code to

destination_from_0.on('change', destination_from_0_changed.bind(destination_from_0, destination_to_0));

Upvotes: 0

Satpal
Satpal

Reputation: 133453

Problem with you implementation is that current element context this doesn't refers to the element which invoked the event.

You can use bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Code

destination_from_0.on('change', function(){
    destination_from_0_changed.bind(this)(destination_to_0);
});

OR, You can use .call()

The call() method calls a function with a given this value and arguments provided individually.

destination_from_0.on('change', function(){
    destination_from_0_changed.call(this, destination_to_0);
});

Upvotes: 6

Related Questions