11486 sujets

JavaScript, DOM et API Web HTML5

Ciblage et récupération du data d'un élément (jQuery + Ajax)

Bonjour,

Je cherche à créer une page inbox/outbox avec un cadre statique et une partie seulement de la page rechargée grâce à Ajax.

L'idée est de cliquer sur le lien "inbox" pour afficher la boîte de réception et "outbox" pour la boîte d'envoi pour changer l'affichage sans recharger la page.

Le code, encore en WIP, inspiré d'un tuto trouvé sur le net : 


    <div>
        <ul>
            <li><a href="{{ url('mail_received', {pseudo : "alexp"}) }}" class="mail" data-mail="received"><i class="fa fa-arrow-left" aria-hidden="true"></i>Messages reçus</a></li>
            <li><a href="{{ url('mail_sent', {pseudo : "alexp"}) }}" class="mail" data-mail="sent"><i class="fa fa-arrow-right" aria-hidden="true"></i>Messages envoyés</a></li>
        </ul>

    </div>
    <div class="mail content">
        <!-- Utiliser Ajax pour faire apparaître la rubrique de la boîte mail demandée : inbox, outbox ... -->
    </div>




function onLoadMails()
{
    var link;
    link = $(this); // lien sur lequel le clic est effectué
    var direction = link.data('mail'); // box indique si on veut le "sent" ou le "received"
}

$(function()
{
    $('.mail').on('click', onLoadMails());
});


Donc, normalement, l'idée c'est :
1) je clique sur un des 2 liens,
2) j'arrive dans la fonction onLoadMails,
3) je récupère dans la variable "direction" "sent" ou "received",
4) ... on verra plus tard

Actuellement :
- dès que j'arrive sur la page la fonction onLoadMails est chargée (j'ai mis un window.alert au début de la fonction pour le vérifier),
- quand je clique sur un des 2 liens, je ré-entre dans la fonction onLoadMails mais direction est undefined.

Quelqu'un pourrait m'aider à comprendre l'origine de ces 2 problèmes ?
Merci d'avance.

Alexandre

P.S : la syntaxe des URL est liée à l'utilisation de Silex et de twig.
Modifié par AlexP (18 Jul 2017 - 17:09)
Bonjour,

Le $(this) ne pointe plus sur l'élément cliqué, il faut donc lui passer en paramètre de ta fonction
Je verrai plutôt un truc du genre :
function onLoadMails(direction) {
  console.info(direction)
}
$(function(){
  $('.mail[data-mail]').on('click', function(e){
    e.preventDefault()
    onLoadMails($(this).data('mail'))
  })
})

ou à la rigueur :
function onLoadMails($el) {
  var direction = $el.data('mail')
  console.info(direction)
}
$(function(){
  $('.mail[data-mail]').on('click', function(e){
    e.preventDefault()
    onLoadMails($(this))
  })
})

Exemple
NB : ta class mail est également sur ta div content, normal ?
Modifié par SolidSnake (20 Jul 2017 - 08:10)
Modérateur
Le this peut très bien fonctionner, le problème c'est l'appel:


$('.mail').on('click', onLoadMails());

Ici tu executes onLoadMails et passe le retour (NULL) en tant que paramètre de callback.
Ce qui fait qu'elle est exécutée au chargement de page alors qu'elle ne devrait être exécutée qu'au click.

Pour utiliser une fonction nommée comme callback il ne faut pas mettre les parenthèses:


$('.mail').on('click', onLoadMails);


p.s. Le code de SolidSnake est tout autant fonctionnel et même plus propre que ton code.
Modifié par kustolovic (20 Jul 2017 - 09:18)
Merci pour les réponses.
Je m'attendais à recevoir une notification donc je n'étais pas re-passé plus tôt.

J'ais essayé la méthode de SolidSnake.

SolidSnake a écrit :
NB : ta class mail est également sur ta div content, normal ?

J'ai mis une class pour cibler l'endroit où je ferai l'affichage, je vais changer en "display".

Par contre, j'ai essayé les 2 méthodes, et je n'obtiens rien dans la console alors que je ne vois aucune différence entre mon HTML et celui du codepen et entre mon JS et celui proposé, dans les 2 cas.
Modifié par AlexP (25 Jul 2017 - 16:31)
Pour le moment dans le js je n'ai laissé que ça : 


function onLoadMails(direction)
{
    console.log("test");
    console.info(direction);
}

$(function()
{
        $('.mail[data-mail]').on('click', function(e){
            e.preventDefault();
            onLoadMails($(this).data('mail'));
    });


Le fichier .twig avec le HTML de la page : 


{% extends 'layout.twig' %}
{%  block title %}Boîte de réception{% endblock %}
{%  block content %}

    <ul>
    <li><a href="{{ url('ownpage_root', {pseudo : "alexp"}) }}"><i class="fa fa-home" aria-hidden="true"></i>
            Accueil page perso</a></li>
    </ul>

    <p>Message(s) reçu(s) depuis votre dernière visite : {#{{ newMessages|length }}#}[0]</p>
    <p>Message(s) non-lu(s) : {#{{ unReadMessages|length }}#}[0]</p>

    <div>
        <ul>
            <li><a href="{{ url('mail_received', {pseudo : "alexp"}) }}" class="mail" data-mail="received"><i class="fa fa-arrow-left" aria-hidden="true"></i>
            Messages reçus</a></li>
            <li><a href="{{ url('mail_sent', {pseudo : "alexp"}) }}" class="mail" data-mail="sent"><i class="fa fa-arrow-right" aria-hidden="true"></i>
                    Messages envoyés</a></li>
        </ul>

    </div>
    <div class="display">
        {#Utiliser Ajax pour faire apparaître la rubrique de la boîte mail demandée : inbox, outbox ...#}
    </div>

{% endblock %}


Dans le doute, j'avais essayé de supprimer l'URL des liens mais ça ne fait pas de différence.
Modifié par AlexP (27 Jul 2017 - 14:22)
Sujet clos
Aller à