Discussion :

[soeursourire]

Bonjour,

Je ne connais pas encore bien Ajax et j'essaye quelque chose de simple sans y arriver..

J'ai une liste d'articles (chaque article ayant une catégorie associée) qui s'affiche sur ma page web comme ceci:

CODE HTML

Code :

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

1
2
3
<div class="thearticles">
          <?php include('javascripts/getAllArticles.php'); ?>
        </div>

CODE PHP

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
                
                  $reponse = $bdd->query('SELECT * FROM blog_article');
 
                  while ($donnees = $reponse->fetch()) {
          ?>
                    <article>
                        <div class="article-title">
                          <h3><?php echo $donnees['titre']; ?></h3>
                        </div>
 
                    <span class="article-category">
                      <i class="fa fa-tag fa-rotate-90" aria-hidden="true"></i>
                      <?php 
                        $idcat=$donnees['id_categorie'];
                        $categ = $bdd->query("SELECT * FROM blog_categorie WHERE id = $idcat");
                        while ($cat = $categ->fetch()) {
                          echo $cat['label'];
                        }
                        
                      ?>
                    </span>
 
                      <hr>
                      <div class="article-content">         
 
                        <span class="article-post">Posté le <?php echo $donnees['date_creation']; ?></span>
 
                        <p><?php echo $donnees['contenu']; ?></p>
 
                        <?php 
                          $idArticle = $donnees['id'];
                        ?>
                        <a href="article.php?page=<?php echo $idArticle; ?>" class="article-suite">Lire la suite ...</a>
 
                      </div>
 
                      <div class="article-img">
                        <img src="<?php echo $donnees['url_img']; ?>" />
                      </div>
 
                      <span class="article-share-item"> Partager</span>
 
                      </article>
 
          <?php          
                  }
 
                  $reponse->closeCursor();
          ?>

J'ai la liste de toutes les catégories possible qui s'affiche également sur ma page:

CODE HTML

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
21
22
23
24
25
 <div class="categories">
 
              <h4>Catégories</h4>
 
              <hr>
 
              <ul>
 
                <?php
                
                  $reponse = $bdd->query('SELECT label FROM blog_categorie');
 
                  while($donnees = $reponse->fetch()) {
 
                   // echo '<li class="categories-item"><i class="fa fa-square" aria-hidden="true"></i>'. $donnees['label'] . '</li>';
                    echo '<a href="#" class="categories-item"><li><i class="fa fa-square" aria-hidden="true"></i>'. $donnees['label'] . '</li></a>';
                  }
 
                  $reponse->closeCursor();
                  ?>
 
              </ul>  
 
 
          </div>

Et j'aimerais qu'en cliquant sur une des catégories, j'affiche uniquement les articles de cette catégorie. Donc si j'ai bien compris pour faire ça, il faut passer par ajax et il faudrait que je puisse charger un script PHP dans ma balise thArticles qui récupère la catégorie cliquée et les articles associés... Quelque chose comme ceci:

CODE JQUERY

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
 
 
      $(document).ready(function(){
 
 
       $(".categories-item").on('click',function(){
 
            alert($(this).text());
 
            var result = $('.theArticles');
 
            // un objet XmlHttpRequest est instancié
            $.ajax({
 
                url: 'javascripts/getArticlesByCategory.php',  // ressource cible
                type: 'GET', // type de la requete HTTP, on récupère du serveur, valeur par défaut pas obligé de l'instancier
                //data: {LaCategorie: $(this).html()},
 
                success : function(data){ // success est toujours en place, bien sûr !
                     // Informe l'utilisateur que l'opération est terminé et renvoie le résultat
                      result.html(data); 
                      // J'écris le résultat prénom de l'élève dans le h1
                      $(.thearticles).html(data);
                },
 
                error : function(){
                      result.html("Désolée, aucun résultat trouvé.");
                }
             });
 
        });
 });
 
    </script>

Mais je ne suis pas sûre de comprendre comment définir ce "data": est-ce la catégorie cliquée que l'on veut passer en paramètre du script PHP? et comment afficher le résultat PHP dans la balise theArticles...
Je vous remercie d'avance pour votre aide.

[SpaceFrog]

Deux possibilités en fonction du nombre d'articles ...

peu d'articles tu leur mets en class leur catégorie
tu affiches tout et le filtre peut se faire par un switch de class en Jquery

beaucoup d'articles :

tu passes en paramètre de ton ajax la catgérorie a afficher et tu rajoute un filtre where à ta requete mysql dans la table
sur le success tu récupères un json avec les données a afficher

[Toufik83]

bonjour,
tout d'abord

// echo '<li class="categories-item"><i class="fa fa-square" aria-hidden="true"></i>'. $donnees['label'] . '</li>';
echo '<a href="#" class="categories-item"><li><i class="fa fa-square" aria-hidden="true"></i>'. $donnees['label'] . '</li></a>';

