Utilisation de "this" dans les fonctions de jQuery

Question

J'ai créé un objet JS d'objet personnalisé CalendarViewerPortlet. Dans cet objet, je stocke des choses comme l'identifiant du portlet et son chemin de contexte. L'objet possède également de nombreuses méthodes personnalisées, certaines pour obtenir/définir les variables membres et d'autres pour faire des choses spécifiques.

Lorsque j'essaie de référencer une fonction de l'objet en utilisant "this". à l'intérieur d'une fonction jQuery, il explose. Je comprends que le terme «ceci» dans ce contexte fait probablement référence à quelque chose d'autre, mais je ne suis pas sûr de savoir comment contourner le problème et le faire référencer l'objet, comme je le veux.

Voici le code incriminé:

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..." 
    }); 
}, 

REMARQUE "this.getContextPath()". C'est là que le code échoue. J'essaie de référencer la fonction getContextPath() de mon objet personnalisé. Comment puis je faire ça?

Answer 1

Le problème est que le code this.getContextPath() est exécuté plus tard dans une fonction anonyme transmise comme option à la fonction ajax() Donc le 'ceci' (votre objet JS personnalisé) vous voulez ne sera pas disponible au moment de l'exécution de la méthode, vous pouvez l'enregistrer dans une variable et laisser la fonction 'fermeture' la référence. Ce qui suit devrait fonctionner:

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 2

essayer peut-être en utilisant jQuery(this)

il semble que je vous ai mal compris. Dans l'exemple donné, le contexte peut provoquer "this" se référer à l'objet jQuery. Essayez le tour suivant:

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

// bien, il fait référence à l'objet jQuery. c'est parce que vous n'utilisez pas indentation pour indiquer que le code est appelé dans onBeforeSend :(

Answer 3

Vous voulez que la méthode getContextPath() de quel objet?

Une recherche rapide sur Google montre que qu'il soit disponible Java, pas Javascript

Answer 4

Vous pouvez envoyer votre objet personnalisé comme cela dans l'autre fonction en utilisant call javascript
par exemple:

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

dans le corps

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

juste appel FirstFunc() dans l'événement et il va exécuter le SecondFunc() avec votre personnalisé cela.

Dans votre cas

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

espère que cela fonctionne

Answer 5

Astuce: Vous devriez vous familiariser avec la portée lexicales Javascript

Si vous avez la configuration ajax dans un autre objet alors vous pourriez essayer...

{ 
    //code 
    var ObjectSelf = this; 

    //refer to your object via ObjectSelf 

} 

Answer 6

Ceci est un problème de liaison. Lorsque vous appelez ceci à l'intérieur d'une méthode jQuery, il est généralement référencé vers l'élément DOM ou HTML sur lequel vous exécutez votre tâche.

Je recommanderais un lok à

jQuery.proxy()

qui résout vos problèmes.