Activer les fonctions lors du chargement depages web

Résolu/Fermé
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - 7 févr. 2017 à 10:04
hcp7kuz Messages postés 243 Date d'inscription mardi 18 août 2015 Statut Membre Dernière intervention 23 mars 2019 - 2 mars 2017 à 12:36
Bonjour,
J'ai une page web qui exécute une fonction javascript, mon problème c'est que cette fonction ne s'exécute pas automatiquement lors du chargement de la page, elle s'exécute après que j'actualise ma page une fois.
Je veux que ma page exécute automatiquement ma fonction javascript lors de son chargement (sans avoir besoin -de l'actualiser pour faire fonctionner la fonction javascript
PS: J'ai essayé de charger ma fonction dans la balise <body> en se servant de la fonction onload (<body onload="maFonction()">) mais ça n'a rien changé :(
J'ai même essayé d'ajouter un script vers la fin de ma page

<script>
body.addEventListener("load", AfficherClientsAProximite());
</script>

J'ai essayé ceci juste après la fonction , dans le même script :
window.onload = AfficherClientsAProximite;
Toujours en vain
Pouvez vous me proposer une solution svp?
Je poste mon code :

<?php
include("connect.php");
$Code_Equipe=$_GET['id'];
$current_date=date('Y-m-j');
$nbOT=0;
$choix=4;
$etat="";
?>
<!DOCTYPE html>
<html>
<style>
#mapDiv {
width:700px;
height:500px;
border:1px solid #efefef;
margin:auto;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSA</title>
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/main-style.css" rel="stylesheet" />
<link href="assets/plugins/morris/morris-0.4.3.min.css" rel="stylesheet" />
<script src=""quot;https://maps.googleapis.com/maps/api/js?key=AIzaSyDm85_icmgwRYEITWUiNSghvz30CZnB6NQ&language=fr" type="text/javascript"></script>
<?php
$tab_Cli_temp=array();
$sql = "select CClient, RaisonSociale from GP_OrdredeTravail where CSousTraitant='$Code_Equipe' and DatePlanification='$current_date' ";
$stmt = sqlsrv_query( $conn, $sql );
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) )
{
$sql_gps_cli="select Longitude, Latitude from Client where CClient='$row[0]' ";
$stmt_gps_cli=sqlsrv_query($conn,$sql_gps_cli);
while ($rslt_gps_cli=sqlsrv_fetch_array($stmt_gps_cli, SQLSRV_FETCH_NUMERIC))
{
if($rslt_gps_cli[0]!=null)
{
$lgt=$rslt_gps_cli[0];
}
else
{
$lgt=0;
}
// echo "<br> Longitude : ".$lgt;
if($rslt_gps_cli[1]!=null)
{
$ltt=$rslt_gps_cli[1];
}
else
{
$ltt=0;
}
//echo "<br> Latitude : ".$ltt;
$ligne=$lgt." | ".$ltt;
array_push($tab_Cli_temp, $ligne);
}
}
//var_dump($tab_Cli_temp);
// print_r($tab_Cli_temp);
?>
<script type="text/javascript">
function maPosition(position)
{ var Latitude = position.coords.latitude ;
var Longitude=position.coords.longitude;
document.getElementById("malatitude").value=Latitude;
document.getElementById("malongitude").value=Longitude;
}
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(maPosition);
</script>
<script>
if(navigator.geolocation)
{
function hasPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
myOptions = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
// Envoi de la carte dans la div
mapDiv = document.getElementById("mapDiv"),
map = new google.maps.Map(mapDiv, myOptions),
marker = new google.maps.Marker({
position: point,
map: map,
title: "Vous êtes ici"
});
}
navigator.geolocation.getCurrentPosition(hasPosition);
}
</script>

