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>

Clauzzz · Accepted Answer · 2019-12-15 19:30:43Z

1

You have 2 options:

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");

    };

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).

answered Dec 15, 2019 at 19:30

Clauzzz

1295 bronze badges

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

1 Comment

mohammed alani Over a year ago

thanks it has worked ... in first option you meant that i dont need to pass parameter because i dont need use function ...and that is simplest and more performance option

DK Dhilip · Accepted Answer · 2019-12-15 19:18:16Z

0

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);
            }
        });
});

edited Dec 15, 2019 at 19:18

answered Dec 15, 2019 at 19:02

DK Dhilip

2,6441 gold badge10 silver badges17 bronze badges

2 Comments

mohammed alani Over a year ago

thanks for your contribution ... but it does not work

DK Dhilip Over a year ago

@محمدالعاني I just edited the code, please try again to see if it works for you.

Collectives™ on Stack Overflow

pass parameter inside jQuery Function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related