Afficher dans la div d'une autre page le résultat d'une requete

**binco** · 14/02/2015, 21h10

Bonjour
J'ai 3 pages.php:

La 1ere est "1_test.php": elle contient une "liste groupée avec des liens " (BOOTSTRAP).
Quand on clic sur un lien de cette liste, une fonction AJAX récupère l'id_theme et l'envoie au
au fichier "2_test.php" dans lequel une requête édite un texte html.
Je veux qu'au final ce texte html se retrouve dans la div d'id box_1 de la page "3_test.php":

$('#box_1 de la page 3_test.php').html(texthtml);

Je ne voix pas comment faire.
Pouvez vous m'aider?

Cordialement

1_test.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
 
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
</head>
 
<body>
 
<div class="col-lg-4">
	<div class="list-group">
		<a href="#" class="list-group-item active">Recherche par thème</a>
		<?php
 
                include_once('./connexion.php');
 
                //Preparer la requete
                                        
                $sql = 'SELECT themes,COUNT(*) AS comptage FROM liste_image GROUP BY themes';
                                        
                $requete2 = $connexion_bdd ->prepare($sql);
                                        
                //Compiler et executer la requete
                $requete2->execute();
                //Recuperer toutes les donnees retournees
                foreach($requete2->fetchAll() as $donnee)
                {
                        echo ('<a href="3_test.php" class="list-group-item clic_theme" data-theme="' . $donnee['themes'] . '">' . $donnee['themes'] . ' (' . $donnee['comptage'] . ' )</a>');
                }
                //Clore la requete preparee
                $requete2 -> closeCursor();
                $requete2 = NULL;
 
                ?>
	</div>
</div>
 
<script src="jquery.js"></script>
<script>
// Affichage des photos par theme
jQuery(function($){
 
	// on affecte au click des liens de classe "clic_theme" 
	$('.clic_theme').on('click', function(){
 
		// 1/ on récupère l'id_theme
		var id_theme = $(this).attr('data-theme');
		// -----------------
		// 2/ appel au fichier de récupération de données
		var texthtml 	= '';							
		$.ajax({										
		type:			'post',							
		url:			'./3_test.php',	
		data:			'themeId='+id_theme,			
		dataType:		'html',							
		success:		function( texthtml ){			
			texthtml 	= jQuery.trim(texthtml);		
			if( texthtml!='' ){						
				// -----------------
				// 3/ Je veux afficher dans la div d'id box_1 de la page "3_test.php" le code html
				$('#box_1 de la page 3_test.php').html(texthtml);		
				}
			return false;
		 }
		});
	});
});
</script>
 
</body>                                         
 
</html>