<script type="text/javascript">
function volOiseau(lat1, lon1, lat2, lon2) /* Return float. Unit is the metter */
{
if(parseFloat(lat1) != lat1 || parseFloat(lon1) != lon1 || parseFloat(lat2) != lat2 || parseFloat(lon1) != lon1)
throw("Error params. Only float value accepted.");

if(lat1 < 0 || lat1 > 90 || lat2 < 0 || lat2 > 90)
throw("Error params. The params lat1 and lat2 must be 0< ? <90. Here lat1 = "+lat1+" and lat2 = "+lat2);
if(lon1 < -180 || lon1 > 180 || lon2 < -180 || lon2 > 180)
throw("Error params. The params lon1 and lon2 must be -180< ? <180. Here lon1 = "+lon1+" and lon2 = "+lon2);

a = Math.PI / 180;
lat1 = lat1 * a;
lat2 = lat2 * a;
lon1 = lon1 * a;
lon2 = lon2 * a;

t1 = Math.sin(lat1) * Math.sin(lat2);
t2 = Math.cos(lat1) * Math.cos(lat2);
t3 = Math.cos(lon1 - lon2);
t4 = t2 * t3;
t5 = t1 + t4;
rad_dist = Math.atan(-t5/Math.sqrt(-t5 * t5 +1)) + 2 * Math.atan(1);

var dstm=(rad_dist * 3437.74677 * 1.1508) * 1.6093470878864446 * 1000;
var distkm=dstm / 1000;
return distkm.toFixed(3);
}
</script>


<script type="text/javascript">
var tab_Clients=<?php echo json_encode($tab_Cli_temp); ?> ;
function AfficherClientsAProximite()
{ var tab_distance=[];
var ltt=document.getElementById("malatitude").value;
var lgt=document.getElementById("malongitude").value;
//alert("Ma Latitude : "+ltt);
//alert("Ma longitude : "+lgt);
for (var i = 0; i < tab_Clients.length; i++)
{ var splits= (tab_Clients[i]).split(" | ",2);
//alert("Latitude Client : "+splits[1]);
//alert("Longitude client :"+splits[0]);
var ltt_cli=splits[1];
var lgt_cli=splits[0];
if ((ltt_cli==0) && (lgt_cli==0))
tab_distance[i]=0;
else
{
var dist=volOiseau(ltt,lgt,ltt_cli,lgt_cli);
//alert(dist);
tab_distance[i]=dist;
}
}
return tab_distance;
}
//window.onload = AfficherClientsAProximite;
</script>

</head>
<!--<body onload="AfficherClientsAProximite()">-->
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src=""quot;assets/img/logo3.jpeg" alt="" />
<img src=""quot;assets/img/slide.jpeg" alt="" />
<img src=""quot;assets/img/d1.jpeg" alt="" />
<img src=""quot;assets/img/d3.jpeg" alt="" />
<img src=""quot;assets/img/d8.jpeg" alt="" />
<img src=""quot;assets/img/d44.jpeg" alt="" />
<img src=""quot;assets/img/d6.jpeg" alt="" />
</div>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<ul class="dropdown-menu dropdown-messages">
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank"> <div> </div> </a> </li>
<li class="divider"></li> <li> </li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="nofollow noopener noreferrer" target="_blank"> </a></li>
<li class="dropdown"> <ul class="dropdown-menu dropdown-alerts"><li> <a href="#" rel="nofollow noopener noreferrer" target="_blank"> </a></li> </ul></li>
<li class="dropdown"> </li>
</ul>
</nav>
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li>
<div class="user-section">
<div class="user-section-inner"><img src=""quot;assets/img/user.jpg" alt=""></div>
<div class="user-info">
<div> <strong>
<?php
$Code_Responsable="";
$param_ceq=array(
array($Code_Equipe,SQLSRV_PARAM_IN)
);
$stmt_code_responsable=sqlsrv_query($conn,'{CALL Code_Responsable(?)}',$param_ceq);
$rslt_code_responsable=sqlsrv_fetch_array($stmt_code_responsable, SQLSRV_FETCH_NUMERIC);
$Code_Responsable=implode($Code_Responsable, $rslt_code_responsable);
$NomResponsable="";

$param_code_resp=array(
array($Code_Responsable,SQLSRV_PARAM_IN)
);
$stmt_Responsable=sqlsrv_query($conn,'{CALL NomPrenom_Employe(?)}',$param_code_resp );
$rslt_Responsable=sqlsrv_fetch_array($stmt_Responsable, SQLSRV_FETCH_NUMERIC);
$NomResponsable=implode($NomResponsable, $rslt_Responsable);
echo $NomResponsable;

