Mise à jour Datables avec input style text

**f4gqk** · 22/09/2017, 21h56

Bonsoir,

J'ai deux colonnes qui se mettent à jour selon la latitude et une longitude. A démarrage de la page, j'ai une latitude et longitude par défaut ( La tour Eiffel )

Je souhaite à mettre à jour soit lors que je clique sur un bouton ou automatiquement quand je modifie l'input style text en temps réel pour que la latitude ou longitude modifie les colonnes azimut et distance de mon site.

www.relais-radio.fr/liste2.php

Voici une partie de mon 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
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
 
 
$query ="SELECT * FROM liste ORDER BY indicatif ASC";  
 $result = mysqli_query($connect, $query);  
$LatA = "48.858383"; 
$LonA = "2.294518"; 
 
 ?> 
 
 
 <!DOCTYPE html>  
 <html>  
      <head> 
 
 
           <title>Liste des relais radioamateurs en France</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
           <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
 <script src="https:////cdn.datatables.net/plug-ins/1.10.15/i18n/French.json"></script>           
           <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />  
      </head>  
 
      <body>  
           <br /><br />  
 
 
 
<table width="1500" >
  <tbody>
    <h2>
    <table bgcolor="#DCDCDC">
<table bordercolor="#FF8C00" >
    <td width="96"><a href="index.html"> <center><font face="Century Gothic" ><FONT size="4">Accueil</a></td>
    <td width="188"><a href="liste.php"><center><font face="Century Gothic" ><FONT size="4">Liste des relais</a></td>
      <td width="181"><center><font face="Century Gothic" ><FONT size="4">Relais</a></td>
  <td width="200"><center><font face="Century Gothic" ><FONT size="4"></a></td>
</h2>
</table>
       <br /><br />    
 
<div class="container">  
                <h3 align="center">Liste des relais radioamateurs en France</h3>  
                <br />  
                <div class="table-responsive">  
                     <table id="liste2" class="table table-striped table-bordered">  
                          <thead>  
                               <tr>  
 
<td>Indicatif</td>  
                                    <td>Ville</td>  
                                    <td>Département</td>  
                                    <td>Fréquence</td>  
				<td>Offset</td>
                                    <td>Technologie</td>
<td>Distance </td>
<td>Azimut</td>
 
                               </tr>  
                          </thead>  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Latitude : <input style="font-size:14px" type="text"   value="<?php echo $LatA;?>">
Longitude : <input style="font-size:14px" type="text"   value="<?php echo $LonA;?>">
<br /><br />  
 
 
 
 
 
