[AJAX] Remplacer FORM par des liens AJAX

**dancom5** · 29/05/2013, 04h12

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 html :

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

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 :

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

**andry.aime** · 29/05/2013, 10h31

Bonjour,

Code html :

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

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

A+.

**Bovino** · 29/05/2013, 10h36

Code :

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

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

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

A quoi sert 'javascript:' dans une balise HTML ?

A quoi correspond users ?

A quoi correspond this.url ?

**dancom5** · 29/05/2013, 10h42

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 :

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

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.

**dancom5** · 29/05/2013, 11h13

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

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

**dancom5** · 31/05/2013, 09h17

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 :

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

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

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

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

**andry.aime** · 31/05/2013, 09h28

Code :

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

xmlhttp.send(null);

Code php :

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

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

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

**dancom5** · 31/05/2013, 10h01

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 :

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

?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 :

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
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 php :

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

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

**andry.aime** · 31/05/2013, 10h25

1-

Code :

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

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

[AJAX] Remplacer FORM par des liens AJAX

AJAX

Discussions similaires

Partager

Partager