?>
</strong></div>
<div class="user-text-online"><span class="user-circle-online btn btn-success btn-circle "></span> Online</div>
</div>
</div>
</li>
<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-dashboard fa-fw"></i>Liste Des OT Planifiés</a> </li>
<li><a href="InterventionsEnCours.php?id=<?php echo $Code_Equipe; ?>"><i class="fa fa-wrench fa-fw"></i>Interventions En Cours</a> </li>
<li> <a href="InterventionsValidees.php?id=<?php echo $Code_Equipe; ?>"><i class="fa fa-table fa-fw"></i>Interventions Validées</a> </li>
<li><a href="Logout.php" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-sign-out fa-fw"></i>Logout</a> </li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row"> <div class="col-lg-12"> <h1 class="page-header">Liste des OT Planifiés</h1> </div></div>
<div class="row"></div>
<div class="row">
<div class="col-lg-8">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i>Liste des OT Planifiés
<div class="pull-right"> <div class="btn-group"> <ul class="dropdown-menu pull-right" role="menu"> </ul> </div> </div>
</div>
<input type="hidden" name="malatitude" id="malatitude">
<input type="hidden" name="malongitude" id="malongitude">
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>N° OT</th>
<th>Date</th>
<th>Client</th>
<th>Distance (KM)</th>
<th> Etat </th>
</tr>
</thead>
<?php
$sql = "select NOrdredeTravail,DatePlanification,RaisonSociale,CClient from GP_OrdredeTravail
where CSousTraitant='$Code_Equipe' and DatePlanification='$current_date'";
$stmt = sqlsrv_query( $conn, $sql );
$nl=0;
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) )
{
$nbOT++;
?>
<tbody>
<?php
$ot_com="";
$lk= $Code_Equipe.$row[0];
$num_ordre_de_travail=$row[0];
$sql_ot_commence="select NRattachement from GP_Rattachement where NOrdredeTravail='$num_ordre_de_travail' ";
$stmt_ot_commence=sqlsrv_query($conn, $sql_ot_commence);
$rslt_ot_commence=sqlsrv_fetch_array($stmt_ot_commence, SQLSRV_FETCH_NUMERIC);
if($rslt_ot_commence!== NULL)
{
$ot_commence=implode($ot_com, $rslt_ot_commence);
}
else
{
$ot_commence=0;
}

?>
<?php
$sql_valid_ot="select * from GP_Rattachement where NOrdredeTravail='$num_ordre_de_travail' ";
$stmt_valid_ot=sqlsrv_query($conn,$sql_valid_ot);
$rslt_valid_ot=sqlsrv_fetch_array($stmt_valid_ot, SQLSRV_FETCH_NUMERIC);
if($rslt_valid_ot===NULL)
//echo "En attente";
$etat="En attente";
else
{
if($rslt_valid_ot[39]===0)
//echo "En Cours";
{
$etat="En Cours";
$num_rattachement=$rslt_valid_ot[0];
}
else
{
//echo "Validé";
$etat="Validé";
$num_rattachement=$rslt_valid_ot[0];
}
}

$onclick="";
if($ot_commence=== 0)
{
$onclick .= "window.location.replace('EditOT.php?id=$lk')";
}
else
{
if($etat==="En Cours")
{
//$onclick = "alert('OT Déjà commencé'); ";
$lkmodif=$num_ordre_de_travail.$num_rattachement;
$onclick .= "window.location.replace('ModifierIntervention.php?id=$lkmodif')";
}
else
{
//var_dump($num_rattachement);
$lkmodif=$num_ordre_de_travail.$num_rattachement;
//$onclick = "alert('OT Déjà validé'); ";
$onclick .= "window.location.replace('Visualiser.php?id=$lkmodif')";

}
}
?>
<tr onmouseover="this.style.cursor='pointer'" onclick="<?php echo $onclick; ?>">
<td><?php echo $num_ordre_de_travail ?></td>
<td><?php echo date_format($row[1], 'Y-m-d'); ?></td>
<td><?php echo $row[3]." | ".$row[2]; ?></td>
<td class="distance"> </td>
<td> <?php echo $etat;?> </td>
</tr>
<?php
$nl++;
}
sqlsrv_free_stmt( $stmt);
?>
</tbody>
</table>
<script>
// le tableau contenant les distances
var tab_rslt=AfficherClientsAProximite();
// affichage des distances calculées dans la table html
var distanceCells = document.querySelectorAll('td.distance');
for (var i = 0; i < distanceCells.length; i++)
{
distanceCells[i].innerHTML = tab_rslt[i];
}
</script>
<div id="mapDiv"></div>
</div>
</div>
</div>
<!-- <p align="center"> <input type="submit" class="btn btn-primary" name="clientsProximite" id="clientsProximite" value="Clients à proximité"> </p>-->
</div>
</div>
</div>

