[AJAX] Remplacer FORM par des liens AJAX

Version imprimable

Bonjour.

Le formulaire fonctionne et me donne le contenu de ma base de données
en passant par AJAX. Mais je souhaite plus utiliser des liens en vu de faire
un menu.

Les liens ne fonctionnent pas et je crois que c'est du coté javascript mon
problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
<a href="" Onclick="JavaScript:users.ShowUser(this.url)" name="peinture">peinture</a>
<a href="" Onclick="JavaScript:users.ShowUser(this.url)" name="dessin">dessin</a>
 
<form action="" method="GET">
    <select name="users" onchange="showUser(this.value)">
        <option value="peinture">peinture</option>
        <option value="dessin">dessin</option>
    </select>
</form>
 
<div id="txtHint"></div>

Mon AJAX incluant me formulaire et les liens:

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
<html>
<head>
<script>
        function showUser(str)
        {
        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("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","pratique4.php?catalog="+str,true);
        xmlhttp.send();
        }
</script>
</head>
<body>
 
        <!-- ?php     // ne sert pas pour le moment:
            $dbh = new PDO("mysql:host=localhost;dbname=philgalerie", 'root', '');
            $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
            $formulaire = $dbh->query("SELECT categorie FROM categorie");
            $formresultat = $formulaire->fetchAll();
            foreach($formresultat as $rowform)
            {
            }
        ?-->
 
<a href="" Onclick="JavaScript:users.ShowUser(this.url)" name="peinture">peinture</a>
<a href="" Onclick="JavaScript:users.ShowUser(this.url)" name="dessin">dessin</a>
 
<form action="" method="GET">
    <select name="users" onchange="showUser(this.value)">
        <option value="peinture">peinture</option>
        <option value="dessin">dessin</option>
    </select>
</form>
 
<div id="txtHint"></div>
 
</body>
</html>

Je veux éliminer le formulaire.

note: j'utilise code sans =html à cause d'un probleme d'affichage dans
mon post.

29/05/2013, 10h31
andry.aime

Bonjour,

Code:

<a href="#" onclick="showUser(this.name)" name="peinture">

A+.
29/05/2013, 10h36
Bovino

Code:

Onclick="JavaScript:users.ShowUser(this.url)"

Dis-moi, c'est un festival cette instruction ! :aie:

:fleche: A quoi sert 'javascript:' dans une balise HTML ?
:fleche: A quoi correspond users ?
:fleche: A quoi correspond this.url ?
29/05/2013, 10h42
dancom5
La partie FORM est le code qui marche bien. La partie url (lien) est une tentative pour remplacer la partie FORM.

Donc, ce sont des essaies que j'ai tenter.

Usuer correspond à name="users" du select du formulaire et (this.url) le url c'est une tentative pour essayer. mais, c'est this.value qui est dans le formulaire.

Je vais essayer ce que je viens de recevoir pour voir.

Oui,oui, ça marche comme ceci :
Code:

1 2 3 <a href="#" onclick="showUser(this.name)" name="peinture">peinture</a> <a href="#" onclick="showUser(this.name)" name="dessin">dessin</a>
merci...

Je dois juste que l'un d'eux soit affiché sans que clique dessus par défaut.

Au final ce que cela me donne, c'est ceci :

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
 
<html>
<head>
<script>
        function showUser(str)
        {
        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("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","pratique4.php?catalog="+str,true);
        xmlhttp.send();
        }
</script>
</head>
<body>
 
<?php
    $dbh = new PDO("mysql:host=localhost;dbname=philgalerie", 'root', '');
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
 
    $formulaire = $dbh->query("SELECT categorie FROM categorie");
    $formresultat = $formulaire->fetchAll();
 
  if (!$formulaire->rowCount() == 0)
  {
            echo '<ul>';
            foreach($formresultat as $rowform)
            {
                echo '<li><a href="#" onclick="showUser(this.name)" name="'.$rowform['categorie'].'">'.ucfirst($rowform['categorie']).'</a></li>';
            }
            echo '</ul><br>';
  }
  else
  {
      echo 'Aucune catégorie trouvée.';
  }
 
?>
<div id="txtHint"><b>Veuillez cliquer sur une catégorie</b></div>
 
</body>
</html>

Il va me rester à mettre une catégorie par défaut ou bien mettre une catégorie aléatoire. Et ensuite placer une pagination. Je laisse ouvert
le topic au cas où.

Bonjour. J'ai réussi à inclure ma pagination mais je suis incapable
de passer un deuxième paramètre dans le ajax, Sans AJAX, ça marche bien mais avec non.

fichier principal contenant ce code:

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 showUser(str,str2)
        {
        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("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","pratique_1.php?catalog="+str+"&page="+str2,true);
        xmlhttp.send();
        }

le deuxième paramètre du fichier PHP:

Code:

echo " <a href=\"?page=$i\">$i</a> ";

J'ai tenté quelque chose mais ça ne fonctionne pas.

31/05/2013, 09h28
andry.aime

Code:

xmlhttp.send(null);

Citation:

Code:

echo " <a href=\"?page=$i\">$i</a> ";

Tu n'appelles même pas la fonction dans ton lien :no:

OK, j'ai modifié le AJAX pour ceci :

Voici ce qui se passe.

Quand je clique sur les no de page, ça va bien changer la page
mais je dois absolument cliquer à nouveau sur le menu de la page
pour faire apparaitre la page.

Si j'enleve à pratique_1.php

Code:

?page=$i

ça
va pas fonctionner. si je le laisse, ça va ajouter un paramètre
dans le url du fichier ajax alors que c'est supposé ne rien avoir.

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
function showUser(str)
{
        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("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","pratique_1.php?catalog="+str + "&page=" + <?php echo $_GET['page']; ?> ,true);
        xmlhttp.send(null);
}

et le fichier appelé par AJAX pratique_1.php:

Code:

1
2
3
4
5
6
7
8
9
echo '<p>[ Page :';
// Boucle sur les pages
for ($i = 1 ; $i <= $nb_pages ; $i++) {
    if ($i == $page )
        echo " $i";
    else
        echo " <a href=\"?page=$i\">$i</a> ";
}
echo ' ]</p>';

31/05/2013, 10h25
andry.aime

1-

Citation:

Code:

xmlhttp.open("GET","pratique_1.php?catalog="+str + "&page=" + <?php echo $_GET['page']; ?> ,true);

Php s'exécute coté serveur et javascript coté client, donc à ne pas mélanger.
2- Tu dois aussi tester dans le onreadystatechange si le status n'est pas à 200 ou 0, en cas d'erreur.

3- Tu ne nous montre pas comment tu appelles la fonction (page html généré).

A+.