Problème d'ajax et jquery dans la version 1.8.1

Par lakamark, il y a 12 ans

Javascript

Bonjour
J'ai essayer d'adapter un tutoriel : Apprendre à faire du ajax avec cakephp
Moi je utilise la version 1.8.1 de jquery. Je suis aller voire la documentation à propos de la fonction .live et il faut que je la remplace par la fonction .on();

sur la documentation
$(document).on(events, selector, data, handler); // jQuery 1.7+
J'ai faite une petit code maison et j'ai deux problèmes

le 1er est qui ne récupère seulement le premier lien qui a la classe .ajax-datas. Dans mon cede source j'ai plusieurs lien qui on cette classe.

Voici le lien de la documentation :
http://api.jquery.com/live/
Voci le code source des deux liens en ajax :

<div class="conditions">
                    <h3>Politique d'information privé</h3>
                    <p><a href="/condition/1" class="ajax-datas">Lire</a></p>
                </div>
                            <div class="conditions">
                    <h3>Musique</h3>
                    <p><a href="/condition/2" class="ajax-datas">Lire</a></p>
                </div>
                    </div>

Dans mon app.js j'ai le code suivant : 

$('a.ajax-datas').on('click',function(){
        var url = $('a.ajax-datas').attr('href');
        $.ajax({
            type : "GET",
            url : url,
            sucess : function(data){
                $('#body-page').html(data);
            }
        });
        return false;
    });

4 réponses

antho07, il y a 12 ans

Bonjour, le problème se situe à cette ligne:

var url = $('a.ajax-datas').attr('href');

En effet, d'accord tu as cliqué sur le lien numéro 2 mais ici dans url tu refais ton sélecteur , du coup il reparcours le dom et le attr('href') doit être appliqué au premier élement trouvé, ce qu'il faut c'est récuprer le bon lien dans la fonction.

Comment faire??

La méthode click de jquery peut prendre en parametre l'évenement.

Dans cet évenement qui est un objet javascript il y a plein de truc et parmis ceux là un élement target qui lui contient les infos de la cible (l'élement cliqué)

Ainsi, essaye cela: 

$('a.ajax-datas').on('click',function(event){
        var url = event.target.href;
        $.ajax({
            type : "GET",
            url : url,
            sucess : function(data){
                $('#body-page').html(data);
            }
        });
        return false;
    });

bien cordialement

Antho

antho07, il y a 12 ans

On peut même faire ça:

$('a.ajax-datas').click(function(event){
        event.preventDefault(); //coupe le comportement par default, (ici le lien)
        var url = event.target.href;  
        $.ajax({
            type : "GET",
            url : url,
            sucess : function(data){
                $('#body-page').html(data);
            }
        });
    });

Pense aussi à traiter le cas ou ça plante, afficher une erreur en somme . 

$.ajax({
            type : "GET",
            url : url,
            sucess : function(data){
                $('#body-page').html(data);
            },
             error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            }
        });

Antho

Ps:j'ai pas fait attention à la version de Jquery pour le code que je viens de donner, à adapter si des choses ne passent pas.

lakamark, il y a 12 ans

Euuh la div #body-Page ne s'affiche pas.

antho07, il y a 12 ans

Bonjour,

en effet je n'avais pas fait attention,

Il y a une petite faute d'orthographe

$.ajax({
           type : "GET",
           url : url,
           success : function(data){
               $('#body-page').html(data);
           },
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
           alert("Status: " + textStatus); alert("Error: " + errorThrown); 
           }
       });

success avec 2 c

bien cordialement

antho