Optimisation code ajax

Version imprimable

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:

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:

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.

15/01/2014, 16h33
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()).
15/01/2014, 16h43
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 :)

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:

1 2 3 <a href="page1.php" id="monsuperidunique" class="item">item1</a> <a href="page2.php" id="monsuperidunique1" class="item">item2</a> <a href="page3.php" id="monsuperidunique2" class="item">item3</a>
Et je n'ai plus qu'une seule fonction:
Code:

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 :)

16/01/2014, 10h18
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 :)