Requête Ajax message erreur Synchronous XMLHttpRequest ...
Bonjour à tous,
il y a avait longtemps que je ne vous avez pas embêté.
Voici mon soucis, j'ai un formulaire avec un grand nombres de champs, qui si on les informes une requête ajax se lance pour aller chercher les informations correspondante en BDD.
Vue que chaque champ fait partie d'une suite logique, si la premiére et modifié, celle d'aprés relance leur requête...
Celà marche, mais c'est trés lent, et en allant voir la console j'ai vu ce message d'erreur.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.J'utilise cette la requête si dessous qui est différente de celle d'habitude.
if ( icao_d!='' && icao_d_length==4 && icao_a!='' && icao_a_length==4)
{
icao2=$('#step_dep_'+step).val();
var String = '&type='+type+'&id_aircraft='+id_aircraft+'&id_achat='+id_achat+'&icao1='+icao_d+'&icao2='+icao_a;
$.ajax({
type: "POST",
url: "./v6/membre/page/resa/distance.php",
data: String,
cache: false,
async: false,
timeout: 3000,
success: function(result)
{
$('#step_'+i+'_t').html("<font color='green'>"+result+"</font>");
//alert(String);
}
});
};en temp normal je n'utilise pas
async: false,
timeout: 3000,Mais dans ce cas, si je n'attent pas que la requête soit exécuté, le script ne marche pas
$('.ICAO').keyup(function()
{
for (var i = 1; i < step+1; i++)
{
var icao_d=$('#step_dep_'+i).val();
var icao_d_length=icao_d.length;
if(icao_d!='' && icao_d_length==4)
{
var String = 'icao='+icao_d;
$.ajax({
type: "POST",
url: "./v6/membre/page/resa/airport_icao_charter.php",
data: String,
cache: false,
async: false,
timeout: 3000,
success: function(result)
{
if(result=="" || result==" NULL")
{$('#step_dep_'+i+'_r').html("<font color='red'>Aucune correspondance!</font>");}
else{$('#step_dep_'+i+'_r').html("<font color='green'>"+result+"</font>");}
}
});
}
var icao_a=$('#step_arr_'+i).val();
var icao_a_length=icao_d.length;
if(icao_a!='' && icao_a_length==4)
{
var String = 'icao='+icao_a;
$.ajax({
type: "POST",
url: "./v6/membre/page/resa/airport_icao_charter.php",
data: String,
cache: false,
async: false,
timeout: 3000,
success: function(result)
{
if(result=="" || result==" NULL")
{$('#step_arr_'+i+'_r').html("<font color='red'>Aucune correspondance!</font>");}
else
{
$('#step_arr_'+i+'_r').html("<font color='green'>"+result+"</font>");
if (i<11)
{
var cursor=i+1;
$('#step_dep_'+cursor).val(icao_a);
};
}
}
});
}
if ( icao_d!='' && icao_d_length==4 && icao_a!='' && icao_a_length==4)
{
icao2=$('#step_dep_'+step).val();
var String = '&type='+type+'&id_aircraft='+id_aircraft+'&id_achat='+id_achat+'&icao1='+icao_d+'&icao2='+icao_a;
$.ajax({
type: "POST",
url: "./v6/membre/page/resa/distance.php",
data: String,
cache: false,
async: false,
timeout: 3000,
success: function(result)
{
$('#step_'+i+'_t').html("<font color='green'>"+result+"</font>");
//alert(String);
}
});
};
};
});step correspond au nombre de ligne à créer (3 requêtes par ligne).
En fouillant sur le net je suis tombé sur 'when', mais je comprend pas.
Pourriez vous m'aider.
Je vous remercie par avance.
Flo
Je laisse le fichier complet pour aider un peu à la compréhention.
<body>
<style>
.forabg {background-color: #000000;background-image: url("http://fsfrancesimulateur2.fr/forum/styles//theme/images/bg_list.gif");margin-left: -10px;margin-right: -10px;margin-bottom: 8px;margin-top: 8px;}
.container{width: 95%; margin-right: auto; margin-left:auto;}
body {font-size: 14px;}
#menu ul {
z-index: 3;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php start_fb("Appareil et étape","100","always",$windows,"sw_always",$user->data["user_id"]); ?>
<li class="row bg1"><br>
<form action="./index.php?module=resa_charter_end&type=<?=$_GET['type'];?>" method="post" target="_blank">
<?php
$aircraft=$db_TKS->query_list ("SELECT a.`type`, a.`image_type_1`,a.`id_aircraft`,a.`fullname`,p.`id_pilot`,p.`id_achat`,p.`position` ,g.`name`,g.`lat`,g.`lng`
FROM `tks_aircraft` a
LEFT JOIN `tks_aircraft_pilot` p on a.`id_aircraft`=p.`id_aircraft`
LEFT JOIN `tks_airports` g on p.`position`=g.`icao`
where p.`type` = a.`type` and a.`type`='".$_GET['type']."' and p.`heure`=0
and p.`id_pilot`=".$user->data["user_id"]) ;
?>
<div style="float:left;margin-right:20px">
<label>Appareil:</label>
<select name="aircraft_i" id="aircraft_i" required>
<option></option>
<?php
foreach ($aircraft as $key => $value)
{
echo "<option value=".$value->id_achat.">".$value->fullname."//".$value->position."</option>";
?>
<script type="text/javascript">
var aircraft<?= $value->id_achat ?>_imat='<?= $value->id_achat ?>';
var aircraft<?= $value->id_achat ?>_id='<?= $value->id_aircraft ?>';
var aircraft<?= $value->id_achat ?>_position='<?= $value->position ?>';
</script>
<?php
}
?>
</select>
</div>
<div>
<label>Nombre d'étape:</label>
<select id="nb_etape" name="nb_etape" required>
<?php
for ($i=2; $i < 10; $i++)
{
echo "<option value=".$i.">".$i."</option>";
}
?>
</select>
</div>
<div style="clear:both;"></div>
</li>
<?php end_fb(); ?>
<div id="step">
<?php
for ($i=1; $i < 11; $i++)
{
start_fb("Etape ".$i,"100","step".$i,$windows,"sw_always",$user->data["user_id"]);
echo "<label>Aéroport de départ d'étape: </label><br>";
echo "<input type='text' autocomplete='off' size='4' class='ICAO' name='step_dep_".$i."' id='step_dep_".$i."' style='color: black;' required/><span id='step_dep_".$i."_r'></span><br><br>";
echo "<label>Aéroport d'arrivée d'étape: </label><br>";
echo "<input type='text' class='ICAO' autocomplete='off' size='4' name='step_arr_".$i."' id='step_arr_".$i."' style='color: black;' required/><span id='step_arr_".$i."_r'></span><br><br>";
//echo "<div id='step_alt_'".$i.">";
echo "<label>Altitude de croisière:</label><br>";
echo "<input style='color: black;' type='text' name='level_i_".$i."' id='level_i_".$i."' autocomplete='off' required ><br><br>";
//echo "</div>";
//echo "<div id='step_plan_'".$i.">";
echo "<label>Plan de vol:</label><br>";
echo "<textarea style='color: black;' rows='2' cols='75' type='text' name='route_i_".$i."' id='route_i_".$i."' autocomplete='off' >Aucun plan de vol</textarea><br><br>";
//echo "</div>";
echo "<span id='step_".$i."_t'></span><br>";
echo "<label>Durée de l'étape: </label><br><br>
<input type='number' id='heure_".$i."' name='heure_".$i."' min='0' max='12' style='color: black;' required> Heure(s)
et <input type='number' id='minute_".$i."' name='minute_".$i."' min='0' max='59' style='color: black;' required> Minutes(s)<br><br>";
end_fb();
}
?>
</div>
<input type="hidden" name="id" id="id" value="">
<input type="hidden" name="deposed" id="deposed" value="">
<input type="hidden" name="escad" id="escad" value="<?=$_GET['type'];?>">
<input type="hidden" name="pilotid" id="pilotid" value="<?=$user->data["user_id"];?>">
<input type="hidden" name="code" id="code" value="">
<input type="hidden" name="flightnum" id="flightnum" value="">
<input type="hidden" name="depicao" id="depicao" value="">
<input type="hidden" name="arricao" id="arricao" value="">
<input type="hidden" name="route" id="route" value="Aucun plan de vol">
<input type="hidden" name="route_details" id="route_details" value="">
<input type="hidden" name="aircraft" id="aircraft" value="">
<input type="hidden" name="id_achat" id="id_achat" value="">
<input type="hidden" name="flightlevel" id="flightlevel" value="">
<input type="hidden" name="distance" id="distance" value="">
<input type="hidden" name="deptime" id="deptime" value="">
<input type="hidden" name="arrtime" id="arrtime" value="">
<input type="hidden" name="flighttime" id="flighttime" value="">
<input type="hidden" name="daysofweek" id="daysofweek" value="">
<input type="hidden" name="price" id="price" value="">
<input type="hidden" name="flighttype" id="flighttype" value="">
<input type="hidden" name="timesflown" id="timesflown" value="">
<input type="hidden" name="notes" id="notes" value="">
<input type="hidden" name="enabled" id="enabled" value="1">
<input type="hidden" name="bidid" id="bidid" value="">
<input type="hidden" name="coeff" id="coeff" value="1.25">
<input type="submit" style="color: black;">
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('#nb_etape').change();
var step=2;
var step_0=step_1=step_2=step_3=step_4=step_5=step_6=step_7=step_8=step_9=0;
var type="<?=$_GET['type']?>";
var icaor1;
var id_aircraft;
var id_aircraft;
var dep_aircraft;
var arr_aircraft;
var org_aircraft;
var id_achat;
for (var i = 3; i < 11; i++)
{
$('#step'+i).hide();
document.getElementById("level_i_"+i).required = false;
document.getElementById("step_dep_"+i).required = false;
document.getElementById("step_arr_"+i).required = false;
document.getElementById("heure_"+i).required = false;
document.getElementById("minute_"+i).required = false;
document.getElementById("level_i_"+i).disabled=true;
document.getElementById("step_dep_"+i).disabled=true;
document.getElementById("step_arr_"+i).disabled=true;
document.getElementById("heure_"+i).disabled=true;
document.getElementById("minute_"+i).disabled=true;
};
$('#nb_etape').change(function ()
{
for (var i = 3; i < 11; i++)
{
if (step=$(this).val()>=i)
{
$('#step'+i).show();
document.getElementById("level_i_"+i).required = true;
document.getElementById("step_dep_"+i).required = true;
document.getElementById("step_arr_"+i).required = true;
document.getElementById("heure_"+i).required = true;
document.getElementById("minute_"+i).required = true;
document.getElementById("level_i_"+i).disabled=false;
document.getElementById("step_dep_"+i).disabled=false;
document.getElementById("step_arr_"+i).disabled=false;
document.getElementById("heure_"+i).disabled=false;
document.getElementById("minute_"+i).disabled=false;
}
else
{
$('#step'+i).hide();
document.getElementById("level_i_"+i).required = false;
document.getElementById("step_dep_"+i).required = false;
document.getElementById("step_arr_"+i).required = false;
document.getElementById("heure_"+i).required = false;
document.getElementById("minute_"+i).required = false;
document.getElementById("level_i_"+i).disabled=true;
document.getElementById("step_dep_"+i).disabled=true;
document.getElementById("step_arr_"+i).disabled=true;
document.getElementById("heure_"+i).disabled=true;
document.getElementById("minute_"+i).disabled=true;
}
};
});
$('#aircraft_i').change(function ()
{
aircraft=$(this).val();
$('#step_dep_1').val(window['aircraft'+aircraft+'_position']);
id_aircraft=aircraft;
dep_aircraft=org_aircraft;
org_aircraft=window['aircraft'+aircraft+'_position'];
id_achat=window['aircraft'+aircraft+'_imat'];
$('#aircraft').val(window['aircraft'+aircraft+'_id']);
setTimeout(function(){ $(".ICAO").keyup(); }, 250);
});
$('.ICAO').keyup(function()
{
for (var i = 1; i < step+1; i++)
{
var icao_d=$('#step_dep_'+i).val();
var icao_d_length=icao_d.length;
if(icao_d!='' && icao_d_length==4)
{
var String = 'icao='+icao_d;
$.ajax({
type: "POST",
url: "./v6/membre/page/resa/airport_icao_charter.php",
data: String,
cache: false,
async: false,
timeout: 3000,
success: function(result)
{
if(result=="" || result==" NULL")
{$('#step_dep_'+i+'_r').html("<font color='red'>Aucune correspondance!</font>");}
else{$('#step_dep_'+i+'_r').html("<font color='green'>"+result+"</font>");}
}
});
}
var icao_a=$('#step_arr_'+i).val();
var icao_a_length=icao_d.length;
if(icao_a!='' && icao_a_length==4)
{
var String = 'icao='+icao_a;
$.ajax({
type: "POST",
url: "./v6/membre/page/resa/airport_icao_charter.php",
data: String,
cache: false,
async: false,
timeout: 3000,
success: function(result)
{
if(result=="" || result==" NULL")
{$('#step_arr_'+i+'_r').html("<font color='red'>Aucune correspondance!</font>");}
else
{
$('#step_arr_'+i+'_r').html("<font color='green'>"+result+"</font>");
if (i<11)
{
var cursor=i+1;
$('#step_dep_'+cursor).val(icao_a);
};
}
}
});
}
if ( icao_d!='' && icao_d_length==4 && icao_a!='' && icao_a_length==4)
{
icao2=$('#step_dep_'+step).val();
var String = '&type='+type+'&id_aircraft='+id_aircraft+'&id_achat='+id_achat+'&icao1='+icao_d+'&icao2='+icao_a;
$.ajax({
type: "POST",
url: "./v6/membre/page/resa/distance.php",
data: String,
cache: false,
async: false,
timeout: 3000,
success: function(result)
{
$('#step_'+i+'_t').html("<font color='green'>"+result+"</font>");
//alert(String);
}
});
};
};
});
</script>
</body>
1 réponse
Le message d'erreur c'est normal, c'est parce que tu utilises async : false.
Pour le when(), d'après la doc, il faut que tu fasses quelque chose du style
$.when('ta requete ajax').done(function(){
// tu fais quelque chose une fois que la requète ajax est finie
});Sinon, tu peux peut être utiliser les promises avec .ajax()...