<?php
 
                          while($row = mysqli_fetch_array($result))
                          { 
$distance=round(6378*acos(sin($LatA*PI()/180)*sin(($row['latitude']+0.0001)*pi()/180)+cos($LatA*pi()/180)*cos(($row['latitude']+0.0001)*pi()/180)*cos((($row['longitude']+0.00001)*pi()/180)-($LonA*PI()/180))));
$Angle=-atan((cos(($LonA*pi()/180)-(($row['longitude']+0.00001)*pi()/180))*sin(pi()/2-(($row['latitude']+0.0001)*pi()/180))*sin(pi()/2-($LatA*pi()/180))+cos(pi()/2-(($row['latitude']+0.0001)*pi()/180))*cos(pi()/2-($LatA*pi()/180)))/sqrt(1-(cos(($LonA*pi()/180)-(($row['longitude']+0.00001)*pi()/180))*sin(pi()/2-(($row['latitude']+0.0001)*pi()/180))*sin(pi()/2-($LatA*pi()/180))+cos(pi()/2-(($row['latitude']+0.0001)*pi()/180))*cos(pi()/2-($LatA*pi()/180)))*(cos(($LonA*pi()/180)-(($row['longitude']+0.00001)*pi()/180))*sin(pi()/2-(($row['latitude']+0.0001)*pi()/180))*sin(pi()/2-($LatA*pi()/180))+cos(pi()/2-(($row['latitude']+0.0001)*pi()/180))*cos(pi()/2-($LatA*pi()/180)))))+pi()/2;
$azimut=round((-ATAN(((SIN((($row['latitude']+0.0001)*PI()/180))-SIN(($LatA*PI()/180))*COS($Angle))/SIN($Angle)/COS(($LatA*PI()/180)))/(SQRT(1-((SIN((($row['latitude']+0.0001)*PI()/180))-SIN(($LatA*PI()/180))*COS($Angle))/SIN($Angle)/COS(($LatA*PI()/180)))*((SIN((($row['latitude']+0.0001)*PI()/180))-SIN(($LatA*PI()/180))*COS($Angle))/SIN($Angle)/COS(($LatA*PI()/180))))))+PI()/2)*180/PI());
 
 
 
if ($row['longitude'] < $LonA)
{
 
}
else
{
 
$azimut=360-$azimut;
}
 
 
 
 
                               echo '  
  
                               <tr>
 
					

                         <td><center><b><a href="index3.php?indicatif='.$row["indicatif"].'">'.$row["indicatif"].'</a></b></td>









                                    <td>'.$row["ville"].'</td>  
                                    <td>'.$row["departement"].'</td>  
                                    <td>'.$row["frequence"].'</td>  
					<td>'.$row["offset"].'</td> 

 <td>'.$row["technologie"].'</td>
                                    

 				
<td>'.$distance.'</td>		
<td>'.$azimut.'</td>


                                     
                               </tr>  
                               ';  
                          }  
                          ?>  
 
                     </table>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function () {
 
 $('#liste2').DataTable({
pageLength: '25',
        language: {
            url: "DataTables/media/French.json"
        }
    });
});
 
</script>

Merci d'avance pour votre aide

Sébastien

**mathieu** · 23/09/2017, 13h34

déjà les balises "input" doivent se trouvent dans des balises "form" pour pouvoir envoyer leur valeur en cliquant sur un bouton

donc essayer comme cela :

Code :

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

1
2
3
4
5
6
7
<form method="GET" action="">
 
Latitude : <input style="font-size:14px" type="text"  name="LatA" value="<?php echo $LatA;?>">
Longitude : <input style="font-size:14px" type="text" name="LonA"  value="<?php echo $LonA;?>">
<input type="submit" value="Recalculer à partir de ce point"/>
 
</form>

ensuite au début du code vous pouvez récupérer les valeurs comme cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
// valeur par défaut au 1er affichage de la page
$LatA = "48.858383"; 
$LonA = "2.294518"; 
 
// si les paramètres de la page sont présents
if (    isset($_GET["LatA"])
    &&  isset($_GET["LonA"])
) {
    $LatA = $_GET["LatA"];
    $LonA = $_GET["LonA"];
}

n'oubliez pas que ces paramètres peuvent contenir n'importe quoi comme par exemple des caractères spéciaux qu'un utilisateur peut mettre pour essayer de pirater votre site
dans ce cas vous utilisez $LatA et $LonA pour faire des calculs donc il n'y a pas de problème. mais gardez cela en tête si par exemple vous construisez une requête SQL avec ces valeurs.

**f4gqk** · 23/09/2017, 21h08

Merci pour ta réponse

Mais quand j'ai modifié les input style et quand je cliques sur le bouton cela change rien.

J'ai laissé comme ça la valeur du bouton

Code :

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

1
2
 
<form method="GET" action="">

il faut juste qu'il me mettent mon tableau à jour. Mais cela fonctionne pas. Je ne sais pas quoi mettre dans ACTION

Merci

**mathieu** · 23/09/2017, 21h24

laissez l'action vide et ça enverra la requête sur la page en cours

est ce que le choix des coordonnées peut être n'importe où ?
ou alors ça sera surtout les coordonnées des emplacements du tableau qui seront utilisées ?

**f4gqk** · 23/09/2017, 21h42

