pass parameter inside jQuery Function

Question

I want to pass "this" to "success" function i have tried to put "this" keyword as parameter inside brackets of success function..how to pass this key word inside success function? ... but it did not work...may be my english language not good ..sorry for that.

<script>
        $(document).ready(function () {
            $(".join").click(
                function () {
                    if ($(this).text() == "join")
                    {
                        var FollowOptions = {};
                        @*FollowOptions.url = "/@CultureInfo.CurrentCulture.Name/Communities/Follow/";*@
                        FollowOptions.url = "/@CultureInfo.CurrentCulture.Name/Groups/Join/";
                        FollowOptions.data = { id: $(this).attr("name") };
                        FollowOptions.success = function (this) {
                            $(this).prop("text", "leave");
                            $(this).removeClass("btn btn-info");
                            $(this).addClass("btn btn-danger");

                        };
              $.ajax(FollowOptions);
                    }
                    else
                    {
                        var FollowOptions = {};
                        FollowOptions.url = "/@CultureInfo.CurrentCulture.Name/Groups/UnJoin/";
                        FollowOptions.data = { id: $(this).attr("name") };
                        FollowOptions.success = function (this) {
                            $(this).prop("text", "join");
                            $(this).removeClass("btn btn-danger");
                            $(this).addClass("btn btn-info");
                           };
                        $.ajax(FollowOptions);
                    }
                });
        });
</script>

Answer 1

You have 2 options:

1. Make the function a fat arrow function. It will not create its own "this".

       FollowOptions.success = ()=> {
           $(this).text("إلغاء الإنصمام");
           $(this).removeClass("btn btn-info");
           $(this).addClass("btn btn-danger");
   
       };
   

2. Bind the this to the normal function

       FollowOptions.success = function () {
           $(this).text("إلغاء الإنصمام");
           $(this).removeClass("btn btn-info");
           $(this).addClass("btn btn-danger");
   
       }.bind(this);
   

I recommend the first option as its much cleaner ('bind' creates a new function, and if you get used to using it you might have troubles when you deal with eventlisteners and such, when you would try to remove the eventlistener).

Answer 2

You may try the following code:

$(document).ready(function () {
    $(".join").click(
        function () {
            var that = this;

            if ($(that).text() == "إنضمام")
            {
                var FollowOptions = {};
                @*FollowOptions.url = "/@CultureInfo.CurrentCulture.Name/Communities/Follow/";*@
                FollowOptions.url = "/@CultureInfo.CurrentCulture.Name/Groups/Join/";
                FollowOptions.data = { id: $(that).attr("name") };
                FollowOptions.success = function () {
                    $(that).text("إلغاء الإنصمام");
                    $(that).removeClass("btn btn-info");
                    $(that).addClass("btn btn-danger");

                };
                $.ajax(FollowOptions);
            }
            else
            {
                var FollowOptions = {};
                FollowOptions.url = "/@CultureInfo.CurrentCulture.Name/Groups/UnJoin/";
                FollowOptions.data = { id: $(that).attr("name") };
                FollowOptions.success = function () {
                    $(that).text("إنضمام");
                    $(that).removeClass("btn btn-danger");
                    $(that).addClass("btn btn-info");
                    };
                $.ajax(FollowOptions);
            }
        });
});