Discussion :

[karamaster]

Bonjour, j'affiche sur ma page un dossier et les titres des articles liés au dossier (lien). Je souhaite afficher sur la même page dans une DIV le texte de l'article provenant de ma BDD à chaque fois que je click sur un titre d'article (lien).

Voilà mon script:

Javascript

Code :

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

1
2
3
function afficherArticle(article){
	document.getElementById('divCharge').innerHTML= article;
}

PHP: affichage

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
       foreach($sqlArtLie as $key=>$value){  
	//On récupère l'article dans la table article
        $data = display($table, $filtre, $p);  //Fonction qui me ramène les données sous forme de tableau
	foreach($data as $key=>$value){  //Je récupère le titre de l'article et le texte
	     $titreArt = $value->titre;
	     $texte = $value->texte;
	}
	$article = "<h1>".$titreArt."</h1><div>".$texte."</div>";
//Jusque là tout va bien, vérification les variables ont bien leur contenu
 ?>
<a href="#" onclick="javascript:afficherArticle('<?php $article ?>');">
         <div><?php echo $value->titre; ?></div>
 </a>
<?php  }?>

//DIV d'affichage du texte

Code html :

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

<div id="divCharge"></div>

Merci de votre aide.

[la.lune]

Déjà tu oublies un echo entre <?php et $article à la ligne 16. Tu dois avoir ceci afficherArticle('<?php echo $article ?>');">

[la.lune]

Mais bon je te déconseille cette méthode, déjà c'est un peu moche de mettre tout un article comme paramètre à afficher une fois la méthode est exécuté, en plus si dans ton article tu as des apostrophe alors c'est fini pou toi

Alors, si tu veux dans toutes les circonstances envoyer tes articles au client, et tu ne veux pas faire de l'ajax, je te propose une solution que je ne dis pas que c'est la meilleur, mais bon c'est un mieux que ce que tu fais. Tu peut mettre des articles dans un champs caché, un input de type hidden, et tu récupère après, avec un id que tu peux créer, comme un nombre que tu va initialiser et incrémenter avec la boucle.
Tu peux faire comme ça par exemple:

Code php :

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

1
2
3
4
5
6
7
8
 $article = "<h1>".$titreArt."</h1><div>".$texte."</div>";
 <input id="<?php echo $i ?>" type="hidden" value="<?php echo $article ?>" style="display:none" />
?>
<a href="#" onclick="javascript:afficherArticle(<?php echo $i ?>);">
         <div><?php echo $value->titre; ?></div>
 </a><?php 
$i++
 }?>

Et dans la fonction JavaScript tu peux faire comme ça:

Code Javascript :

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

1
2
3
function afficherArticle(id){
        document.getElementById('divCharge').innerHTML= document.getElementById(id).vlaue;
}

[karamaster]

Je ne suis pas un calé en Ajax raison pour laquelle je passe simple par js.
Comment faire si je veux utiliser AJAX?

[la.lune]

Si tu ne connais pas l'ajax alors il faut chercher à l'apprendre sur le forum, comment ça marche. Il y a pas mal de tuto ici qui expliquent ça. Voir la FAQ Ajax

Déjà dans ton cas il te faudra un identifiant unique pour chaque article, que tu peux la gérer manuellement ou avec la base de données.

Ainsi, tu dois avoir un fichier php, qui te renvoie juste le contenu d'un article si tu envoie une requête avec l'identifiant(id_article).
Alors dans ton fichier php tu n'aurais pas besoin d’insérer tout l'article mais l'identifiant:
Tu peux juste avoir :

Code php :

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

1
2
3
4
<a href="#" onclick="javascript:afficherArticle(<?php echo $id_article);">
         <div><?php echo $value->titre; ?></div>
 </a>

Et dans la fonction Javascript pour afficher le contenu vas y apprendre comment ça marche avec ajax.

Code JavaScript :

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

1
2
3
4
5
function afficherArticle(id_article){
//CODE D'APPEL DE L'ARTICLE AVEC AJAX
//AFFICAHE UNE FOIS LA REQUÊTE RÉUSSI
}

De la même manière que tu n'est pas obligé de faire de l'ajax , si tu n'a pas une grande quantité d'articles à afficher d'un seul coup tu peux adopter le champ caché ou un contenu même caché dans le navigateur

[karamaster]

Ok, je vais faire un tour sur le forum et je reviens. C'est toujours mieux d'apprendre.

[karamaster]

Salut, je reviens vers toi, j'ai codé en ajax mais je suis confronté un souci.

