Formulaire qui ne fonctionne pas avec ajax

**dancom5** · 03/06/2016, 02h33

Salutations.

Mon code ci-dessous affiche des données de ma base SQL et ça fonctionne parfaitement avec Ajax
sauf que ce que dès que je tente d'ajouter mon formulaire pour choisir le nombre de ligne à afficher,
l'information n'arrive pas à load_compteur.php et $_POST['nbrpage'] affiche "undefined" sans interagir avec la variable du nombre de ligne dans load_compteur.php.

Pourtant var dataString avec page_id='+ page_id tout seul fonctionne bien mais si j'ajoute le reste, rien ne va plus.

Quelque chose manque ou n'est pas correcte?

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
<script type="text/javascript">
        $(document).ready(function(){
            change_page('0');
        });
        function change_page(page_id){
                 $(".flash").show();
                 $(".flash").fadeIn(400).html('Loading <img src="load_compteur.gif" />');
 
                 var nbrpage = $("#nbrpage").val();
                 var dataString = 'page_id='+ page_id + '&nbrpage=' + nbrpage;
                 $.ajax({
                             type: "POST",
                             url: "load_compteur.php",
                             data: dataString,
                             cache: false,
                             success: function(result){
                                 $(".flash").hide();
                                 $("#page_data").html(result);
                             }
                    });
        }
</script>
 
    <form>
      <input type="text" value="" id="nbrpage" name="nbrpage" />
      <input type="submit" />
    </form>
 
  <div class='web'>
    <div id="page_data"></div>
    <span class="flash"></span>
  </div>

**EddiGordo** · 03/06/2016, 09h27

Le fonctionnement normal du submit d'un formulaire c'est le rechargement de la page.
Ce n'est pas ce que tu veux.

Remplace donc ton formulaire par une zone input texte et un bouton, par exemple :

Code html :

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

1
2
	<input type="text" value="" id="nbrpage" name="nbrpage"/>
	<button id="myButton">Cliquez ici</button>

à la place de :

Code html :

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

1
2
3
4
    <form>
      <input type="text" value="" id="nbrpage" name="nbrpage" />
      <input type="submit" />
    </form>

Ajoute ensuite un écouteur jQuery qui gérera le clic sur le bouton en appelant ton ajax, par exemple remplace :

Code :

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

1
2
3
4
 
        $(document).ready(function(){
            change_page('0');
        });

par

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	        $(document).ready(function(){
	            change_page('0');
	            $('#myButton')
	            	.on (
	            		'click',
	            		function (e)
	            		{
	            			change_page($('#nbrpage').val());
	            		}
	            	);
	        });

C'est un exemple, adapte tout ça pour parvenir à tes fins.

**dancom5** · 03/06/2016, 09h58

Oui, merci.

J'ai fais les changement, ~~la page se load sans refresh comme il se doit.~~
Finalement, ça n'a pas l'effet ajax.
Mais load_compteur.php ne prends pas l'information.

J'ai mis ceci dans load_compteur.php:

Code php :

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

1
2
3
4
 $nbrpage = !empty($_POST['nbrpage']) ? $_POST['nbrpage'] : 3;
 
 print_r($_REQUEST);
 $records_per_page =     $nbrpage;

Rien ne se passe, aucun print_r qui apparait pour le formulaire sauf mettre 3
comme nombre vu que j'indique de le mettre si y a rien ou si c'est indéfini.

En supposant que mon formulaire se trouve dans index.php. A moins qu'il doit être situé dans load_compteur.php après les modifications?

**EddiGordo** · 03/06/2016, 10h29

