Script AJAX qui ne s’exécute qu'une seul fois.

Résolu/Fermé
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020 - 3 juin 2020 à 11:19
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020 - 5 juin 2020 à 10:51
Bonjour,
Je suis entrain de réaliser un chat dynamique en utilisant AJAX :



Mon script JS comprend 2 fonction majeur une première qui gère l'envois de message :

document.getElementById('bouton').addEventListener('click',function(event){
	alert("je rentreeee")
	
	console.log("affichagse : "+document.getElementById('areatxt').value)
	event.preventDefault()
	msg=document.getElementById('areatxt').value
	var elem2 = this
	if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
		
			document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
			
	
	}
	
	HttpRequest.open('POST','monChat.php',true)
	HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

	HttpRequest.send("msgtxt="+ msg +"&id_customer="+elem2.getAttribute('data-id_customer'))
	
})


Code du fichier php appelé :



<?php
session_start();		
include('../phpscript/phpfunction.php');
$con=db_connect();
$_SESSION['id_user']=1;
$id=$_SESSION['id_user'];
//echo ($_GET['message']);

?>
	
	
	

	<?php

	$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
	$text=$_POST['msgtxt'];
	$idCurentUser=($_POST['id_customer']);
	$id_sup=1;
	$to='supplier';
	$id_custo=($_POST['id_customer']);
	$date_ad=date('Y-m-d H:i:s');
	$data4=array(':Text' => $text,':To' => $to, ':Date_ad' => $date_ad, ':Id_cust' => $id_custo,':Id_supli' => $id_sup);
	$insertStatement = $con->prepare('INSERT INTO ps_private_message (`message`,`to`,`date_add`,`id_customer`,`id_supplier`) VALUES (:Text,:To,:Date_ad,:Id_cust,:Id_supli)');
	$con->BeginTransaction();
	try {
		$insertStatement->execute($data4);
	} catch (PDOException $e) {
		echo 'Query failed: ' . $e->getMessage();
	}	
	$con->commit();

?>

	

		
	<?php
	
		$check=0;
		$querry="SELECT DISTINCT name_client FROM client INNER JOIN ps_private_message ON (client.id_client=ps_private_message.id_customer) ORDER BY ps_private_message.date_add;";
		$req = $con->query($querry);

		
		$querry3="SELECT DISTINCT(id_client),name_client FROM client INNER JOIN ps_private_message ON (client.id_client=ps_private_message.id_customer) ORDER BY ps_private_message.date_add;";
		$req3 = $con->query($querry3);