Fonction AJAX

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
function afficherArticle(id){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			// On se sert de innerHTML pour rajouter les article dans la div
			document.getElementById('chargeDiv').innerHTML = xhr.responseText;
		}
	}
	// On envoi les info en post par la méthode OPEN
	xhr.open("POST","listeArtDossier.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Valeur de l'id de de l'article récupéreé dans la variables idArt
	idArt = document.getElementsById(id).value;
	xhr.send("idArt="+idArt);
}
}

Code HTML

Code php :

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

1
2
3
4
5
6
7
8
9
<?php 
$i=1;
foreach($sqlArtLie as $key=>$value){ 
	$id = $value->idart;
	$titre = $value->titre;
?>
 <input id="<?php echo $i ?>" type="hidden" value="<?php echo $id ?>" style="display:none" />
 <a href="#" onclick="javascript:afficherArticle(<?php echo $id;?>)"><div><?php echo $titre; ?></div></a> 
 <?php $i++; }?>

//Zone d'affichage du texte

Code :

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

<div id="chargeDiv"></div>

Le Fichier PHP

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
//On récupère l'article dans la table article
$table = "article";
$filtre = "idart";
$p = $_POST['idArt'];
$data = display($table, $filtre, $p); //Fonction d'exécution
foreach($data as $key=>$value){
	$id = $value->idart;
	$titreArt = $value->titre;
	$texte = $value->texte;
	$date = $value->dateart;
} 
echo "<div><h1>".$titreArt."</h1>".$texte."</div>";
?>

Comment récupérer les données envoyées et les afficher?

[la.lune]

Alors je vais d'abord essayer de t'expliquer une chose, ce que tu fais là avec le champs caché rien que pour stocker le l'id de l'article n'a pas de sens, l'id de l'article tu le passe directement à la méthode comme tu as déjà fais. Le mécanisme du champs caché était de faciliter le stockage du contenu de chaque article et avoir accès une fois on clique sur le titre, mais maintenant tu vu que tu clique et l'article vient du serveur, alors le fait que tu passe l'id de l'article à la méthode javascript suffit. Possible d'utiliser si on veut les deux concepts; le champ caché et ajax à la fois, l'un par exemple pour les premiers articles et l'autres pour la suite des articles pour ne pas forcer à envoyer tous les articles au client, mais laissons ça à part d'abord, concentrons nous pour afficher le contenu via ajax, alors efface le input de type hidden et le $i et le $i++.

Alors déjà je ne comprend vraiment pas comment ça marche avec ton fichier php il y a une boucle et une méthode je ne sais pas réellement où est ce que tu veux arriver, mais je vais essayer de faciliter la tâche pour y arriver à t'en sortir et déjà je sais que de le lien fourni dans la fonction ajax est erroné, alors comment avoir le bon lien et être sûr que le lien aussi marche bien.

Alors on suppose que tu as un article donné dans ta base de données dont son identifiant est égale à 12, idArt=12 , alors avant de commencer à tester la requête avec ajax assure toi que la requête affiche quelque chose d'abord, alors il faut taper dans le navigateur et le lien dépend de la structure de ton site, alors je suppose que ton fichier php se trouve dans un répertoire nommé MonSite .

Alors tape dans la barre de navigation de ton navigateur, quelque chose qui doit ressembler à ça et assure toi de donner le bon chemin http://127.0.0.1/..../MonSite/listeArtDossier.php?idArt=12 que ce que ça donne? ça doit t'afficher le texte de l'article en entier. Règle ça d'abord.

[karamaster]

Je viens de regler le problème, le lien ressemble à ça

Code :

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

http://127.0.0.1/Mon_site/listeArtDossier.php?idArt=22

Code php

Code php :

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

1
2
3
4
5
6
7
8
9
10
<?php
    require('core.php'); //Inclusion de fonction de connexion à la BDD
	//On récupère l'article dans la table article
	$p = $_GET['idArt'];
	$sql = $connect_db->prepare("SELECT * FROM article WHERE idart= :id");
	$sql->execute(array('id'=>$p));
	$data = $sql->fetch(PDO::FETCH_OBJ);
 
	var_dump($data);	
?>

[la.lune]

Alors à présent on va revoir ton code JavaScript pour que ça appel le contenu à afficher, mais avant tout je veux te souligner une chose, c'est que ici tu me dis que ton adresse ressemble à ça http://127.0.0.1/Mon_site/listeArtDossier.php?idArt=22 alors sache bien que la manière dont on va fournir l'adresse ne doit pas être aléatoire, on peut donner tout cet url absolu qui va marcher à tous coût mais tant que tu teste ton site en local.