J'ai testé un fichier main.php avec :

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
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
		<script type="text/javascript">
	        $(document).ready(function(){
	            change_page('0');
	            $('#myButton')
	            	.on (
	            		'click',
	            		function (e)
	            		{
	            			change_page($('#nbrpage').val());
	            		}
	            	);
	        });
	        function change_page(page_id){
	                 $(".flash").show();
	                 $(".flash").fadeIn(400).html('Loading <img src="load_compteur.jpg" />');
 
	                 var nbrpage = $("#nbrpage").val();
	                 var dataString = 'page_id='+ page_id + '&nbrpage=' + nbrpage;
	                 $.ajax({
	                             type: "POST",
	                             url: "load_compteur.php",
	                             data: dataString,
	                             cache: false,
	                             success: function(result){
	                                 $(".flash").hide();
	                                 $("#page_data").html(result);
	                             }
	                    });
	        }
		</script>
 	</head>
 	<body>
		<input type="text" value="" id="nbrpage" name="nbrpage"/>
		<button id="myButton">Cliquez ici</button>
		<div class='web'>
			<div id="page_data"></div>
			<span class="flash"></span>
		</div>
	</body>
</html>

et un fichier load_compteur.php avec :

Code php :

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

1
2
3
4
5
<?php
	echo json_encode($_POST);
	echo'<br>====='.$_POST['nbrpage'].'=====<br>';
	print_r($_REQUEST);
?>

Et je n'ai pas de problèmes, en cliquant sur le bouton j'ai :

16 CLiquez
{"page_id":"16","nbrpage":"16"}
=====16=====
Array ( [page_id] => 16 [nbrpage] => 16 )

Sauf si je n'ai pas compris ta demande...

**dancom5** · 03/06/2016, 11h00

Je dois avoir un conflit avec mon contenu dans ce cas, je soumets pour m'aider à debuguer.

Si je décidais ne pas ajouter un formulaire pour faire afficher le nombre de ligne, ça marcherait parfaitement.
J'ai besoin que le visiteur puisse décider d'afficher le nombre de ligne à afficher.
Si j'affiche 3 lignes, le triage se fait sur 3 lignes et non l'ensemble. C'est pour ça que je veux permettre au
visiteur un nombre de ligne à afficher et c'est la raison du formulaire.

Mon index.php:

Code html :

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>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="content-language" content="fr">
 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
 