2_test.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
<?php // AJAX
// -------------------------------------------------
if( !empty($_POST['themeId']))		// si la variable est non vide, non nulle ou definie
{
	// -----------------
	// connexion a la Bdd
	include_once('./connexion.php');
	// -----------------
	$themeId = $_POST['themeId'];
	// -----------------
	// requete de recuperation des donnees, a partir de l id theme
 
	//Preparer la requete
	$photo_query 	= 'SELECT * FROM liste_image WHERE themes=? AND taille=? ';
	$requete3 = $connexion_bdd ->prepare($photo_query);
	//Associer des valeurs aux place holders
	$requete3->bindValue(1, 'themeId', PDO::PARAM_STR);
	$requete3->bindValue(2, 'petit', PDO::PARAM_STR);			
	//Compiler et executer la requete
	$requete3->execute();	
	//Recuperer les donnees retournees
	//Recuperer toutes les donnees retournees
	foreach($requete2->fetchAll() as $donnee)
		{
		echo ('<img	src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . '" data-identifiant="' . $donnee['id_photo'] . '" alt="' . $donnee['intitule'] . '" title="' . $donnee['intitule'] . '" />');
		}
	//Clore la requete preparee
	$requete3 -> closeCursor();
	$requete3 = NULL;
?>

3_test.php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
</head>
 
<body>
 
<div id="box_1"></div>
 
</body>                                         
 
</html>

**binco** · 14/02/2015, 23h36

Y pas moyen de faire un truc du style

Code :

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

$('window.location.href="3_test.php":#box_1').html(texthtml);

ou

Code :

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

$('window.location.href="3_test.php"[#box_1]').html(texthtml);

???

**NoSmoking** · 15/02/2015, 14h14

Bonjour,
regarde du coté de la méthode jQuery.load(), mais il te faudra rester sur la même page.

**binco** · 16/02/2015, 20h21

Merci pour ton aide ... j y suis presque!

J'ai utilisé ta méthode mais il y a un truc qui cloche
Je pense que le paramètre id_theme n'est pas envoyé à la page 2_test
J'ai beaux relire le code ...
Peux tu jeter un coup d’œil?

Cordialement

Résumé: 3 pages
1_test.php: en cliquant sur un lien on récupère le paramètre du lien (data-theme) que l'on envoie avec une fonction ajax à 2_test.php
2_test_php: on récupère ce paramètre et on exécute une requête pour afficher un certain nombre d'images dans une div d'id="contenu"
3_test.php: .load() nous permet au chargement de la page d'affecter à la div(id="box_1") le contenu de la div(id="contenu") située dans la page 2_test.php

1_test.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
 
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
</head>
 
<body>
 
<div class="col-lg-4">
	<div class="list-group">
		<a href="#" class="list-group-item active">Recherche par thème</a>
		<?php
 
                include_once('./connexion.php');
 
                //Preparer la requete
 
                $sql = 'SELECT themes,COUNT(*) AS comptage FROM liste_image GROUP BY themes';
 
                $requete2 = $connexion_bdd ->prepare($sql);
 
                //Compiler et executer la requete
                $requete2->execute();
                //Recuperer toutes les donnees retournees
                foreach($requete2->fetchAll() as $donnee)
                {
                        echo ('<a href="javascript:multiOpen()" class="list-group-item clic_theme" data-theme="' . $donnee['themes'] . '">' . $donnee['themes'] . ' (' . $donnee['comptage'] . ' )</a><br>');
                }
                //Clore la requete preparee
                $requete2 -> closeCursor();
                $requete2 = NULL;
 
                ?>
	</div>
</div>
 
<script src="jquery.js"></script>
<script>
 
// ouverture de plusieurs pages avec un lien
function multiOpen(){
	window.open("2_test.php");
	window.open("3_test.php");
}
 
// Envoie de donnee: parametre "data-theme"
jQuery(function($){
 	// on affecte au click des liens de classe "clic_theme" 
	$('.clic_theme').on('click', function(){
 		// 1/ on récupère l'id_theme
		var id_theme = $(this).attr('data-theme');
		// -----------------
		// 2/ Envoie de donnee
 
		$.ajax({										
		type:			'post',							
		url:			'./2_test.php',	
		data:			'themeId='+id_theme			
		});
	});
});
</script>
 
</body>                                         
 
</html>

2_test_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
<!DOCTYPE html>
<html>
<head>
</head>
 
<body>
 
<div id="contenu">
 
<?php // AJAX
// -------------------------------------------------
if( !empty($_POST['themeId']))		// si la variable est non vide, non nulle ou definie
{
	// -----------------
	// connexion a la Bdd
	include_once('./connexion.php');
	// -----------------
	$themeId = $_POST['themeId'];
	// -----------------
	// requete de recuperation des donnees, a partir de l id theme
 
	//Preparer la requete
	$photo_query 	= 'SELECT * FROM liste_image WHERE themes=? AND taille=? ';
	$requete3 = $connexion_bdd ->prepare($photo_query);
	//Associer des valeurs aux place holders
	$requete3->bindValue(1, $themeId, PDO::PARAM_STR);
	$requete3->bindValue(2, 'petit', PDO::PARAM_STR);			
	//Compiler et executer la requete
	$requete3->execute();	
	//Recuperer les donnees retournees
	//Recuperer toutes les donnees retournees
 
	foreach($requete3->fetchAll() as $donnee)
		{
		echo ('<img	src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . '" data-identifiant="' . $donnee['id_photo'] . '" alt="' . $donnee['intitule'] . '" title="' . $donnee['intitule'] . '" />');
		}
 
	//Clore la requete preparee
	$requete3 -> closeCursor();
	$requete3 = NULL;
}
?>
 
</div>
 
</body>                                         
 
</html>

3_test.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
<!DOCTYPE html>
<html>
<head>
</head>
 
<body>
 
<div id="box_1"></div>
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
// au chargement de ma page on affecte à la div(id: box_1) le contenu de la div(id: contenu) située dans la page 2_test.php
$(document).ready(function(){
        $("#box_1").load("2_test.php #contenu");
});
 
</script>
</body>                                         
 
</html>