Discussion :

[zerros]

Bonjour,

je suis en train de m'auto former sur ajax et jquery et j'ai besoin d'aide pour arriver à automatiser mon code. Voilà, j'ai un menu avec des liens de ce type:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p><a href="#" id="monsuperidunique">item1</a></p>
<p><a href="#" id="monsuperidunique1">item2</a></p>
<p><a href="#" id="monsuperidunique2">item3</a></p>

Quand je clique sur un des liens je veux ouvrir la page demandée dans une div de la page principale, ce qui aura pour effet de ne pas reloader toute la page. Jusqu'ici, tout va bien. j'ai mis ceci dans mon code ajax:

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
$(document).ready(function() {
  // action sur le clique du lien item1
        $('#monsuperidunique').click(
                function() {
                        $.ajax({
                                url: "item1.php",
                                cache: false,
                                success:
                                        function(ret) {
                                                $("#main").html(ret);
                                },
                                statusCode: {
                                        404: function() {
                                                alert("page not found");
                                        }
                                }
                        });
                }
        );
});

Et j'ai répété ce bloc autant de fois que j'ai de page à ouvrir à partir du menu. Je voudrai savoir s'il est possible de rendre dynamique la partie "$('#monsuperidunique').click(" et "url: "item1.php"," pour passer ces valeurs en paramètre et donc n'avoir qu'une seule fonction pour toutes les pages.

parce que c'est bien pour le moment. Ca fonctionne, mais bon, ce n'est pas beau quoi ...

J'espère que vous pourrez m'aider.

[Bovino]

Tu as deux possibilités.
Soit donner une classe unique pour chaque lien et l'utiliser dans le sélecteur lié à .click().
Soit utiliser un conteneur global pour tes liens et utiliser la délégation d'événement.

Dans les deux cas, au lieu de mettre une ancre vide comme cible du lien, mets la page à appeler (pour pouvoir la récupérer pour l'appel AJAX) en inhibant le comportement par défaut du lien (event.preventDefault()).

[zerros]

euhhh, ok. je n'ai pas tout compris, mais ça me donne un début de piste.
Je vais aller me documenter un peu sur jquery par rapport à la délégation d’événements.

Mais surtout, si quelqu'un a une petit exemple à me filer, je suis preneur

[zerros]

Hello,

alors j'ai lu pas mal de chose depuis hier et j'ai la tête à l'envers
J'ai maintenant quelque chose de presque fonctionnel.

J'ai modifié mon menu de la sorte:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p><a href="page1.php" id="monsuperidunique" class="item">item1</a></p>
<p><a href="page2.php" id="monsuperidunique1" class="item">item2</a></p>
<p><a href="page3.php" id="monsuperidunique2" class="item">item3</a></p>

Et je n'ai plus qu'une seule fonction:

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
$('.item').click(function(event) {
    event.preventDefault();
    url = $(this).attr('href');
    alert(url);
    $.ajax({
        url: url,
        cache: false,
        success: function(ret) {
            $("#main").html(ret);
        },
        statusCode: {
            404: function() {
                alert("page not found");
            }
        }
    });
});

L'attribut href est bien récupéré par la fonction. Par contre, j'ai un double appel à la fonction quand je clique sur le lien. Le premier renvoi bien le bon href, et le second renvoi "undefined", et je ne comprends pas pourquoi. Une petite idée ?

Merci de votre aide

[zerros]

oupppssss. Je n'ai pas fait gaffe. J'avais déjà une autre balise qui utilise la même classe dans mon code. J'ai remplacé par "menuItem", et voilà. ça marche.

merci pour toutttttt