, tes éléments <li> sont crées dynamiquement, donc il faut chercher le conteneur static de tes <li> et le mettre dans la fonction on("click).

dans ton cas on va prendre la div class="categories" comme conteneur static :

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
 
$(".categories").on("click",".categories-item",function(){
var result = $('.theArticles');
var MonId = parseInt($(this).text());
    $.ajax({
            url: 'javascripts/getArticlesByCategory.php',
            contentType: "application/json; charset=utf-8", //type de donnée a envoyer
            type: 'GET',
            data: JSON.stringify({id:MonId  }), // ici il faut que ta fonction PHP ait un paramètre id de type Int
            dataType: 'json', // javascript Object Notation
            success:function(data){
                for(var i=0;i<data.length;i++){
                       result.html(data[i].id); // ici le data envoyé par PHP doit contenir une variable id.
                       }
            }
    });
});

pour mieux comprendre le Json regarde un peu cet exemple : http://www.w3schools.com/json/json_example.asp

[soeursourire]

Merci beaucoup pour votre aide.
J'essaye de reprendre votre code mais j'ai déjà quelques soucis à comprendre... Ce

Code :

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

var MonId = parseInt($(this).text());

retourne un NaN (quand je l'affiche).
Et dans mon fichier getArticlesByCategory.php, j'ai

Code :

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

echo 'Entry getArticle by categ';

mais ce 'Entry getArticle by cage' en début du fichier php ne s'affiche même pas alors que cela devrait non?

Merci encore

[Toufik83]

Code :

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

1
2
 
var MonId=$(this).text();

ça veux dire qu'on get le texte de l'élément ".categories-item" au moment du click.
si tu veux faire autrement, il faut alors attribuer un Id unique a chaque li appartenant à categories-item, genre :

Code php :

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

1
2
echo '<a href="#" class="categories-item"><li id='"<?php echo $donnees['id'] ?>"'><i class="fa fa-square" aria-hidden="true"></i>'. $donnees['label'] . '</li></a>';

ensuite la fonction click sur les li doit être comme ça :

Code :

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

1
2
3
4
5
 
$(".categories").on("click",".categories-item li",function(){
var MonId=parseInt($(this).attr("id"));
....
});

[soeursourire]

Je suis un peu perdue. J'essaye déjà de faire en sorte que le fichier php soit appelé. Et quand j'essaye ce code suivant, le message "Entry getArticle by categ" n'apparait pas... donc j'ai déjà un soucis avec l'appel de ce fichier php non? Comment trouver l'erreur?

Le script jQuery

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function(){
 
        $(".categories").on("click",".categories-item",function(){
          var param = 'l=' + $(this).text(); 
          alert(param);  // l=MACATEGORIE s'affiche bien dans une boite de dialogue
          $('.theArticles').load('javascripts/getArticlesByCategory.php',param);      // RIEN NE SE PASSE...
        });
});

Le fichier php (getArticlesByCategory.php)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
     echo "Entry getArticle by categ";  
 
      $l=$_GET["l"];
      if ($l != "") {
        echo "parametre: " + $l;
      }
      else {
        echo "parametre vide";
      }
 
?>

[soeursourire]

Apparemment ca ne marche pas sur les classes uniquement sur une balise avec un id...

[Toufik83]

Apparemment ca ne marche pas sur les classes uniquement sur une balise avec un id...

ça marche sur les classes aussi, voilà un exemple https://jsfiddle.net/Toufi9/tj6jxvmg/ dans lequel on ajoute des <ul> et <li> dynamiquement avec jquery, puis on les ajoute a notre div static class="categories".

[soeursourire]

Merci pour vos réponses. Je reviens vers vous parce que je n'arrive pas à faire marcher cette fonction load.

Voici comment je procède:

Code HTML ou j'affiche les articles de mon blog (dans index.php):

Code :

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

1
2
3
4
<div class="thearticles" id="articlesSort">
 
          <?php include('javascripts/getAllArticles.php'); ?> 
        </div>

// Tous mes articles s'affichent bien

Script jQuery en fin du fichier index.php pour afficher que les articles correspondant à une catégorie cliquée:

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function(){
 
        $(".categories").on("click",".categories-item",function(){
 
          $('#articlesSort').load('javascripts/getArticlesByCategory.php',{param: $(this).text()}); 
 
        });
});

Le script PHP qui récupère normalement les articles pour cette catégorie donnée (enfin pour le moment je voudrais récupérer l' id de ma catégorie):

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
<?php
  
     echo "Entry getArticle by categ";  
     
     echo $_POST['param'];
 
     $reponse = $bdd->query('SELECT id FROM blog_categorie WHERE label = "Graphisme"');
    
      while ($donnees = $reponse->fetch()) {
          
          echo $donnees['id'];
      }
 
      $reponse->closeCursor();
 
?>

Mais Entry getArticle by categ ainsi que $_POST s'affichent bien mais il semblerait que le fetch sur la réponse ne s'affiche pas... Et pourtant je n'ai pas de message d'erreur dans l'éditeur...
Et si je fais un include de getArticlesByCategory.php directement dans le fichier index.php tout s'affiche bien donc est-ce que avec le load, on perd la connection à la base de données?
Donc comment savoir s'il retrouve bien ma base de données $bdd? Comprenez-vous d'ou vient mon erreur?

[soeursourire]

En fait si je me reconnecte à la base de donnée dans getArticlesByCategory.php ça a l'air de fonctionner.

Par contre maintenant j'ai un soucis avec les guillemets... comment faire pour remplacer le mot "Graphisme" par $_POST['param']

Je pensais que ce serait ça mais cela ne fonctionne pas:

Code :

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

$reponse = $bdd->query('SELECT id FROM blog_categorie WHERE label = $_POST["param"]');

[soeursourire]

Apparemment c'est comme ça:

Code :

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

$reponse = $bdd->query("SELECT id FROM blog_categorie WHERE label=\"$labelC\"");

[Toufik83]

normalement $_POST["param"] est une variable, et pour concaténer une variable avec une chaine de caractère en Php on fait:

Code :

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

$reponse = $bdd->query("SELECT id FROM blog_categorie WHERE label=".$_POST["param"]);