?> 

	<div class="container-fluid h-100">
			<div class="row justify-content-center h-100">
				<div class="col-md-4 col-xl-3 chat"><div class="card mb-sm-3 mb-md-0 contacts_card">
					<div class="card-header">
						<div class="input-group">
							<input type="text" placeholder="Search..." name="" class="form-control search">
							<div class="input-group-prepend">
								<span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
							</div>
						</div>
					</div>
					
					
					<div class="card-body contacts_body">
						<ul class="contacts">
						<?php while ($data3 = $req3->fetch(PDO::FETCH_ASSOC)) { ?>
			
						<li class="active">
					
							<a data-id_custo="<?php echo($data3['id_client']); ?>" href="#" class="chat_friend">
							<?php echo($data3['id_client']);?> <!---juste pour affiche les id--->
								<div class="d-flex bd-highlight">
									<div class="img_cont">
										<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
										<span class="online_icon"></span>
									</div>
									<div class="user_info">
										<span><?php echo ($data3['name_client'])?></span>
										<p><?php
										echo(getLastMessage($con,$data3['id_client'])); 
										?></p>
									</div>
								</div>
							</a>
						</li>
					
						<?php
					
						} ?>
						</ul>
					</div>
					<div class="card-footer"></div>
				</div></div>
				<div class="col-md-8 col-xl-6 chat">
					<div class="card">
						<div class="card-header msg_head">
							<div class="d-flex bd-highlight">
								<div class="img_cont">
									<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
									<span class="online_icon"></span>
								</div>
								<div class="user_info">
									<span>Chat with <?php echo (getCurentUserInfo($idCurentUser,$con)) ?></span>
									<p><?php echo(countMessage($idCurentUser,$con)) ?></p>
								</div>
								<div class="video_cam">
									<span><i class="fas fa-video"></i></span>
									<span><i class="fas fa-phone"></i></span>
								</div>
							</div>
							<span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
							<div class="action_menu">
								<ul>
									<li><i class="fas fa-user-circle"></i> View profile</li>
									<li><i class="fas fa-users"></i> Add to close friends</li>
									<li><i class="fas fa-plus"></i> Add to group</li>
									<li><i class="fas fa-ban"></i> Block</li>
								</ul>
							</div>
						</div>
						
						<div class="card-body msg_card_body">
						<div id="testert">

						<?php $listeChat=getSpecificMessage($idCurentUser,$con);?>
						<?php while ($data = $listeChat->fetch(PDO::FETCH_ASSOC)) { ?>
						<?php if (ISSET($data['file_name'])){ ?>
						
						
						
						<div class="img_msg">
						<div class="d-flex justify-content-start mb-4">
						<div class="img_cont_msg">
							<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
						</div>
						
							
							<div class="msg_cotainer">	
								
									
										<img style="height:310px; width:390px;" src="<?php echo($data['file_name']); ?>" alt="Probléme d'affichage" />
										<span class="msg_time"><?php echo ($data['date_add'])?></span>
									
								</div>
							</div>
						</div>
						
						
						<?php }else{?>
						<?php if($data['to']=='customer') { ?>
							
						<?php }else{ ?>
						
						<div class="d-flex justify-content-end mb-4">
						
						<div class="img_cont_msg">
							<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
						</div>
						
						<div class="msg_cotainer_send">
							<?php echo ($data['message']);?>
							<span class="msg_time_send"><?php echo ($data['date_add'])?></span>
						</div>
						</div>
						<?php }}} ?>
						</div>
						</div>
						
						
						<div class="card-footer">
						<form action="#" method="POST "ENCTYPE="multipart/form-data">
							<div class="input-group">
								<div class="input-group-append">
									
									<span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
									
								</div>
								
							
								
								<textarea name="msg_txt" id="areatxt" class="form-control type_msg" data-id_customer=<?php echo($idCurentUser); ?> placeholder="Type your message..."></textarea>
								<div class="input-group-append">
									<button type="submit" id="bouton" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
								</div>
								
							</div>
						</form>
						
						
						
						
						</div>
					</div>
				</div>
			</div>
	</div>
	




Et une fonction qui permet de changer la personne avec la quelle on parle :


for(var i=0;i<links.length;i++){

	var linkIndex=links[i]
	
	

	linkIndex.addEventListener('click', function(event){
		id_custo=linkIndex.getAttribute('value')
		
		event.preventDefault()
		var elem = this
		if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
		
			document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
	
		}
	
	
		HttpRequest.open('POST','monChat2.php',true)
		HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
		
		HttpRequest.send('id_customer='+ elem.getAttribute('data-id_custo'))
	
	})


}

Fichier PHP appelé:

<?php
session_start();		
include('../phpscript/phpfunction.php');
$con=db_connect();

