[jquery] This attribuut binnen succes function

[radem205]

Hey,

Via onderstaande methode probeer ik een switch button te maken (on en off).

PHP:

$('img').click(function(){
        
        alert($(this));
        var imgobject = ;
        $.ajax({
            url: 'inc/toggle.php',
            type: 'POST',
            data: ({id : 3}),
            dataType: 'text',
            success: function(msg,$(this)){
                     $(this).attr('src','images/icons.png');
            }
        });
    });
    
    
    <img src="images/" id="vacature-1" />
    <img src="images/" id="vacature-2" />
    <img src="images/" id="vacature-3" />
    <img src="images/" id="vacature-4" />

(Graag even het benodigde jquery bestand er bij denken)

Het probleem met bovenstaande code is, is dat het object $('this') niet gedefinieerd is binnen de functie "success".
Heeft iemand een idee hoe ik dit kan oplossen? (het script moet dynamisch zijn, aangezien het aantal images variabel is)

[radem205]

Edit: Vergeten de $(this) te verwijderen in de success functie.

En ik heb al veel gezocht maar ik heb niet veel kunnen vinden voor dit probleem

[HuHu]

De success-functie wordt in een andere scope uitgevoerd, waardoor de variabele this niet meer correct is. Op het moment dat je een afbeelding aanklikt is this de afbeelding. Het AJAX-request wordt uitgevoerd, maar AJAX is asynchroon. Dat betekend dat je browser niet wacht op een antwoord, maar gewoon verder gaan en het antwoord later wel een keer verwerkt middels de success-functie.

Op het moment dat je browser antwoord krijgt weet 'ie echter niet meer wat this betekend. Het is namelijk asynchroon, dus je had in de tussentijd best stiekem nog wat afbeeldingen aan kunnen klikken waarvoor ook de success-functie moet worden aangeroepen.

Het gebruik van this is dus niet mogelijk, maar je moet uit je msg op kunnen maken waar het antwoord van je server bij hoorde. Dus stuur bij je AJAX-request het ID van de afbeelding mee en laat je server die weer terug sturen in de response en dan weet je waar hij bij hoort.

[Verwijderd]

Je probleem is dat success een event handler is. In event handlers krijgt het keyword this automatisch een andere waarde. Eenvoudig op te lossen door de oude waarde even op te slaan in een variabele:

JavaScript:

$('img').click(function(){
    var imgobject = ; /* WTF ????? */ 
    var self = this; // Creeer referentie naar this
    $.ajax({
      /* ... */
      success: function(msg){
         self.attr('src','images/icons.png');
      }
   });
}); 

[Verwijderd]

HuHu schreef op dinsdag 26 mei 2009 @ 09:08:
Op het moment dat je browser antwoord krijgt weet 'ie echter niet meer wat this betekend. Het is namelijk asynchroon, dus je had in de tussentijd best stiekem nog wat afbeeldingen aan kunnen klikken waarvoor ook de success-functie moet worden aangeroepen.

Dit heeft vziw niets met de asynchroniteit van Ajax te maken maar met het feit dat een nieuwe functie declaratie een nieuwe scope (inclusief nieuwe this) creeert

[radem205]

Het werkt nu met de oplossing van Blues! Bedankt voor jullie reactie!

[HuHu]

Verwijderd schreef op dinsdag 26 mei 2009 @ 09:33:
[...]

Dit heeft vziw niets met de asynchroniteit van Ajax te maken maar met het feit dat een nieuwe functie declaratie een nieuwe scope (inclusief nieuwe this) creeert

Ik weet het niet precies, maar volgens mij impliceert het ene het andere. Omdat het asynchroon is kan er niet binnen dezelfde scope gewerkt worden (die wordt immers verlaten omdat de normale uitvoer doorgaat, want asynchroon). Dus voor de terugkerende response wordt dan inderdaad een nieuwe scope aangemaakt, inclusief een nieuwe this.

[Michali]

HuHu schreef op dinsdag 26 mei 2009 @ 09:57:
[...]

Ik weet het niet precies, maar volgens mij impliceert het ene het andere. Omdat het asynchroon is kan er niet binnen dezelfde scope gewerkt worden (die wordt immers verlaten omdat de normale uitvoer doorgaat, want asynchroon). Dus voor de terugkerende response wordt dan inderdaad een nieuwe scope aangemaakt, inclusief een nieuwe this.

De oude scope wordt wel als het ware samengevoegd met de nieuwe scope. De oude blijft dus wel bestaan en toegankelijk. Dat is het concept van een closure. this verwijst binnen de nieuwe scope alleen (meestal) naar iets anders dan in de oude.

[Bosmonster]

HuHu schreef op dinsdag 26 mei 2009 @ 09:57:
[...]

Ik weet het niet precies, maar volgens mij impliceert het ene het andere. Omdat het asynchroon is kan er niet binnen dezelfde scope gewerkt worden (die wordt immers verlaten omdat de normale uitvoer doorgaat, want asynchroon). Dus voor de terugkerende response wordt dan inderdaad een nieuwe scope aangemaakt, inclusief een nieuwe this.

jQuery behoudt de scope, alleen je this is natuurlijk niet altijd hetzelfde. jQuery maakt intensief gebruik van javascript closures voor het vergemakkelijken van dit soort zaken en heeft dus inderdaad niks met de asynchroniteit van AJAX te maken.