<style>
        .web { font-family:tahoma;size:12px;top:10%;border:1px solid #CDCDCD; padding:10px; border-radius:1.2em }
        .result { color:#FF0000 }
        h1 { margin:3px 0;font-size:13px;text-decoration:underline }
        div.pagination { padding: 3px;margin: 3px;text-align:center;font-family:tahoma;font-size:1.2em; margin-top:12px }
        div.pagination a { padding: 2px 5px 2px 5px;margin: 2px;border: 1px solid #007799;text-decoration: none; /* no underline */color: #006699 }
        div.pagination a:hover, div.digg a:active { border: 1px solid #006699;color: #000 }
        div.pagination span.current { padding: 2px 5px 2px 5px;margin: 2px;border: 1px solid #006699;font-weight: bold;background-color: #006699;color: #FFF }
        div.pagination span.disabled { padding: 2px 5px 2px 5px;margin: 2px;border: 1px solid #EEE;color: #DDD }
 
</style>
 
<script type="text/javascript">
        $(document).ready(function(){
 
                change_page('0');
                $('#myButton')
                    .on (
                        'click',
                        function (e)
                        {
                            change_page($('#nbrpage').val());
                        }
                    );
 
 
 
        });
        function change_page(page_id){
                 $(".flash").show();
                 $(".flash").fadeIn(400).html('Loading <img src="load_compteur.gif" />');
 
                 var dataString = 'page_id=' + page_id;
                 $.ajax({
                             type: "POST",
                             url: "load_compteur.php",
                             data: dataString,
                             cache: false,
                             success: function(result){
                                 $(".flash").hide();
                                 $("#page_data").html(result);
                             }
                    });
        }
</script>
 
</head>
<body>
 
                                <div class='web'>
                                    <div id="page_data"></div>
                                    <span class="flash"></span>
                                </div>
 
                                <form method="POST">
                                    <input type="text" value="" id="nbrpage" name="nbrpage"/>
                                    <button id="myButton">Cliquez ici</button>
                                </form>
 
</body>
</html>

Mon load_compteur.php:

Code php :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<?php
    //DB configuration Constants
    define('_HOST_NAME_', 'localhost');
    define('_USER_NAME_', 'test');
    define('_DB_PASSWORD', 'test');
    define('_DATABASE_NAME_', 'test');
 
    $nbrpage = !empty($_POST['nbrpage']) ? $_POST['nbrpage'] : 3;
 
  print_r($_REQUEST);
  $records_per_page =     $nbrpage;
 
    //PDO Database Connection
    try {
        $databaseConnection = new PDO('mysql:host='._HOST_NAME_.';dbname='._DATABASE_NAME_, _USER_NAME_, _DB_PASSWORD);
        $databaseConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
 
    $sqlQuery     = $databaseConnection->query("SELECT * FROM stats_visites");
    $count      = $sqlQuery->rowCount();
 
    $adjacents = 2;
  //$records_per_page = 3;
 
    $page = (int) (isset($_POST['page_id']) ? $_POST['page_id'] : 1);
    $page = ($page == 0 ? 1 : $page);
    $start = ($page-1) * $records_per_page;
 
    $next = $page + 1;
    $prev = $page - 1;
    $last_page = ceil($count/$records_per_page);
    $second_last = $last_page - 1;
 
    $pagination = "";
    if($last_page > 1){
        $pagination .= "<div class='pagination'>";
        if($page > 1)
            $pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>&laquo; First</a>";
        else
            $pagination.= "<span class='disabled'>&laquo; First</span>";
 
        if ($page > 1)
            $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($prev).");'>&laquo; Previous&nbsp;&nbsp;</a>";
        else
            $pagination.= "<span class='disabled'>&laquo; Previous&nbsp;&nbsp;</span>";
 
        if ($last_page < 7 + ($adjacents * 2))
        {
            for ($counter = 1; $counter <= $last_page; $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<span class='current'>$counter</span>";
                else
                    $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";
 
            }
        }
        elseif($last_page > 5 + ($adjacents * 2))
        {
            if($page < 1 + ($adjacents * 2))
            {
                for($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
                {
                    if($counter == $page)
                        $pagination.= "<span class='current'>$counter</span>";
                    else
                        $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";
                }
                $pagination.= "...";
                $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($second_last).");'> $second_last</a>";
                $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>$last_page</a>";
 
           }
           elseif($last_page - ($adjacents * 2) > $page && $page > ($adjacents * 2))
           {
               $pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>1</a>";
               $pagination.= "<a href='javascript:void(0);' onClick='change_page(2);'>2</a>";
               $pagination.= "...";
               for($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
               {
                   if($counter == $page)
                       $pagination.= "<span class='current'>$counter</span>";
                   else
                       $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";
               }
               $pagination.= "..";
               $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($second_last).");'>$second_last</a>";
               $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>$last_page</a>";
           }
           else
           {
               $pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>1</a>";
               $pagination.= "<a href='javascript:void(0);' onClick='change_page(2);'>2</a>";
               $pagination.= "..";
               for($counter = $last_page - (2 + ($adjacents * 2)); $counter <= $last_page; $counter++)
               {
                   if($counter == $page)
                        $pagination.= "<span class='current'>$counter</span>";
                   else
                        $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";
               }
           }
        }
        if($page < $counter - 1)
            $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($next).");'>Next &raquo;</a>";
        else
            $pagination.= "<span class='disabled'>Next &raquo;</span>";
 
        if($page < $last_page)
            $pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>Last &raquo;</a>";
        else
            $pagination.= "<span class='disabled'>Last &raquo;</span>";
 
        $pagination.= "</div>";
    }
 
 
$records     = $databaseConnection->query("SELECT * FROM stats_visites LIMIT $start, $records_per_page");
$count      = $records->rowCount();
 
$total     = $databaseConnection->query("SELECT * FROM stats_visites");
$totalnb     = $total->rowCount();
 
$HTML='';
if($count > 0) {
 
            $HTML.= '<table id="table-a-trier" align="center" cellpadding="3">
                                            <caption>Statistiques de connexions</caption>
                                            <thead>
                                            <th data-sort="int">Date</th> <th data-sort="int">IP</th> <th data-sort="int">Vue</th> <th data-sort="string">Ville | Pays</th> <th>Navigateur | Système | Heure &nbsp; <span style="color:gray">(le dernier du IP affiché)</span></th> <th data-sort="string">ISP</th>
                                            </thead>
                                            <tbody>
                    ';
 
            foreach($records as $v) {
 
            $HTML.= '<tr class="data"><td>' .$v['date_visite']. '</td> <td><a href="http://geomaplookup.net/?ip=' .$v['ip']. '" target="_blank">' .$v['ip']. '</a></td> <td>' .$v['pages_vues']. '</td> <td>' .utf8_encode($v['geoloc']). ' | ' .$v['country_name']. '&nbsp;&nbsp;<img src="/include/png/' .strtolower($v['country_code']). '.png" /></td> <td>' .$v['useragent']. '</td> <td>' .$v['fullhost']. '</td> </tr>';
 
            }
 
            $HTML.= '</tbody></table>';
            $HTML.= 'Il y a <span style="color:blue">' .$totalnb. '</span> adresses IPs d\'enregistrer dans les statistiques.';
 
}
else
{
    $HTML='No Data Found';
}
echo $HTML;
echo $pagination;
 
?>
 
<script src="stupidtable.min.js"></script>
<script>
 $(document).ready(function($) {
  $("#table-a-trier").stupidtable();
 });
</script>

**EddiGordo** · 03/06/2016, 11h13

Je n'ai pas ta base de données, je ne peux pas réellement tester.
Mais essaie en ayant enlevé tes balises form et /form, en gardant juste ton input text et ton bouton pour voir ?

**dancom5** · 03/06/2016, 12h22

J'ai ajouté

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
        $(document).ready(function(){
                change_page('0');
                $('#myButton')
                        .on (
                                'click',
                                function (e)
                                {
                                        change_page($('#nbrpage').val());
                                }
                        );
        });

et

Code :

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

1
2
 var nbrpage = $('#nbrpage').val();
 var dataString = 'page_id=' + page_id + '&nbrpage=' + nbrpage;

Pour donner au final:

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
 
<script type="text/javascript">
 
    $(document).ready(function(){
      change_page('0');
    });
 
        $(document).ready(function(){
                change_page('0');
                $('#myButton')
                        .on (
                                'click',
                                function (e)
                                {
                                        change_page($('#nbrpage').val());
                                }
                        );
        });
 
        function change_page(page_id){
                 $(".flash").show();
                 $(".flash").fadeIn(400).html('Loading <img src="load_compteur.gif" />');
 
                 var nbrpage = $('#nbrpage').val();
                 var dataString = 'page_id=' + page_id + '&nbrpage=' + nbrpage;
                 $.ajax({
                             type: "POST",
                             url: "load_compteur.php",
                             data: dataString,
                             cache: false,
                             success: function(result){
                                 $(".flash").hide();
                                 $("#page_data").html(result);
                             }
                    });
        }
</script>

Mais, si j'ai 13 lignes et que je mets 16, ça va dire qu'il n y a rien dans la base.
Je dois remédier à ça.

Je dois aussi faire afficher automatiquement à partir de la page 1 puisque si je suis à la page 2 alors que j'affiche 13 ligne,
ça va aussi me dire que j'ai rien.

**dancom5** · 03/06/2016, 20h58

Bonjour.

J'ai trouvé une solution qui marche bien et regardez en commentaire ce que j'ai changé:

Quand j'affiche mes ligne de la base, la pagination va être par défaut à 10, information mis dans load_compteur.php.
Si je veux changer le nombre, je choisi via le menu select et ça reload la page pour afficher de nouveau à partir de 1.
Si je veux trier par contre, je choisi tout afficher puisque le nombre de page est en fonction de LIMIT mysql.

Si j'avais une autre façon de faire pour trier tout même si j'ai une pagination, je suis preneur.

Bien merci pour vos interventions qui m'ont éclairées pour la suite.

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
 
<script type="text/javascript">
 
    $(document).ready(function(){
      change_page('0');
    });
 
    $(document).ready(function(){
                $( ".myButton" ).change(function() { // changé click par change
                        location.reload(); // je reload la page, la pagination commence au premier
                });
        });
 
        function change_page(page_id){
                 $(".flash").show();
                 $(".flash").fadeIn(400).html('Loading <img src="load_compteur.gif" />');
 
                 var nbrpage = $('#nbrpage').val();
                 var dataString = 'page_id=' + page_id + '&nbrpage=' + nbrpage;
                 $.ajax({
                             type: "POST",
                             url: "load_compteur.php",
                             data: dataString,
                             cache: false,
                             success: function(result){
                                 $(".flash").hide();
                                 $("#page_data").html(result);
                             }
                    });
        }
</script>
<!-- J'ai fais un SELECT avec onchange en javascript -->
                                        <select id="nbrpage" class="myButton"  name="nbrpage" onchange="change(this.value)">
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="40">40</option>
                                            <option value="80">80</option>
                                            <option value="50000">All</option>
                                        </select>

**NoSmoking** · 04/06/2016, 14h42

Bonjour,
pas tout regardé mais ceci a attiré mon attention

Code :

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

1
2
3
$(document).ready(function(){
    change_page('0');
});

cet appel doit te générer une erreur du type « change_page is not defined », simplement car cette fonction est définie dans un autre scope $(document).ready ..., donc non accessible

**dancom5** · 04/06/2016, 19h26

Bonjour.

C'est pour la pagination dans le fichier load_compteur.php, le 1 que j'ai modifié, c'est pour partir à la page 1 :

Code :

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

$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($second_last).");'>$second_last</a>";

pour répondre à :

Envoyé par NoSmoking

Bonjour,
pas tout regardé mais ceci a attiré mon attention

Code :

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

1
2
3
$(document).ready(function(){
    change_page('0');
});

cet appel doit te générer une erreur du type « change_page is not defined », simplement car cette fonction est définie dans un autre scope $(document).ready ..., donc non accessible

J'ai un peu modifié mais ça reste incompatible avec Chrome. Ça marche bien avec Firefox si je ne mets pas de code de session php.
Mon code de session php, ça aurait été pour se loguer pour l'accès à cette page.

Qu'est-ce qui peut bien ne pas être compatible dans ce code là?
le code jquery:

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
<script type="text/javascript">
        function change_page(page_id){
      "use strict";
 
       $(".flash").show();
       $(".flash").fadeIn(400).html('Loading <img src="load_compteur.gif" />');
 
       var nbritem = $( "select#nbrpage" ).val();
       var dataString = 'page_id=' + page_id + '&nbrpage=' + nbritem;
 
       $.ajax({
             type: "GET",
             url: "load_compteur.php",
             data: dataString,
             cache: false,
             success: function(result){
               $(".flash").hide();
               $("#page_data").html(result);
             }
        });
 
        }
 
    $(document).ready(function(){
        change_page(1);
    });
 
    $(document).ready(function(){
      $( ".myButton" ).change(function() {
          location.reload();
      });
    });
</script>

La seule chose que ça fait avec Chrome quand je choisi le nombre, ça rafraichi la page mais ça ne sélectionne pas le nombre de page.

**dancom5** · 05/06/2016, 22h39

Bonjour.

Pour terminer avec une solution, j'ai remis la balise form avec name.
J'ai aussi modifié la validation de mon formulaire en changeant _POST par _REQUEST.

Maintenant, c'est compatible partout et 100 pourcent fonctionnel.

Formulaire qui ne fonctionne pas avec ajax [AJAX]

jQuery

Discussions similaires

Partager

Partager