[AJAX] Combiner des fonctions Ajax

Version imprimable

17/01/2011, 05h48
isitien

[AJAX] Combiner des fonctions Ajax
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
17/01/2011, 06h37
andry.aime

Bonjour,

Citation:

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+.
17/01/2011, 06h55
isitien

Citation:

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:

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

quelque chose du genre

Code:

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);
...
}

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

18/01/2011, 03h48
andry.aime
Citation:
Envoyé par isitien

Code:

1 2 3 4 5 if (str=="") { document.getElementById("txtHint").innerHTML=""; return; }
:koi:

Citation:

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+.
18/01/2011, 05h27
isitien
Citation:

Envoyé par andry.aime

:koi:
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;
18/01/2011, 12h21
andry.aime

Code:

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

Désolé pour l'étourderie :aie:.

Citation:

Envoyé par andry.aime

Code:

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

Désolé pour l'étourderie :aie:.

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());

19/01/2011, 04h30
andry.aime

responseText mais pas response.Text
19/01/2011, 05h14
isitien

Citation:

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?
19/01/2011, 06h21
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.

Citation:

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:

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+.

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++

19/01/2011, 11h50
andry.aime

On a demandé le code HTML généré mais pas le code PHP qui génère la page :massacre:
20/01/2011, 09h24
isitien
Citation:

Envoyé par andry.aime

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

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.

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> ]

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> ]';
 
//..
 
}

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> ]';

J'ai rencontre un autre probleme:

http://img842.imageshack.us/img842/7052/thumbs.png

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];  
?>

22/01/2011, 11h08
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