Cela peut être n'importe quelle valeur dans la latitude et longitude

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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
// Change character set to utf8
mysqli_set_charset($connect,"utf8");


 $query ="SELECT * FROM liste ORDER BY indicatif ASC";  
 $result = mysqli_query($connect, $query);  


 ?> 
 
<?php  
 // valeur par défaut au 1er affichage de la page
$LatA = "48.858383"; 
$LonA = "2.294518"; 
 
// si les paramètres de la page sont présents
if (    isset($_GET["LatA"])
    &&  isset($_GET["LonA"])
) {
    $LatA = $_GET["LatA"];
    $LonA = $_GET["LonA"];
} ?> 


 <!DOCTYPE html>  
 <html>  
      <head> 

  
           <title>Liste des relais radioamateurs en France</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
           <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
<script src="https:////cdn.datatables.net/plug-ins/1.10.16/api/fnReloadAjax.js"></script>  

 <script src="https:////cdn.datatables.net/plug-ins/1.10.15/i18n/French.json"></script>           
           <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />  
      </head>  

      <body>  
           <br /><br />  



<table width="1500" >
  <tbody>
    <h2>
    <table bgcolor="#DCDCDC">
<table bordercolor="#FF8C00" >
    <td width="96"><a href="index.html"> <center><font face="Century Gothic" ><FONT size="4">Accueil</a></td>
    <td width="188"><a href="liste.php"><center><font face="Century Gothic" ><FONT size="4">Liste des relais</a></td>
      <td width="181"><center><font face="Century Gothic" ><FONT size="4">Relais</a></td>
  <td width="200"><center><font face="Century Gothic" ><FONT size="4"></a></td>
</h2>
</table>
       <br /><br />    
        
<div class="container">  
                <h3 align="center">Liste des relais radioamateurs en France</h3>  
                <br />  
                <div class="table-responsive">  
                     <table id="liste2" class="table table-striped table-bordered">  
                          <thead>  
                               <tr>  
                                
<td>Indicatif</td>  
                                    <td>Ville</td>  
                                    <td>Département</td>  
                                    <td>Fréquence</td>  
				<td>Offset</td>
                                    <td>Technologie</td>
<td>Distance </td>
<td>Azimut</td>
 				 
                               </tr>  
                          </thead>  
                          











  



<br /><br />  









<form method="GET" action="">

Latitude : <input style="font-size:14px" type="text"  name="LatA" value="<?php echo $LatA;?>">
Longitude : <input style="font-size:14px" type="text" name="LonA"  value="<?php echo $LonA;?>">
<br /><br />  
<input type="submit" value="Recalculer à partir de ce point"/>
</form>
<br /><br /> 


