Combiner des fonctions Ajax [Résolu]

[isitien]

Bonjour,

J'ai lu le tuto ici en utilisant la fonction showUser, son role est de rafraichir la page cible sans rafraichir le navigateur, supposons que j'ai 2 <select> sur la meme page, est ce qu'il est possible de combiner la meme fonction au lieu de creer une autre? par exemple:

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
function showUser(str)
{
 
// reste du code
 
xmlhttp.open("GET","getuser.php?q="+str,true);
 
}
</script>

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
function Clicks(str)
{
 
// reste du code
 
xmlhttp.open("GET","fichier.php?id="+str,true);
 
}
</script>

Je trouve que c'est embettant d'avoir repete la meme fonction que pour changer son nom ainsi que l'url (la cible).

Merci

[andry.aime]

Bonjour,

supposons que j'ai 2 <select> sur la meme page, est ce qu'il est possible de combiner la meme fonction au lieu de creer une autre?

En mettant en paramètre l'URL, le div à mettre à jour et la variable a envoyé.

A+.

[isitien]

Envoyé par andry.aime

Bonjour,



En mettant en paramètre l'URL, le div à mettre à jour et la variable a envoyé.

A+.

J'ai pas bien compris, j'ai donne l'exemple par select seulement, ça peut être quelque chose d'autres, par exemple

Code html :

<a href="#">lien</a>

[andry.aime]

quelque chose du genre

Code html :

1
2
<a href="#" onclick="ajax('page.php?var1=kikou','div1')">mettre a jour div 1</a>
<div id="div1"></div>

Code :

1
2
3
4
5
6
7
8
9
10
11
function ajax(page,divAMettreAJour){
...
xmlhttp.onreadystatechange=function{
 
.....
document.getElementById(divAMettreAJour).innerHTML=xmlhttp.response.Text;
 
}
xmlhttp.open("GET",page,true);
...
}

[isitien]

Donc le code serait comme suite:

Code :

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
 
function ajax(page,divAMettreAJour){
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(divAMettreAJour).innerHTML=xmlhttp.response.Text;
    }
  }
xmlhttp.open("GET",page,true);
xmlhttp.send();
}

Code :

1
2
3
4
5
6
 
<a href="#" onclick="ajax('page.php?var1=kikou','div1')">mettre a jour div 1</a>
<div id="div1"></div>
 
<a href="#" onclick="ajax('page.php?var=quelque_chose','div2')">mettre a jour div 2</a>
<div id="div2"></div>

Une question si ca vous derange pas, "page" etant que variable ou bien le nom de page, par exemple:

Code :

1
2
 
xmlhttp.open("GET",page,true);

Code :

1
2
3
 
<a href="#" onclick="ajax('une_page_kouki.php?var=kikou','div1')">mettre a jour div 1</a>
<div id="div1"></div>

Merci

[andry.aime]

Envoyé par isitien

Code :

Envoyé par isitien

Une question si ca vous derange pas, "page" etant que variable ou bien le nom de page, par exemple:

Il va falloir que tu regardes la notion de programmation .

A+.

[isitien]

Envoyé par andry.aime

Il va falloir que tu regardes la notion de programmation .

A+.

J'ai oublie de la changer:

Code :

1
2
 
document.getElementById(divAMettreAJour).innerHTML=xmlhttp.response.Text;

[andry.aime]

Code :

document.getElementById(divAMettreAJour).innerHTML=xmlhttp.responseText;

Désolé pour l'étourderie .

[isitien]

Envoyé par andry.aime

Code :

document.getElementById(divAMettreAJour).innerHTML=xmlhttp.responseText;

Désolé pour l'étourderie .

voila mon code final s'il y a quelque chose a changer:

entre les balises head:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type="text/javascript">
function ajax(page,divAMettreAJour){
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(divAMettreAJour).innerHTML=xmlhttp.response.Text;
    }
  }
xmlhttp.open("GET",page,true);
xmlhttp.send();
}
</script>

Code :

1
2
 
echo '[ <a href="#" onclick="ajax(\'page.php?thumbsu=up&idc="'.$idc.'"\',\'div1\')" class="Link02"><img src="'.$path2icons.'thumbs_up.png" align="absmiddle" class="Img02"></a><font color="#00FF00"><span id="div1">'.$thumbsu.'</span></font> ]';

et page.php:

Code :

1
2
3
4
5
6
7
8
9
10
11
 
$thumbsu = $_GET['thumbsu'];
echo $thumbsu.'<br>';
 
$idc = $_GET['idc'];
echo $idc.'<br>';
 
$increment = $thumbsu + 1; 
 
$update = 'UPDATE comments SET thumbsu = "'.$increment.'" WHERE idc = "'.$idc.'"';
$query = mysql_query($update) OR DIE (mysql_error());