<div class="col-lg-4">
<div class="panel panel-primary text-center no-boder"></div>
<div class="panel panel-primary text-center no-boder"></div>
<div class="panel panel-primary text-center no-boder"></div>
<div class="panel panel-primary text-center no-boder"></div>
</div>
</div> <div class="row"> <div class="col-lg-4"></div></div> </div> </div>
</div>
<script src=""quot;assets/plugins/jquery-1.10.2.js"></script>
<script src=""quot;assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src=""quot;assets/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src=""quot;assets/plugins/pace/pace.js"></script>
<script src=""quot;assets/scripts/siminta.js"></script>
<script src=""quot;assets/plugins/morris/raphael-2.1.0.min.js"></script>
<script src=""quot;assets/plugins/morris/morris.js"></script>
<script src=""quot;assets/scripts/dashboard-demo.js"></script>
<script>
//body.addEventListener("load", AfficherClientsAProximite());
//window.onload=AfficherClientsAProximite;
</script>
<script type="text/javascript">
AfficherClientsAProximite();
</script>
</body>
</html>



Je vous remercie d'avance



A voir également:

2 réponses

Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 551
Modifié par Nexii le 7/02/2017 à 11:46
Bonjour,

Pour répondre à votre problème, la fonction body OnLoad fonctionne, ce qui ne fonctionne pas c'est sûrement votre code javascript :).

Une autre facon de faire :
<script>
  (function() {
    // code exécuté au chargement de la page
  })();
</script>
0
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017
1 mars 2017 à 17:13
Bonjour Nexii,
Je dois écrire ce script où exactement ? car je l'ai essayé juste après le body le code de la fonction dans un script comme suit :

<body>
<script type="text/javascript">
(function()
{
var Code_Equipe=<?php echo $Code_Equipe; ?>;
var xhr = new XMLHttpRequest();
xhr.open("GET", "ListeOTJournaliere.php?Code_Equipe="+Code_Equipe+"&latOrigin="+latOrigin+"&lngOrigin="+lngOrigin,true);
xhr.send(null);
xhr.onreadystatechange = result;
function result()
{
if((xhr.status == 200)&&(xhr.readyState==4))
document.getElementById("tabtj").innerHTML=xhr.responseText;
var ttd=tab_distance.length;
var ttdr=Tab_duree.length;
var distanceCells = document.querySelectorAll('td.distance');
for (var i = 0; i < distanceCells.length; i++)
{
distanceCells[i].innerHTML = tab_distance[i];
}
var dureeCells = document.querySelectorAll('td.duree');
for (var i = 0; i < dureeCells.length; i++)
{
dureeCells[i].innerHTML = Tab_duree[i];
}
}
})();
</script>

ça n'a rien donné , svp comment je peux corriger ça ?
0
hcp7kuz Messages postés 243 Date d'inscription mardi 18 août 2015 Statut Membre Dernière intervention 23 mars 2019 23
Modifié par hcp7kuz le 1/03/2017 à 18:14
La méthode qu'a donné Nexii fonctionne pour moi, mais tu peux quand même essayer autre chose : tu peux tout simplement mettre ton code sans rien autour. Comme ceci :
<script>
    // ton code qui s'exécutera au chargement de la page
</script>


Edit : Tu peux aussi mettre ton code dans le head.
0
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017
2 mars 2017 à 08:31
Je trouve ça bizarre :(( j'ai testé une simple fonction comme suit et ça n'a rien donné :

<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script type="text/javascript">
(function {
alert("Bonjour");
}) ();
</script>
</body>
</html>

Je l'ai testé dans le <head> et dans le <body> ,dans les deux cas ça marche pas, est ce que mon code est incorrect ? si oui comment je dois le corriger svp , je vous remercie d'avance
0
hcp7kuz Messages postés 243 Date d'inscription mardi 18 août 2015 Statut Membre Dernière intervention 23 mars 2019 23
Modifié par hcp7kuz le 2/03/2017 à 12:36
Tu a oublié les parenthèse après la fonction, le début de ton script devrait ressembler à ça :

(function() {


Encore un fois, tu peux essayer en ne mettant rien autour de ton code, comme ceci :

<script>
    // ton code qui s'exécutera au chargement de la page
</script>
0