<?php

                          while($row = mysqli_fetch_array($result))
                          { 
$distance=round(6378*acos(sin($LatA*PI()/180)*sin(($row['latitude']+0.0001)*pi()/180)+cos($LatA*pi()/180)*cos(($row['latitude']+0.0001)*pi()/180)*cos((($row['longitude']+0.00001)*pi()/180)-($LonA*PI()/180))));
$Angle=-atan((cos(($LonA*pi()/180)-(($row['longitude']+0.00001)*pi()/180))*sin(pi()/2-(($row['latitude']+0.0001)*pi()/180))*sin(pi()/2-($LatA*pi()/180))+cos(pi()/2-(($row['latitude']+0.0001)*pi()/180))*cos(pi()/2-($LatA*pi()/180)))/sqrt(1-(cos(($LonA*pi()/180)-(($row['longitude']+0.00001)*pi()/180))*sin(pi()/2-(($row['latitude']+0.0001)*pi()/180))*sin(pi()/2-($LatA*pi()/180))+cos(pi()/2-(($row['latitude']+0.0001)*pi()/180))*cos(pi()/2-($LatA*pi()/180)))*(cos(($LonA*pi()/180)-(($row['longitude']+0.00001)*pi()/180))*sin(pi()/2-(($row['latitude']+0.0001)*pi()/180))*sin(pi()/2-($LatA*pi()/180))+cos(pi()/2-(($row['latitude']+0.0001)*pi()/180))*cos(pi()/2-($LatA*pi()/180)))))+pi()/2;
$azimut=round((-ATAN(((SIN((($row['latitude']+0.0001)*PI()/180))-SIN(($LatA*PI()/180))*COS($Angle))/SIN($Angle)/COS(($LatA*PI()/180)))/(SQRT(1-((SIN((($row['latitude']+0.0001)*PI()/180))-SIN(($LatA*PI()/180))*COS($Angle))/SIN($Angle)/COS(($LatA*PI()/180)))*((SIN((($row['latitude']+0.0001)*PI()/180))-SIN(($LatA*PI()/180))*COS($Angle))/SIN($Angle)/COS(($LatA*PI()/180))))))+PI()/2)*180/PI());



if ($row['longitude'] < $LonA)
{

}
else
{

$azimut=360-$azimut;
}




                               echo '  
  
                               <tr>
 
					

                         <td><center><b><a href="index3.php?indicatif='.$row["indicatif"].'">'.$row["indicatif"].'</a></b></td>









                                    <td>'.$row["ville"].'</td>  
                                    <td>'.$row["departement"].'</td>  
                                    <td>'.$row["frequence"].'</td>  
					<td>'.$row["offset"].'</td> 

 <td>'.$row["technologie"].'</td>
                                    

 				
<td>'.$distance.'</td>		
<td>'.$azimut.'</td>


                                     
                               </tr>  
                               ';  
                          }  
                          ?>  
 
                     </table>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function () {
   
 $('#liste2').DataTable({
pageLength: '25',
        language: {
            url: "DataTables/media/French.json"
        }
    });
});

</script>

Malgré ça mon tableau ne se met pas à jour. Peut être refaire la même commande à l'initialisation.

Merci

**mathieu** · 23/09/2017, 21h56

il y a des soucis de balises "table" en double pour le menu qui font que le formulaire ne peux pas s'envoyer

mais ensuite la récupération des paramètres fonctionne si vous allez à l'adresse "liste2.php?LatA=40&LonA=15" par exemple

**f4gqk** · 23/09/2017, 22h07

Comment vous voyez qu'elles sont en doubles ?

A quel endroit ?

Merci pour votre astuce

**f4gqk** · 23/09/2017, 22h19

Merci j'ai trouvé .

Sujet résolu.

Milles merci

**mathieu** · 23/09/2017, 23h12

j'ai eu quelques idées d'ajouts en voyant votre page :

sur chaque ligne, rajouter une lien vers la page elle même avec les coordonnées de l'endroit de la ligne
mettre une carte qui permet de remplir latitude et longitude en cliquant dessus, cela peut se faire en JavaScript avec Leaflet par exemple : http://leafletjs.com/examples/quick-start/

si vous voulez essayer de mettre cela en place et que vous avez besoin d'aide, ne continuez pas ici mais créez une nouvelle discussion.

**f4gqk** · 23/09/2017, 23h15

Envoyé par mathieu

j'ai eu quelques idées d'ajouts en voyant votre page :

sur chaque ligne, rajouter une lien vers la page elle même avec les coordonnées de l'endroit de la ligne
mettre une carte qui permet de remplir latitude et longitude en cliquant dessus, cela peut se faire en JavaScript avec Leaflet par exemple : http://leafletjs.com/examples/quick-start/

si vous voulez essayer de mettre cela en place et que vous avez besoin d'aide, ne continuez pas ici mais créez une nouvelle discussion.

Pour le premier cas, cela fonctionne déja. Pour le reste, pourquoi pas.

Merci

**mathieu** · 23/09/2017, 23h45

je parlais de faire un lien vers liste2.php. par exemple à la ligne de F1ZAV, rajouter un lien vers "liste2.php?LatA=47.62399&LonA=3.41380"

Mise à jour Datables avec input style text

PHP & Base de données

Discussions similaires

Partager

Partager