[andry.aime]

responseText mais pas response.Text

[isitien]

Envoyé par andry.aime

responseText mais pas response.Text

Y a t il un code a ajouter afin de verifier si les donnees se sont transmises a page.php? ou bien que page.php existe?

[andry.aime]

Re,

Nous sommes sur le forum AJAX, le code HTML généré est appréciable que le code PHP, montre nous le code HTML généré mais pas le php, c'est plus facile à debuguer. Car, je pense que la chaine généré est tronqué à cet endroit.

echo '[ <a href="#" onclick="ajax(\'page.php?thumbsu=up&idc="'.$idc.'"\',\'div1\')" class="Link02"><img src="'.$path2icons.'thumbs_up.png" align="absmiddle" class="Img02"></a><font color="#00FF00"><span id="div1">'.$thumbsu.'</span></font> ]';

Code php :

echo '[ <a href="#" onclick="ajax(\'page.php?thumbsu=up&idc='.$idc.'\',\'div1\')" class="Link02"><img src="'.$path2icons.'thumbs_up.png" align="absmiddle" class="Img02"></a><font color="#00FF00"><span id="div1">'.$thumbsu.'</span></font> ]';

A+.

[isitien]

voila le code de la page php:

Code :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<?php
$menu = $_GET['menu'];
 
$select_com = 'SELECT * from comments WHERE idcat = 4 AND id_cl = "'.$menu.'"';
$result_com = mysql_query ($select_com) or die ('Erreur de selection de commentaires: ' .mysql_error());
$total_com = mysql_num_rows($result_com);
 
	echo 'total: '.$total_com;
	echo '<br>';
 
 
if($total_com) {  
 
        	while ($row_com = mysql_fetch_array($result_com))
	{  
       extract($row_com);
 
 
       for ($i = 1; $i <= $total_com; $i++)
    {
        //echo '<b>'.$i.'</b><br>';
 
        $msg_num = '<a href="'.$rub.'-'.$srub.'-'.$cat.'-'.$scat.'-play'.$menu.'.html#'.$idc.'">'.$i.' #</a>';
    }
 
$select_nick = 'SELECT * from members WHERE idm = "'.$id_pseudo.'"';
$result_nick = mysql_query ($select_nick) or die ('Erreur de selection de commentaires: ' .mysql_error());
$row_nick = mysql_fetch_array($result_nick);
 
extract($row_nick);
 
    $country_code = $country;
 
	$select_cou = "SELECT * FROM countries WHERE code='$country_code'";
	$result_cou = mysql_query ($select_cou) or die ('Erreur de selection des pays: ' .mysql_error());
	$row_cou = mysql_fetch_array($result_cou);
 
	$country = $row_cou['country'];
	$code = $row_cou['code'];
 
			$color = ($total_com % 2) ? $bgcolor1 : $bgcolor2 ;
 
 
 
		$number = array (1, 2);
		$picture_en = array('male', 'female');
 
 
		$gender_en = str_replace ($number, $picture_en, $gender);
		$date_posted = date('Y-m-d', $date_posted);
        $time_posted = date('G:i:s', $date_posted);
 
		//echo '<a name="'.$idc.'">';
		echo '<table width="600" border="0" cellpadding="0">';
		echo '<tr bgcolor="#e0dace">';
        echo '<td width="200" align="right">';
        echo $msg_num;
        echo '&nbsp;&nbsp;';
 
        echo '[ <a href="#" onclick="ajax(\'page.php?thumbsu=up&idc='.$idc.'\',\'div1\')" class="Link02"><img src="'.$path2icons.'thumbs_up.png" align="absmiddle" class="Img02"></a><font color="#00FF00"><span id="div1">'.$thumbsu.'</span></font> ]';
 
        echo '&nbsp;&nbsp;';
 
        echo '<img src="'.$path2flags.'Shadow/'.$code.'.png" title="'.$country.'" align="absmiddle">';
 
        echo '&nbsp;&nbsp;';
 
        echo '<img src="'.$path2icons.$gender_en.'.png" title="'.$gender_en.'" align="absmiddle" class="Img02">';
        echo '&nbsp;';
        echo $pseudo;
 
        echo '</td></tr>';
        echo '</table>';
   $total_com++;
 
	}
 
	echo '<hr width="400">';
 
 
}
				else
				{
					echo 'Aucun commentaire';
				}		
 
 
?>

le code JS:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<script type="text/javascript">
function ajax(page,divAMettreAJour){
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(divAMettreAJour).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",page,true);
xmlhttp.send();
}
}
</script>

et le code page.php:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
$thumbsu = $_GET['thumbsu'];
echo $thumbsu.'<br>';
 
$idc = $_GET['idc'];
echo $idc.'<br>';
 
$increment = $thumbsu + 1; 
 