Mais dès que tu change de répertoire ou si tu héberge ton site tu n'aura pas de 127.0.01 alors il faut un URL relative. Donc il faut juste savoir dans quel répertoire se trouve le fichier que tu va appeler par rapport au fichier où se trouve le script javascript qui va l’appeler.

Alors en php, ./ désigne le répertoire encours, du fichier où nous sommes, et le ../ le répertoire parent, alors si tes deux fichiers se trouve sur le même dossier comme le dossier MonSite/, c'est simple ton URL peut être égale ./listeArtDossier.php?idArt=...,vrai aussi sans le . comme ça /listeArtDossier.php?idArt=..., si le fichier listreArtDossier.php se trouve c'est dans sous répertoire fils de MonSite or le fichier principale se trouve dans MonSite alors l'URL ça sera comme ça ./SOUS_Repertoire/listeArtDossier.php?idArt=...

Alors je suppose que tes deux fichiers se trouvent sur le même dossier et voici le code JavaScript avec corrections de quelques erreurs:

Code JavaScript :

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
 
function afficherArticle(id){
    var xhr = null; 
    if(window.XMLHttpRequest) // Firefox et autres
        xhr = new XMLHttpRequest(); 
    else if(window.ActiveXObject){ // Internet Explorer 
        try { 
xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }}
    else { // XMLHttpRequest non supporté par le navigateur 
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
        xhr = false; 
        return xhr;
    } 
 
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState == 4 && xhr.status == 200){
            // On se sert de innerHTML pour rajouter les article dans la div
            document.getElementById('chargeDiv').innerHTML = xhr.responseText;
        }
    }
    // On envoi les info en GET par la méthode OPEN
    var URL="./listeArtDossier.php?idArt="+id;
    xhr.open("GET",URL,true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send();
 
}

Et comme j'ai dis tu n'a pas besoin de ton input hidden, j'ai compris pourquoi tu l'avait utilisé, mais bon j'ai reglé ça dans la fonction javascript tu n'a pas besoin de ça, et j'ai utilisé la méthode GET au lieu de POST, alors voici ton fichier php:

Code PHP :

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

1
2
3
4
5
6
7
8
9
<?php 

foreach($sqlArtLie as $key=>$value){ 
    $id = $value->idart;
    $titre = $value->titre;
?>
 <a href="#" onclick="afficherArticle(<?php echo $id;?>)"><div><?php echo $titre; ?></div></a> 
<?php }?>

[karamaster]

Zut!, j'avais oublié de mes URL sont réécrite mais c'est n'a pas posé de problème. J'ai résolu.
Le code fonction mais j'ai un petit sous à chaque clic sur le lien ma page remonte (barre de défilement vertical remonte vers le haut de la page). Je voudrais que l'affichage reste sur le texte.
Aussi, je veux ajouter un loader qui permet à l'utilisateur de patienter avant l'affichage de l'article.

Le code corrigé:

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
function afficherArticle(id){
    var xhr = null; 
    if(window.XMLHttpRequest) // Firefox et autres
        xhr = new XMLHttpRequest(); 
    else if(window.ActiveXObject){ // Internet Explorer 
        try { 
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }}
    else { // XMLHttpRequest non supporté par le navigateur 
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
        xhr = false; 
        return xhr;
    } 
 
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState == 4 && xhr.status == 200){
            // On se sert de innerHTML pour rajouter les article dans la div
            document.getElementById('chargeDiv').innerHTML = xhr.responseText;
        }
    }
    // On envoi les info en GET par la méthode OPEN
    var URL="../../listeArtDossier.php?idArt="+id;
    xhr.open("GET",URL,true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send();
 
}

HTML/PHP:

Code php :

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

1
2
3
4
5
6
7
<?php 
    foreach($sqlArtLie as $key=>$value){ 
	 $id = $value->idart;
	 $titre = $value->titre
?>
<a href="#" onclick="afficherArticle(<?php echo $id;?>)"><div><?php echo $titre; ?></div></a>
<?php }?>

[Bovino]

Traité et résolu un très grand nombre de fois !

Lorsque tu cliques sur un lien, la moindre des choses est que le navigateur suive ce lien (donc remonte en haut de page si le lien pointe sur l'ancre #), à moins bien sûr d'inhiber le comportement par défaut...
Pour ça, une rapide recherche te donnera toutes les informations utiles.

[karamaster]

Résolu merci tous, à la.lune et Bovino.