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?

Answer 1

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

Answer 2

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