IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

portée de this dans un .load()


Sujet :

jQuery

  1. #1
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut portée de this dans un .load()
    Je me posais juste une question suite à un dépannage sur le chat :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('.foo').load('page'+$(this).attr('id')+'.php')
    ne fonctionne pas ..

    Suis-je vraiment obligé de décomposer en Amont pour recupérer une variable dans le load ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  2. #2
    Membre expérimenté Avatar de eckerdecker
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    134
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 134
    Par défaut
    Je ne saurai pas mettre les mots exacts mais ça me semble impératif oui, dans la mesure ou dans le cas suivant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $('.bar').click(function(){
      $('.foo').load('page'+$(this).attr('id')+'.php');
    });
    $(this) fait forcément référence au .bar cliqué.
    Dans ton cas, sans contexte, this n'est rien.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $('.foo').each(function(){
      $(this).load('page'+$(this).attr('id')+'.php');
    });
    Serait la bonne méthode.

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    le each semblerait vouloir dire qu'un eq(0) ferait le taff ... mais non
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    $('.foo:eq(0)').load('page'+$(this).attr('id')+'.php')
    //ou
    $('.foo').eq(0).load('page'+$(this).attr('id')+'.php')
    ça m'echappe
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre expérimenté Avatar de eckerdecker
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    134
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 134
    Par défaut
    Avec eq(0) la donne est différente, tu ne cible qu'un élément aussi tu es en mesure de savoir ce que tu veux et tu pourrais donc le faire ainsi :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('.foo:eq(0)').load('page'+$('.foo:eq(0)').attr('id')+'.php')
    Mais ce n'est pas le propos d'origine le problème, et je ne saurais pas comment l'expliquer, c'est que this ne vaut rien.

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    et je ne saurais pas comment l'expliquer, c'est que this ne vaut rien.
    C'est justement le propos de ma question ...

    pourquoi le $(this) n'as pas la portée à laquelle je m'attendais dans un load() ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    La méthode AJAX .load() n'est en fait qu'un raccourci de la méthode .ajax() avec des paramètres prédéfinis, lors de l'appel réel de la requête, la méthode (malgré sa syntaxe) ne s'applique pas à un élément jQuery, c'est une méthode globale
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Donc

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    me=$('.foo')
    me_id=me.attr('id')
    me.load('page'+me_id+'.php')
    est incontournable ...

    Merci Beef de cette explication...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Membre expérimenté Avatar de eckerdecker
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    134
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 134
    Par défaut
    Mais ... le principe s'applique à d'autres méthodes non ?

    Par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img id="logo" src="logo.gif" class="fast" alt="logo"/>
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#logo').fadeIn($(this).attr('class'));
    ne fonctionnera pas ... non ?
    De manière générale on ne peut pas utiliser $(this) pour se référer au sélecteur, me trompes-je ?

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    oui étant habitué à cette portée du this je m'étonnais qu'elle ne s'appliquât pas au load()
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #10
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par eckerdecker
    Mais ... le principe s'applique à d'autres méthodes non ?

    Par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img id="logo" src="logo.gif" class="fast" alt="logo"/>
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#logo').fadeIn($(this).attr('class'));
    ne fonctionnera pas ... non ?
    De manière générale on ne peut pas utiliser $(this) pour se référer au sélecteur, me trompes-je ?
    En règle générale, dans chaque méthode appelée sur une collection jQuery, il est possible d'utiliser this pour référencer l'élément DOM en cours et $(this) pour référencer l'élément jQuery en cours.
    Mais il existe certaines exceptions, dont celle soulevée par Spaffy.
    Dans l'exemple que tu donnes, il s'agit d'une animation, la fonction exécutée à la fin de celle-ci est de type callback (ou fonction de rappel), lors de son exécution, la boucle qui a servi à la lancer étant terminée, il n'y a donc plus de référence à l'élément qui l'a appelée, donc this n'est plus disponible (du moins, sa valeur n'est plus celle attendue).
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  11. #11
    Membre expérimenté Avatar de eckerdecker
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    134
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 134
    Par défaut
    Sauf qu'en l'occurence, bien que ça n'ait pas beaucoup de sens, je me réfère à la class de l'élément pour passer l'attribut duration (avec la valeur "fast"),
    j'ai fais un petit Fiddle, pour tester, et je n'obtiens pas grand chose : http://jsfiddle.net/tP5pK/3/

    Dans quel cas peut-on utiliser $(this) pour désigner le sélecteur en cours dans les paramètres mêmes d'une méthode appliquée à ce sélecteur (et pas dans un callback, là je sais qu'il n'y a pas de problème) ?

    Je suis curieux de voir comment je pourrais utiliser cette "portée" je me le suis toujours interdit pensant que ça ne donnait rien, mais d'après ce que vous dites il semblerait que cela soit possible.

  12. #12
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Un petit exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html>
    <head>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script>
    	$(function(){
    		// Fonctionne : dans la fonction anonyme, $(this) est l'élément en cours
    		$('#couleurs li').css('color', function(){
    			return $(this).attr('class');
    		});
    		// Ne fonctionne pas : dans le contexte des paramètres, $(this) est l'objet global
    		$('#couleurs li').css('color', $(this).attr('class'));
    	});
    	</script>
    </head>
    <body>
    	<ul id="couleurs">
    		<li class="yellow">Item</li>
    		<li class="blue">Item</li>
    		<li class="navy">Item</li>
    		<li class="green">Item</li>
    		<li class="red">Item</li>
    		<li class="aqua">Item</li>
    		<li class="gray">Item</li>
    	</ul>
    </body>
    </html>
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('p').each(function(idx,obj){$(obj).fadeIn($(obj).attr('speed')*1)});
    ou en jouant avec le class
    http://jsfiddle.net/tP5pK/6/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre expérimenté Avatar de eckerdecker
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    134
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 134
    Par défaut
    OK !

    Merci à vous deux, c'est donc bien ce qu'il me semblait : $(this).qqchose() directement en paramètre d'une méthode ne se réfère pas au sélecteur sur lequel on applique ladite méthode, on est bel et bien forcé de rentrer dans une fonction anonyme (ou pas) - que ce soit un callback, un handler ou autre chose -, dans la mesure ou la signature de la méthode le permet, pour que $(this) soit contextualisé sur ce sélecteur.

  15. #15
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui et c'est logique, quand tu passes this dans les paramètres d'une méthode, tu n'es pas encore dans le parcours de la collection en référence mais juste dans l'interprétation de la méthode qui sera appelée.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

Discussions similaires

  1. [Débutant] Borland C++ Builder : Portée du this, fonctions dans un formulaire, et espions
    Par otacon ghost dans le forum C++Builder
    Réponses: 3
    Dernier message: 20/07/2011, 15h32
  2. [Dojo] Portée de "this" dans une fonction
    Par Zineb1987_UNI dans le forum Bibliothèques & Frameworks
    Réponses: 8
    Dernier message: 21/12/2009, 17h08
  3. [Prototype] Portée de this dans une classe
    Par grunk dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 07/04/2009, 14h58
  4. [VB6] Probleme avec initialisation d'un Data ADO dans form Load
    Par angelevil dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 01/06/2006, 22h41
  5. Réponses: 5
    Dernier message: 12/03/2006, 14h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo