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

AJAX Discussion :

[AJAX] Charger du contenu dans un élément cliqué


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Juin 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2013
    Messages : 3
    Par défaut [AJAX] Charger du contenu dans un élément cliqué
    Bonjour,
    Je découvre le javascript et je suis confronté à un problème simple qui dépasse néanmoins mes compétences. Je souhaite inclure le script suivant sur un site afin de charger dynamiquement du contenu dans une nouvelle page. Ce script fonctionne mais au lieu de charger le contenu dans un élément déterminé "en dur" j'aimerais récupérer l'id de l'élément cliqué précédemment pour y inclure les nouvelles données.

    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    $(function() {
     
        if(Modernizr.history){
     
        var newHash      = "",
            $mainContent = $("#main-content"),
            $pageWrap    = $("#page-wrap"),
            baseHeight   = 0,
            $el;
     
        $pageWrap.height($pageWrap.height());
        baseHeight = $pageWrap.height() - $mainContent.height();
     
        $("nav").delegate("a", "click", function() {
            _link = $(this).attr("href");
            history.pushState(null, null, _link);
            loadContent(_link);
            return false;
        });
     
        function loadContent(href){
            $mainContent
                    .find("#guts")
                    .fadeOut(200, function() {
                        $mainContent.hide().load(href + " #guts", function() {
                            $mainContent.fadeIn(200, function() {
                                $pageWrap.animate({
                                    height: baseHeight + $mainContent.height() + "px"
                                });
                            });
                            $("nav a").removeClass("current");
                            console.log(href);
                            $("nav a[href$="+href+"]").addClass("current");
                        });
                    });
        }
     
        $(window).bind('popstate', function(){
           _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
           loadContent(_link);
        });
     
    } // otherwise, history is not supported, so nothing fancy here.
     
     
    });
    J'ai tenté, sans succès, de compiler le script précédant avec le suivant pour remplacer #guts par l'id de l'élément cliqué.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     $("#a").click(function() {
        var id = this.id;
    });
    Sauriez-vous m'éclairer ?
    Merci !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Bonjour,
    tu n'as qu'à passer en paramètre à la fonction loadContent l'objet cliqué, ou son ID.

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Juin 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2013
    Messages : 3
    Par défaut
    Désolé, je ne capte pas vraiment…

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    j'aimerais récupérer l'id de l'élément cliqué précédemment...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    $(function(){
      $("nav").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link, this); // on passe l'objet cliqué en paramètre à la fonction
        return false;
      });
    })
    et dans la fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function loadContent(href, objet){
      var objetClique = objet;
      // la suite de la fonction
    }
    tu pourrais, d'ailleurs, ne passer que l'élément en paramètre, puis dans la fonction récupérer ce qui le concerne, href...

  5. #5
    Candidat au Club
    Profil pro
    Inscrit en
    Juin 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2013
    Messages : 3
    Par défaut
    Merci pour cette réponse ; je vais essayer d'y voir plus clair avec ce code.

Discussions similaires

  1. Réponses: 2
    Dernier message: 13/05/2009, 09h19
  2. [AJAX] Changement de contenu dans un div
    Par VanFanel dans le forum AJAX
    Réponses: 3
    Dernier message: 11/05/2009, 17h41
  3. [AJAX] Changement de contenu dans une div.
    Par tinoudu01 dans le forum AJAX
    Réponses: 10
    Dernier message: 01/05/2009, 12h22
  4. [AJAX] Charger une photo dans un div
    Par chelguera dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 23/10/2007, 18h18
  5. [AJAX] Charger une page dans un div
    Par pcdj dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/07/2007, 20h15

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