Forum : ajax et plugin jquery

Bonsoir.
À quoi servent le <!DOCTYPE html>et les balises <html>dans ton fichier PHP ?
Ensuite, tu devrais oublier success et error, car d'après ce que je peux voir tu utilises la version 3.1.1 de jQuery et si tu fais un minimum attention a la documentation de l'API concernant l'ajax avec jQuery, tu y remarquera :

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Autre chose, dans la sortie de success tu demandes à faire appel à la fonction setWords sauf que cette fonction attend un argument et tu y fait appel comme-ci c'était une variable.
Pour terminer, tu devrais lui spécifier quel genre de format de données la fonction ajax va réçevoir avec l'attribut dataType, soit du html dans ton cas.

Kenor

wordcloud il est où dans ton code HTML ?

Il y a beaucoup de chose à revoir dans le code par contre.

Kenor

D'accord avec le reste, mais pas avec

Autre chose, dans la sortie de success tu demandes à faire appel à la fonction setWords sauf que cette fonction attend un argument et tu y fait appel comme-ci c'était une variable.

La façon dont il l'utilse est bien la bonne (même si tu as raison de dire qu'il ne devrait pas utiliser success)

Lartak

Sa fonction setWords attend un argument, il devrait donc faire quelque chose comme : setWords(datas)et non juste setWords.
Pour être plus clair, son code javascript devrait ressembler à :

jQuery(document).ready(function ($) {
    $.ajax({
        url: 'mots.php',
        dataType: 'json'
    })
        .done(function(datas) {
            setWords(datas);
        })
        .fail(function() {
            console.log('Erreur');
        });
    function setWords(requete) {
        var word_array = requete;
        $("#wordcloud").jQCloud(word_array);
    }
});

Par contre, ça ne fonctionnera pas son système, car le plugin attend des données sous forme de tableau récupérés via json par exemple, mais d'après son fichier PHP qui ferait le retour pour les données, le traitement renvoit du code HTML.

Maenhyr

Pour info :

$.ajax({
  url: 'mots.php',
  dataType: 'json'
})
  .done(function(datas) {
    setWords(datas);
  })

est equivalent a

$.ajax({
  url: 'mots.php',
  dataType: 'json'
})
  .done(setWords)

Ensuite pour quoi definir word_array ?

function setWords(requete) {
  $("#wordcloud").jQCloud(requete);
}

Et vu que tu ne definis pas de div ayant l'id wordcloud, cela risque de ne pas fonctionner.

Kenor

@Lartak : justement non, encore une fois, il l'utilise de la bonne manière, malgré l'argument. C'est l'utiliser avec l'argument qui renverrai une erreur. http://stackoverflow.com/questions/14754619/jquery-ajax-success-callback-function-definition

Lartak

@Kenor: La prochaine fois que tu veux appuyer tes propos avec des sources externes, assures toi bien avant qu'elles ne contredisent pas tes dires.
Regardes bien l'avant dernier commentaire et sa date d'édition comparé aux autres.
Et expliques moi en quoi la manière dont j'ai donné l'exemple en code ferait échouer l'appel à sa fonction.

Kenor

Oulah, t'es un nerveux toi.
je ne fais que te citer :

Autre chose, dans la sortie de success tu demandes à faire appel à la fonction setWords sauf que cette fonction attend un argument et tu y fait appel comme-ci c'était une variable.

