Using "this" inside of jQuery functions

Question

I have created a CalendarViewerPortlet custom object JS object. In this object, I am storing things like the portlet's id and its context path. The object also has many custom methods, some to get/set the member variables and some to do specific things.

When I try to reference a function of the object using "this." inside of a jQuery function, it blows up. I get that the term "this" in that context is probably referring to something else, but I am not sure how to get around the problem and have it reference the object, as I want it to.

Here is the offending code:

jQuery.ajax({
  url: jQuery(formSel).attr("action"), 
  type: "POST", 
  data: jQuery(formSel).serialize(), 
  beforeSend: function(xhr) {
  jQuery(msgSel).hide();
  jQuery(msgSel).html("");
  jQuery(tableSel).hide();
  jQuery(pagerSel).hide();
  jQuery(cpSelector).block({
  message: "<img src='"+this.getContextPath()+"/images/icon_loading.gif' align='absmiddle' alt='Loading...' /> Fetching events..."
  });
},

NOTE the "this.getContextPath()". That is where the code is failing. I am trying to reference the getContextPath() function of my custom object. How can I do that?

Answer 1

maybe try using jQuery(this)

it seems I've misunderstood you. In the given example, the context may cause "this" refer to jQuery object. Try the following trick:

function myCode() {
 var th = this;
 $.ajax( ... , th.getContextPath() ... );
}

// well, it DOES refer jQuery object. it's because you don't use indentation to point that the code is called in onBeforeSend :(

Answer 2

You want the getContextPath() method from which object?

A quick Google search only shows it to be available to Java, not Javascript.

Answer 3

The problem is the code this.getContextPath() is executed later in an anonymous function passed as on option to ajax() function. So the 'this'(your custom JS object) you want will not be available at the point of the execution of the method. You can store it in a variable and let the function 'closure' the reference. The following should work:

var calendarViewer = this;

jQuery.ajax({
  url: jQuery(formSel).attr("action"), 
  type: "POST", 
  data: jQuery(formSel).serialize(), 
  beforeSend: function(xhr) {
  jQuery(msgSel).hide();
  jQuery(msgSel).html("");
  jQuery(tableSel).hide();
  jQuery(pagerSel).hide();
  jQuery(cpSelector).block({
  message: "<img src='"+calendarViewer.getContextPath()+"/images/icon_loading.gif' align='absmiddle' alt='Loading...' /> Fetching events..."
  });
},

Answer 4

You can send your custom object as this in the other function by using call in javascript
eg:

function SecondFunc() {
    alert(this.MyVar);
}
function FirstFunc() {
    var obj = {MyVar:"Test"}
    SecondFunc.call(obj);
}

in body

<input type="button" onclick="FirstFunc()" value="test" />

just call FirstFunc() in the event and it will execute the SecondFunc() with your custom this.

In your case

function raiseSendRequest()
{
sendRequest.call(YourCustomObject);
}

function sendRequest()
{

jQuery.ajax({
  url: jQuery(formSel).attr("action"), 
  type: "POST", 
  data: jQuery(formSel).serialize(), 
  beforeSend: function(xhr) {
  jQuery(msgSel).hide();
  jQuery(msgSel).html("");
  jQuery(tableSel).hide();
  jQuery(pagerSel).hide();
  jQuery(cpSelector).block({
  message: "<img src='"+this.getContextPath()+"/images/icon_loading.gif' align='absmiddle' alt='Loading...' /> Fetching events..."
  });
}

Hope this works

Answer 5

Tip: You should get familiarized with Lexical Scoping in Javascript

If you have the ajax setup inside another object then you could try...

{
  //code
  var ObjectSelf = this;

  //refer to your object via ObjectSelf

}

Answer 6

This is a binding problem. When you call this inside a jQuery method it is usually referenced to the DOM- or HTML-Element you are performing your task on.

I would recomend a lok at

jQuery.proxy()

which solves your problems.