$update = 'UPDATE comments SET thumbsu = "'.$increment.'" WHERE idc = "'.$idc.'"';
$query = mysql_query($update) OR DIE (mysql_error());
?>

Sachant que les pages sont de cette hieararchie:

index.php
rep1/rep2/page.php
rep1/rep2/index.php

A++

[andry.aime]

On a demandé le code HTML généré mais pas le code PHP qui génère la page

[isitien]

Envoyé par andry.aime

On a demandé le code HTML généré mais pas le code PHP qui génère la page

andry.aime: Je vous ai ennerve un peu, mais je n'ai que ces 3 pages, avec du code:

Code :

1
2
3
4
5
 
<html>
<head>
..
</html>

Je vous ai pas bien compris de quel code HTML parlez vous.

[isitien]

Le code source HTML est:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
total comments: 3<br>
<table width="600" border="0" cellpadding="0"><tr bgcolor="#e0dace">
<td width="200" align="right">&nbsp;&nbsp;
<img src="Mes_Images/Flags/Shadow/be.png" title="Belgique" align="absmiddle">&nbsp;&nbsp;
<img src="Mes_Images/Icones/male.png" title="male" align="absmiddle" class="Img02">&nbsp;
Admin</td><td align="center">
<img src="Mes_Images/Icones/calendar.png" align="absmiddle" class="Img02"> 
2011-01-11&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="Mes_Images/Icones/clock.png" align="absmiddle" class="Img02"> 
1:33:31</td><td width="150" align="center">
[ <a href="#" onclick="ajax('page.php?thumbsu=up&idc=1','div1')" class="Link02"><img src="Mes_Images/Icones/thumbs_up.png" align="absmiddle" class="Img02"></a><font color="#00FF00"><span id="div1">0</span></font> ]

[isitien]

Ca marche maintenant pour la premiere div, mais quand je clique il y a l'update de la table, mais le chiffre n'apparaissait pas sur le champs, que lorsque je fais un rafraichissement de page.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
mysql_select_db($db_general) or die ('Erreur de selection de la BD general: '.mysql_error());
$select_com = 'SELECT * from comments WHERE idcat = 4 AND id_cl = "'.$menu.'"';
$result_com = mysql_query ($select_com) or die ('Erreur de selection de commentaires: ' .mysql_error());
$total_com = mysql_num_rows($result_com);
 
while ($row_com = mysql_fetch_assoc($result_com))
	{  
       extract($row_com);
 
echo '[ <a href="#" onclick="ajax(\'page.php?thumbsu=up&number='.$thumbsu.'&idc='.$idc.'\',\'div1\')" class="Link02"><img src="'.$path2icons.'thumbs_up.png" align="absmiddle" class="Img02"></a><font color="#00FF00"><span id="div1">'.$thumbsu.'</span></font> ]';
 
//..
 
}

[isitien]

C'est bien, ca marche, j'ai ajoute la requete sur page.php afin de recuperer les donnees de la table, juste un petit ajout, quand je clique sur le lien, la page monte vers le haut, comme si on clique sur <a href=# target=top>, je dois descendre avec les barres de defilement afin de voir l'incrementation du compteur, comme par exemple ici

voila le code du lien cliquable:

Code :

1
2
 
echo '[ <a href="#" onclick="ajax(\'page.php?thumbs=up&number='.$thumbsu.'&idc='.$idc.'&menu='.$menu.'\',\'div1\')" class="Link02"><img src="'.$path2icons.'thumbs_up.png" align="absmiddle" class="Img02"></a><font color="#00FF00"><span id="div1">'.$thumbsu.'</span></font> ]';

[isitien]

J'ai rencontre un autre probleme:



voila le code de page.php:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php
if ($thumbs == 'up')
{
	$update = 'INSERT INTO thumbs VALUES ("", "'.$idcom.'", "'.$idpseudo.'", "1", "0","'.$ip_visiteur.'", "'.$DateTime.'")';
}
if ($thumbs == 'down')
{
	$update = 'INSERT INTO thumbs VALUES ("", "'.$idcom.'", "'.$idpseudo.'", "0", "1","'.$ip_visiteur.'", "'.$DateTime.'")';
}
 
$query = mysql_query($update) OR DIE (mysql_error());
 
 
$select_com = 'SELECT count(*) FROM thumbs WHERE idcom= "'.$idcom.'"';
//echo $select_com.'<br>';
$result_com = mysql_query ($select_com) or die ('Erreur de selection de commentaires: ' .mysql_error());
$datas = mysql_fetch_array($result_com);
echo $datas[0];  
?>

[isitien]

c'est le cas de ce forum, en bas de mon post il y a "up" et "down", quand je clique sur un commentaire pour le noter, il fait la mise a jour du meme post sur la BD mais il affiche l'incrementation du premier post