$_SESSION['id_user']=1;
$id=$_SESSION['id_user'];
$id_cli=($_POST['id_customer']);
$idCurentUser=$id_cli;
echo("id transmis en param =".$id_cli);
$querry="SELECT DISTINCT(id_client),name_client FROM client INNER JOIN ps_private_message ON (client.id_client=ps_private_message.id_customer) ORDER BY ps_private_message.date_add;";
$req = $con->query($querry);
$querry2="SELECT * FROM `ps_private_message` WHERE (`id_supplier`=('$id')) AND `id_customer`=('$id_cli');";
$req2 = $con->query($querry2);
?> 

		
		<div class="container-fluid h-100">
			<div class="row justify-content-center h-100">
				<div class="col-md-4 col-xl-3 chat"><div class="card mb-sm-3 mb-md-0 contacts_card">
					<div class="card-header">
						<div class="input-group">
							<input type="text" placeholder="Search..." name="" class="form-control search">
							<div class="input-group-prepend">
								<span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
							</div>
						</div>
					</div>
					
					
					<div class="card-body contacts_body">
						<ul class="contacts">
						<?php while ($data3 = $req->fetch(PDO::FETCH_ASSOC)) { ?>
				
						<li class="active">
					
							<a data-id_custo="<?php echo($data3['id_client']); ?>" href="#" class="chat_friend">
							<?php echo($data3['id_client']);?> <!---juste pour affiche les id--->
								<div class="d-flex bd-highlight">
									<div class="img_cont">
										<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
										<span class="online_icon"></span>
									</div>
									<div class="user_info">
										<span><?php echo ($data3['name_client'])?></span>
										<p><?php
										echo(getLastMessage($con,$data3['id_client'])); 
										?></p>
									</div>
								</div>
							</a>
						</li>
					
						<?php
						$check=1;
						} ?>
						</ul>
					</div>
					<div class="card-footer"></div>
				</div></div>
				<div class="col-md-8 col-xl-6 chat">
					<div class="card">
						<div class="card-header msg_head">
							<div class="d-flex bd-highlight">
								<div class="img_cont">
									<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
									<span class="online_icon"></span>
								</div>
								<div class="user_info">
									<span>Chat with <?php echo (getCurentUserInfo($idCurentUser,$con)) ?></span>
									<p><?php echo(countMessage($idCurentUser,$con)) ?></p>
								</div>
								<div class="video_cam">
									<span><i class="fas fa-video"></i></span>
									<span><i class="fas fa-phone"></i></span>
								</div>
							</div>
							<span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
							<div class="action_menu">
								<ul>
									<li><i class="fas fa-user-circle"></i> View profile</li>
									<li><i class="fas fa-users"></i> Add to close friends</li>
									<li><i class="fas fa-plus"></i> Add to group</li>
									<li><i class="fas fa-ban"></i> Block</li>
								</ul>
							</div>
						</div>
						
						<div class="card-body msg_card_body">
						<div id="testert">

						<?php $listeChat=getSpecificMessage($idCurentUser,$con);?>
						<?php while ($data = $listeChat->fetch(PDO::FETCH_ASSOC)) { ?>
						<?php if (ISSET($data['file_name'])){ ?>
						
						
						
						<div class="img_msg">
						<div class="d-flex justify-content-start mb-4">
						<div class="img_cont_msg">
							<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
						</div>
						
							
							<div class="msg_cotainer">	
								
									
										<img style="height:310px; width:390px;" src="<?php echo($data['file_name']); ?>" alt="Probléme d'affichage" />
										<span class="msg_time"><?php echo ($data['date_add'])?></span>
									
								</div>
							</div>
						</div>
						
						
						<?php }else{?>
						<?php if($data['to']=='customer') { ?>
							
						<?php }else{ ?>
						
						<div class="d-flex justify-content-end mb-4">
						
						<div class="img_cont_msg">
							<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
						</div>
						
						<div class="msg_cotainer_send">
							<?php echo ($data['message']);?>
							<span class="msg_time_send"><?php echo ($data['date_add'])?></span>
						</div>
						</div>
						<?php }}} ?>
						</div>
						</div>
						
						
						<div class="card-footer">
						<form action="#" method="POST "ENCTYPE="multipart/form-data">
							<div class="input-group">
								<div class="input-group-append">
									
									<span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
									
								</div>
								
							
								
								<textarea name="msg_txt" id="areatxt" class="form-control type_msg" placeholder="Type your message..."></textarea>
								<div class="input-group-append">
									<button type="submit" id="bouton" data-id_customer="<?php echo($idCurentUser); ?>" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
								</div>
								
							</div>
						</form>
						
						
						
						
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/interface4.js"></script>


Tout cela fonctionne très bien mais qu'une seul fois. J'ai regarder de nombreux poste de forum qui rencontre le même problème mais rien que je n'arrive a comparer a mon code. Je ne comprend pas pourquoi je rencontre ce problème.
Merci d'avance et bonne journée !

8 réponses

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 juin 2020 à 14:36
Bonjour,

Dans ton cas, tu retournes le code html de ta page... et donc, l'event n'est pas réinitialisé sur le "bouton"...
A savoir qu'en Ajax on évite de retourner du HTML ....
On ne retourne que les données "brute" ( au format JSON de préférence), et ensuite, c'est le javascript qui s'occupe de créer le html avec ces données....

Voici quelques exemples : (qui utilisent jquery.. )
https://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery



