how to use javascript this keyword with change function

Question

I'm having a trouble using change function. I have a 2 different dropdowns attached to each other. When the first one is changes, the second one changes too. I did it using jquery ajax. But when i use ID's jquery can only work one time. So i did a research about javascript's this,parent and children keyword but i can't find the suitable way.

so my javascript is like below :

    <script>
           $(document).ready(function() {
            //  alert('js working');
            $(".catSelectedClass").change(function() {
                //  alert('i'm inside the function dude');
                function ustCat() {         
                    alert(this);
                    var mainCatID = $(this).val();
                    alert('mainCatID captured');
                    var id = $(this).parent().$(".catIDClass").val();
                    //  alert(id);
                    //  alert(mainCatID);
                    $.ajax({
                        type: "POST",
                        url: "panel/catGroupPost.php",
                        data: {id: id, mainCatID: mainCatID}
                    }).done(function(data) {
                        var responseData = data;

                        alert(responseData);
                        $('#subCat').html($(data));

                    });
                }
                ustCat();
            });
            $(".subCatClass").change(function() {

                function subCat() {
                    var mainCatID = $(this).val();
                    var id = $('#catID').val();

                    $.ajax({
                        type: "POST",
                        url: "panel/subCatPost.php",
                        data: {id: id, mainCatID: mainCatID}
                    }).done(function() {
                        alert('its done. its gone. Yes Mr.Frodo. Its all over now !!');
                    });
                }
                subCat();
            });
        });

    </script>

And this is how a fill dropdowns :

 while ($cat = mysql_fetch_array($cat_query)) {


$catTable.= '<label>' . $cat['name'] . '</label>';
$catTable.= '<div class="catContainer"><div id="catPost" class="catPostClass">';
$catTable.= '<input type="text" id="catID" class="catIDClass" value="' . $cat['id'] . '"><select id="catSelected" class="catSelectedClass" name="catSelected"><option value="0">Seçiniz...</option>' . catOption($cat['mainCatID']) . '</select></div>';
$kategoriTablosu.= '<div id="subCat"><select id="subCatID" class="SubCatClass"><option value="0">Seçiniz...</option>' . subCatOption($cat['mainCatID']) . '</select></div></div>';


}

My both functions:

  function catOption($id) {
$query = mysql_query("SELECT * FROM mainCats WHERE id=mainCatID") or die(mysql_error());
$arrCat = "";

while ($row = mysql_fetch_array($query)) {
    $arrCat .= '<option value="' . $row['mainCatID'] . '"';
    if ($row['id'] == $id) {
        $catSelected = 'selected="selected"';
    } else {
        $catSelected = "";
    }

    $arrCat .= '' . $catSelected . '>' . $row['name'] . '</option>';
}
return $arrCat;
 }

And :

    function subCatOption($subID) {

$subCat = mysql_query("SELECT * FROM mainCats WHERE mainCatID='$subID' ORDER BY id ") or die(mysql_error());
$subArrCat = "";

while ($row = mysql_fetch_array($subCat)) {
    $subArrCat .= '<option value="' . $row['mainCatID'] . '"';
    if ($row['mainCatID'] == $subID) {
        $catSelected = 'selected="selected"';
    } else {
        $catSelected = "";
    }

    $subArrCat .= '' . $catSelected . '>' . $row['name'] . '</option>';
}
return $subArrCat;
  }

Thanks for any help !

Answer 1

Several ways to do it.

You don't really need to define ustCat, you can just put the code inside the change function :

$(".catSelectedClass").change(function() {
    var mainCatID = $(this).val();
    ....
});

Or assign the parent before you call your inner function :

$(".catSelectedClass").change(function() {
    (function ustCat(self){
        var mainCatID = self.val();
        ......
    })($(this));
});

Or put the ustCat function elsewere and just pass it to the change handler :

function ustCat(){ var mainCatID = $(this).val(); ...... };
$(".catSelectedClass").change(ustCat);

Answer 2

You don't need the functions inside the change function. You can simply do:

$(".catSelectedClass").change(function () {
    //  alert('i'm inside the function dude');
    alert(this);
    var mainCatID = $(this).val();
    alert('mainCatID captured');
    var id = $(this).parent().$(".catIDClass").val();
    //  alert(id);
    //  alert(mainCatID);
    $.ajax({
        type: "POST",
        url: "panel/catGroupPost.php",
        data: {
            id: id,
            mainCatID: mainCatID
        }
    }).done(function (data) {
        var responseData = data;

        alert(responseData);
        $('#subCat').html($(data));

    });

});
$(".subCatClass").change(function () {
    var mainCatID = $(this).val();
    var id = $('#catID').val();

    $.ajax({
        type: "POST",
        url: "panel/subCatPost.php",
        data: {
            id: id,
            mainCatID: mainCatID
        }
    }).done(function () {
        alert('its done. its gone. Yes Mr.Frodo. Its all over now !!');
    });
});

The way you did it this was in the wrong scope. this would be window.

Answer 3

the problem is that you call a function in the event handler. If you instead put the code inside the event handler or you turn the function in the handler it should fix your problem. I suggest to make the function the event handler. So just put the ustCat on its own and use the following to make the function the handler

$(".catSelectedClass").change(ustCat);

Answer 4

You need to change your code as

$(".catSelectedClass").change(function() {
    var mainCatID = $(this).val();
    //Rest of code....
});

Instead of

$(".catSelectedClass").change(function() {
    //  alert('i'm inside the function dude');
    function ustCat() { 
        var mainCatID = $(this).val();
        //Rest of code....
    }
});

Same with $(".subCatClass").change(function() {

General Syntax

$(selector).change(function() {
  //do something
});

If you have already defined function use

$(selector).change(your_defined_function);      

in your case you can use

  $(".catSelectedClass").change(ustCat);