Et je te donne l'exemple, je ne vois pas ce qu'il y a à dire de plus ...
Bref, je passe mon chemin ...
Et je ne faisais pas référence à ton exemple (qui n'est pas faux), mais à ce que j'ai cité de toi (qui est faux, et l'ai toujours), rien d'autres.

marine0000

Auteur

j'ai récupéré mes données php via json

    <?php
           //connexion à la bdd
           try
           {
            $bdd = new PDO('mysql:host=localhost;dbname=lexique;charset=utf8', 'root', 'root');
           }
           catch (Exception $e)
           {
                die('Erreur : ' . $e->getMessage());
           }
            //récupération du contenu
            $requete = $bdd->query('SELECT * FROM les_mots ORDER BY mot');

            while ($data = $requete->fetch())
            {
        ?>
               <tr>
                <td><?php echo '<a href="definition.php?id= '.$data['id'].'">' .$data['mot']. '</a>';?></td>
               </tr>
                 <?php  
            }
            //termine le traitement de la requête
            $requete->closeCursor();
            echo json_endcode($data);
        ?>

et défini le div que j'avais oublié

<!DOCTYPE html>
<html>
    <head>
        <title>lexique juridique</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src='jquery-3.1.1.js'></script>
        <link rel="stylesheet" type="text/css" href="jqcloud.css" />
        <script type="text/javascript" src="jqcloud.js"></script>
    </head>
    <body>
        <header>
            <img class="banniere" alt="" src="Banniere.jpg">
        </header>
        <div id="wordcloud" style="width: 550px; height: 350px;"></div>

        <script>

jQuery(document).ready(function ($) {
    $.ajax({
        url: 'mots.php',
        dataType: 'html'
    })
        .done(function(data) {
            setWords(data);
        })
        .fail(function() {
            console.log('Erreur');
        });
    function setWords(data) {
        var word_array = data;
        $("#wordcloud").jQCloud(word_array);
    }
});
    </script>

       <footer>
            <p>Copyright 2016 Groupe 1 - Toute reproduction interdite</p>
       </footer>
    </body>
</html>

mais mes données n'apparaissent toujours pas :(

Lartak

La fonction c'est json_encode et non json_endcode, ensuite supprime le code HTML dans ton fichier PHP et modifies dataType: 'html' par dataType: 'json'.

marine0000

Auteur

ça ne fonctionne toujours pas, aucune donnée n'apparait quand j'ouvre mon fichier html .
Et quand j'ouvre mon fichier php seul, json_encode renvoie "false"

Lartak

Remplaces :

while ($data = $requete->fetch())
{
    ?>
    <tr>
        <td><?php echo '<a href="definition.php?id= '.$data['id'].'">' .$data['mot']. '</a>';?></td>
    </tr>
    <?php
}
//termine le traitement de la requête
$requete->closeCursor();
echo json_encode($data);

Par :

$data = $requete->fetchAll(PDO::FETCH_OBJ);
header('Content-Type: application/json');
echo json_encode($data);
die();

marine0000

Auteur

Bonjour
merci d'avoir répondu :)
mais du coup ca me donne toutes mes données n'importe comment si j'enlève :

                echo '<a href="definition.php?id= '.$data['id'].'">' .$data['mot']. '</a>';

et puis je l'aurais plus en tableau pour pouvoir l'appeler avec mon plugin jquery
je suis débutante je m'arrache les cheveux, ca fait une semaine que je suis là dessus j'essaie d'apprendre tant bien que mal :'(

Lartak

Le plugin attend un tableau de type json avec les clés title et weight au minimum.

title pour le nom du mot
weight pour connaître l'importance du mot afin de selon la valeur cette propriété, lui donner un affichage plus élevé que les autres

Tu as peut-être vu qu'il est possible de lui passer une propriété html, mais ça ne veut pas dire que tu peux lui passer un tableau contenant une chaîne de caractère qui sera du HTML, mais seulement que tu peux lui définir des valeurs pour des attributs HTML.
Pour faire simple, voici par exemple ce qu'il attend au minimum :

[
    {text: "Lorem", weight: 15},
    {text: "Sit", weight: 7},
    {text: "Amet", weight: 5}
]

Lorsqu'il est question de html, voici un exemple :

[
    {text: "Dolor", weight: 6, html: {
        title: "I can haz any html attribute"
        }
    }
]

De base, lorsqu'il va reçevoir les données sous forme de tableau, il va retourner ces mots dans des span, en appliquant des règles css sur chaque élément suite à des calculs dans le code javascript.
Il va donc retourner quelque chose comme :

<span style="width:7px;height:5px;">Lorem</span><span style="width:3px;height:4px;">Sit</span>/* etc... */

Lorsqu'il est question de html, il ne fera qu'ajouter des attributs html à l'élément span, comme une class par exemple ou autre.
Dans tous les cas, il ne faut pas lui renvoyer de chaine de caratères sous format HTML.
Si tu veux modifier le tableau des données que tu lui envoit, il te faut le faire avant delui envoyer sous format json, mais uniquement avec du PHP et non avec du code html, par exemple :

$words = $requete->fetchAll(PDO::FETCH_OBJ);
$wordsArray = [];
foreach ($words as $key => $word) {
    $wordsArray[$key]['text'] = $word->name;
    $wordsArray[$key]['weight'] = $word->look_count;
}

Ce qui permettra de recréer les données avec les index qu'il attend dans le tableau et sans lui soumettre de code html et seulement avec les données qu'il attend, bien que si tu as besoin de limiter les champs récupérés via ta requête SQL, il te faut modifier l'indicateur all soit * par la liste des champs voulus, donc par rapport à mon exemple : 'SELECT name, look_count FROM les_mots ORDER BY mot'
Si tu veux que l'élément puisse être cliquable et qu'il renvoi vers une url spécifique, tu puis lui definir la clé link dans tes données en json pour qu'il entoure l'élément d'un lien avec l'url que tu définis.
Selon ton code ça donnerait :

$words = $requete->fetchAll(PDO::FETCH_OBJ);
$wordsArray = [];
foreach ($words as $key => $word) {
    $wordsArray[$key]['text'] = $word->name;
    $wordsArray[$key]['weight'] = $word->look_count;
    $wordsArray[$key]['link'] = 'definition.php?id=' . $word->id;
}

marine0000

Auteur

je comprends mieux merci beaucoup de votre patience .
Seulement pour déterminer le weight , l'importance du mot , je peux juste ajouter une colonne dans ma table SQL en y mettant des chiffre selon l'importance?
et quand j'ouvre mon fichier PHP seul, le link auquel je renvois ne fonctionne pas puisque ca m'ouvre le tableau en "brut", c'est ca?

Lartak

Quand je parle d'importance, dans ce cas là, c'est par exemple pour mettre en évidence soit des mots qui sont souvents recherchés et la valeur de l'importance dépend du nombre de fois qu'il est utilisé/vu, il faut donc que ce ne soit pas quelque chose que tu choisies toit même, mais qui soit impacté par rapport aux utilisateurs de ton site.
Si par exemple tu as un système de recherche sur ton site, tu pourrais par exemple enregistrer les mots qui sont recherchés quand ils ne s'y trouvent pas dans la table et incrémenter un champ à chaque recherche de ce mot.
De cette manière tu auras un système vraiment fonctionnel, j'ai donné comme exemple en base de données, mais ça pourrait très bien être dans un fichier (json) par exemple.
Ce qui à mon avis éviterait des surcharges de requêtes à ta base de données.

et quand j'ouvre mon fichier PHP seul, le link auquel je renvois ne fonctionne pas puisque ca m'ouvre le tableau en "brut", c'est ca?

Tu devrais éviter que le fichier puisse être appelé autrement qu'en ajax, sinon pour répondre à ta question, oui, ton script PHP ne devrait retourner qu'un tableau sous format json de manière à ce que ta requête ajax récupère quelque chose comme dans mes exemples précédents, soit du genre [{text: 'un mot', weight: 18}, {text: 'un autre mot', weight: 13}, {text: 'un autre mot avec un lien', weight: 8, link: 'https://www.grafikart.fr'}, {text: 'mot avec la clé html', weight: 12, html: {title: 'Le titre de mon mot'}}].

marine0000

Auteur

ah mais en fait je veux juste que ce soit les mots que j'ai entrés moi-même dans ma bdd qui s'affichent dans le nuage de mots.
En fait, c'est juste le design qui m'interesse mais pas le système de la récurrence des mots . J'aurais pu ne pas utiliser de bdd mais comme je voudrais pouvoir ajouter des mots à tout moment et qu'en cliquant sur le mot il y a un renvoi à sa définition (que j'ai dans ma base de données aussi et que j'ai appelé dans un autre fichier php , d'où le:

echo '<a href="definition.php?id= '.$data['id'].'">' .$data['mot']. '</a>';

) je pensais que c'était plus approprié.

Lartak

Je t'ai juste donné un exemple, après tu fais comme tu veux, sauf que ce genre de système se classe dans la catégorie statistiques, mais au lieu d'afficher un nombre, un pourcentage ou un graphique, c'est l'apparence du terme qui change, donc plus un terme sera utilisé, vu/consulté, plus il attirera l'œil de l'utilisateur.

marine0000

Auteur

D'accord merci :)

ajax et plugin jquery

19 réponses