1
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020
3 juin 2020 à 15:05
Merci beaucoup pour le liens,
J'avoue que j'ai un peu de mal a y comprendre quelque chose (j'ai un niveau en informatique qui se limite relativement a ce que j'ai montrer), et pour ce qui est du Json j'avais déjà prévu de faire le changement mais j'aimerai (dans l'idéal) avoir une autre version de mon projet pour le Json (principalement pour avoir une base solide d'exemple pour de futur projet que j'ai en tête).

Pour ce qui est de mon code, a quelle niveau es que je "retourne" le code html (innerHtml je suppose ou alors pendant l'appel a send) ?
Et est-t-il possible de contourner cela sans avoir a transférer mes données au format Json ?
Merci d'avance et bonne après-midi.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 juin 2020 à 15:35

a quelle niveau es que je "retourne" le code html

ben.. dans le "Fichier PHP appelé:"
tout ce qui se trouve après la ligne 15 ....

et donc... ton script ne devrais retourner que les données de tes requêtes dans un array encodé au format JSON
et dans le code JS de ta page principale.. traiter cet array pour générer le code html de ta page
0
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020
3 juin 2020 à 15:43
Merci pour la réponse,
Oui j'ai bien comprit que je devais générer mon code HTML a partir de données JSON et j'ai en effet prévu de le faire, cependant actuellement je ne vois pas en quoi cela changerai quelque chose a mon problème.
Quand je demandais a quelle niveau était retourner mon code html je me demandais plutôt a quelle moment es que je rendais mes eventListener inutilisable de façon a essayer de contourner temporairement le problème.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
Modifié le 3 juin 2020 à 16:03
Ben ici
if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
 document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
        // Ici .. tu dois "récactiver" ton eventlistener
}


Le plus simple étant de réécrire le code sous la forme:
function initBtn(){
  document.getElementById('bouton').addEventListener('click',function(event){
    mafonction();
  });
}

function mafonction(){
 alert("je rentreeee")
 var HttpRequest = getHttpRequest()
 console.log("affichagse : ", document.getElementById('areatxt').value)
 event.preventDefault()
 var msg = document.getElementById('areatxt').value
 var elem2 = this
 if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
   document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
   initBtn();
 }
 
 HttpRequest.open('POST','monChat.php',true)
 HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
 HttpRequest.send("msgtxt="+ msg +"&id_customer="+elem2.getAttribute('data-id_customer'))
 
}

//initialisation du bouton pour la premiere fois :
initBtn();
0
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020
3 juin 2020 à 17:10
J'ai essayer de récupérer ce code mais j'ai eu un problème avec la fonction getAttribut. J'ai lue que de nombreuse personne avait eu ce probléme et la réponse qui revenait majotiraiment disais que l'objet visé était un objet jQuerry et non DOM.
Je ne pense pas faire face a ce probléme car le simple fait de déplacer un peu de code dans une fonction ne va pas changer le type d'un objet (enfin je pense).
J'ai tout de même essayer de changer un peu le code pour obtenir ca :


function sendMsg(){
	alert("je rentreeee")
	var HttpRequest = getHttpRequest()
	console.log("affichagse : "+document.getElementById('areatxt').value)
	event.preventDefault()
	var msg=document.getElementById('areatxt').value
	var elem2 = $(this)
	if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
		
			document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
			initBtn();
	
	}
	
	HttpRequest.open('POST','monChat.php',true)
	HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
	console.log("affichage :"+elem2.data('id_customer'))
	HttpRequest.send("msgtxt="+ msg +"&id_customer="+elem2.data('id_customer'))
	
}



function initBtn(){
  document.getElementById('bouton').addEventListener('click',function(event){
    sendMsg();
  });
}


Mais cette fois-ci mon affichage de elem2.data() affiche undifined.

J'avoue que je suis pas mal perdue même si j'ai comprit l'idée de base je ne comprend pas pourquoi elle engendre de tel modification.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 juin 2020 à 17:26
Je n'avais pas fais gaffe à cette variable elm2

donc le code devrait ressembler à un truc du genre :

function initBtn(){
  document.getElementById('bouton').addEventListener('click',function(event){
    event.preventDefault()
    var elem2 = $(this)
    mafonction(elem2);
  });
}
function sendMsg(elem2){
	alert("je rentreeee");
	var HttpRequest = getHttpRequest();
	console.log("affichagse : "+document.getElementById('areatxt').value)
	
	var msg=document.getElementById('areatxt').value;

	if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
		
			document.getElementById('changeCusto').innerHTML = HttpRequest.responseText;
			initBtn();
	
	}
	
	HttpRequest.open('POST','monChat.php',true);
	HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	console.log("affichage " , elem2.data('id_customer'));
	HttpRequest.send("msgtxt="+ msg +"&id_customer="+elem2.data('id_customer'));
	
}

//initialisation du bouton pour la premiere fois :
initBtn();


