how to pass $(this) variable into another function javascript

Question

I have a javascript function that is called when a button is pressed. This function calls another function with an ajax call. If/when this ajax is completed successfully, I would like the pressed button's class to change.

$(".followUser").click(function(){
    ...
    create_friendship(that.userId, that.friendId);
    ...
}
function create_friendship(user_id, friend_id){
  $.ajax({
    type: "POST",
    ...
    success: function(data, textStatus, jqXHR){
      variableForButtonHere.html("Request sent").removeClass("btn-default").addClass('btn-info');

So far, replacing variableForButtonHere with $(this) has not worked. I have put

      var mydata = $(this).data();
      window.alert(mydata.userId);

in both functions and in the first function it prints and in the second if prints undefined

I am assuming that $(this) must somehow be passed into the second function. How do I do this?

There's no way of passing $(this) other than by parameter. There's no way of passing this either, other than by parameter. — Luis Masuelli
– Luis Masuelli, Commented Apr 29, 2016 at 16:31
@LuisMasuelli I thought so too, but then learned that the value of this depends on how a function is called. So, you can set the value of this depending on how you call your function. An example could be how jQuery.proxy function utilises it to change the value of this. — Uzbekjon
– Uzbekjon, Commented Apr 29, 2016 at 16:37

Robin Malfait · Accepted Answer · 2016-04-29 16:31:22Z

4

You can do it quite easily like this:

$(".followUser").click(function(){
    ...
    create_friendship($(this), that.userId, that.friendId);
    ...
}
function create_friendship(button, user_id, friend_id){
  $.ajax({
    type: "POST",
    ...
    success: function(data, textStatus, jqXHR){
      button.html("Request sent").removeClass("btn-default").addClass('btn-info');

answered Apr 29, 2016 at 16:31

Robin Malfait

3304 silver badges6 bronze badges

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

1 Comment

Rorschach Over a year ago

You are quite right, I will accept this answer when SO allows me.

Uzbekjon · Accepted Answer · 2016-04-29 16:45:05Z

Option 1: Set context in your `$.ajax` call

$.ajax has an option that would allow you to set the value of this in the callback functions. It's context.

You can use it like this:

$(".followUser").click(function(){
    ...
    create_friendship(that.userId, that.friendId, this);
    ...
}
function create_friendship(user_id, friend_id, setThis){
  $.ajax({
    type: "POST",
    context: setThis,    // <=== HERE ===
    ...
    success: function(data, textStatus, jqXHR){
     // === Now, `this` will refer to your button element!
     $(this).html("Request sent").removeClass("btn-default").addClass('btn-info');

Option 2: jQuery.proxy() method

Use jQuery.proxy function to set the value of this in your method.

Option 3: Clean JavaScript method

Even better, you can use JavaScripts built in methods call and apply to set the value of this in your method calls.

$(".followUser").click(function(){
    ...
    create_friendship.call(this, that.userId, that.friendId);
    ...
}
function create_friendship(user_id, friend_id, setThis){
  // Here, you can either use `context: this,` option as in first method above
  // or set your variable like so:
  var button = $(this);

  $.ajax({
    type: "POST",
    ...
    success: function(data, textStatus, jqXHR){
     // === Now, `this` will refer to your button element!
     button.html("Request sent").removeClass("btn-default").addClass('btn-info');

Collectives™ on Stack Overflow

how to pass $(this) variable into another function javascript

2 Answers 2

1 Comment

Option 1: Set context in your `$.ajax` call

Option 2: jQuery.proxy() method

Option 3: Clean JavaScript method

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Option 1: Set context in your $.ajax call

Option 2: jQuery.proxy() method

Option 3: Clean JavaScript method

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Option 1: Set context in your `$.ajax` call