Par contre... vu que tu sembles avoir du jquery dans ta page... pourquoi ne pas écrire ton code avec cette librairie ??
ça serait plus propre...
Au lieu de faire xmlhttprequest ... fais donc du $.Ajax
Et au lieu de faire du addEventListener .. faire du
$('#bouton').click(function(){ ...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020
Modifié le 3 juin 2020 à 18:27
En effet cela fonctionne bien et oui en effet quasiment tout les postes que j'ai lue écrit par des gens qui essayait de faire des choses semblables au mienne utilise cette librairie.
Dernier problème et après je te jure que je te laisse tranquille :').

J'ai essayé de faire la même chose pour pour autre fonction :
 function changeCustomer(elem){

  var HttpRequest = getHttpRequest()
  

   
   if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
    console.log("je suis la")
    document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
    initChangeCusto();
   }
  
  
   HttpRequest.open('POST','monChat2.php',true)
   HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
   
   HttpRequest.send('id_customer='+ elem.data('id_custo'))
  
 }


function initChangeCusto(){


 
 var links = document.querySelectorAll('.chat_friend')
 for(var i=0;i<links.length;i++){
  var linkIndex=links[i]
  linkIndex.addEventListener('click', function(event){
   var elem = $(this)
   event.preventDefault()
   changeCustomer(elem) 
  });
 }
    
 
}


Cette fois ci la requette AJAX a bien lieu et me retourne bien le code que je souhaite mais la condition :
if(HttpRequest.readyState == 4 &HttpRequest.status == 200)

ne se valide jamais alors que son status est bien affiché a 200 dans le naviguatteur,
comme je ne sais pas comment on contrôle le "readyState" je l'ai simplement enlever et malgrès tout rien...
Désoler de te poser autant de question et merci encore pour tes réponses.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 juin 2020 à 18:39
Là non plus je n'avais pas relu ton code....
le "and" .. c'est avec 2 &
donc
if(HttpRequest.readyState == 4 && HttpRequest.status == 200) {


Ah.. et il serait bien également de finir (comme dans les codes que je te donne....) tes instructions par des point-virgules !
Certains navigateurs pourraient ne pas apprécier cet oubli dans tes codes ....
0
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020
Modifié le 3 juin 2020 à 18:47
Il me semble que les 2 syntaxes sont acceptés pour le and (certainement plus tolérer qu'accepter), en tout cas ça ne résous pas le problème.
0
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020
3 juin 2020 à 19:46
Je viens de faire quelque test et mon readyState reste bloqué a 0...
Beaucoup de personne on rencontré ce problème mais il était quasiment toujours lié a la fonction onReadyStateChange que je n'utilise pas.
J'avoue que la je suis vraiment pommé.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
4 juin 2020 à 09:01
Encore une fois... je n'avais pas relu le code complètement...;
Et donc.. si ! il faut le onreadystatechange....

HttpRequest.onreadystatechange = function () {
  if(HttpRequest.readyState == 4 && HttpRequest.status == 200) {
    document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
    initChangeCusto();
  }
}


L'ajax fonctionne en mode asynchrone....
Donc il continue de traiter le code Javascript sans attendre la réponse de ton script php.
Il ne rentrera donc dans ton IF ... que si tu lui demande d'attendre le changement de son statut...


Y'a pas à dire.... je ne supporte de moins en moins l'ajax en "pure" javascript....
Sincèrement... si tu as chargé jquery dans ta page... passe à la syntaxe jquery... tu auras beaucoup moins de soucis !
var url = "monChat2.php";
var datas = {
    id_customer:  elem.data('id_custo')
};
$.ajax({
        //L'URL de la requête 
        url: url,
        method: "POST",
        dataType : "json",
       data:datas
    })
    //Ce code sera exécuté en cas de succès - La réponse du serveur est passée à done()
    .done(function(response){
        console.log('reponse ajax',response);
        document.getElementById('changeCusto').innerHTML = response
         initChangeCusto();
    })

    //Ce code sera exécuté en cas d'échec - L'erreur est passée à fail()
    .fail(function(error){
        alert("La requête s'est terminée en échec. Infos : " + JSON.stringify(error));
    })
});
0
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020
5 juin 2020 à 10:51
Bonjour, merci beaucoup pour ta réponse.
Entre deux comme je n'arrivais a trouver la solution je suis en effet passer a la syntaxe jQuery et il n'y a pas photo c'est beaucoup plus simple !
Merci encore pour le coup de main et bonne journée.
0