Discussion :

[Midsou]

Bonjour,

Lors de l'appel d'un modal bootstrap, j'insert dans le modal-mody un formulaire issue d'une requête ajax.

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
<script>
	$('#testModal').on('show.bs.modal', function(e) {
	var $modal = $(this),
            idClient = e.relatedTarget.id;
 
		$(".modal-body").fadeIn(1000).html('<div style="text-align:center; margin-right:auto; margin-left:auto">Patientez...</div>');
		$.ajax({
			type:"GET",
			data : "idClient="+idClient,
			url:"formulaire.php",
			error:function(msg){
				$(".modal-body").addClass("tableau_msg_erreur").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).html('<div style="margin-right:auto; margin-left:auto; text-align:center">Impossible de charger cette page</div>');
			},
			success:function(data){
				$(".modal-body").fadeIn(1000).html(data);
			}
		});
	});
</script>

le formulaire inséré :

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
<div id="updateOk">
	<form  method="post" id="formulaire">
 
		<div id="errorUpdate">
		</div>
		<input type="hidden" name="idTerrain" value="<?php echo $idTerrain;?>" /> 
		<div class="form-group">
			<input type="text" class="form-control" placeholder="updateTest" name="updateTest"/>
		</div>
		<hr />
		<div class="form-group">
			<button type="submit" class="btn btn-default" name="update_button">
			<span class="glyphicon glyphicon-log-in"></span> &nbsp; Modifier
			</button> 
		</div> 
	</form>	
</div>

pour valider mon formulaire j'appelle également un script ajax avec la methode jquery .on() car l'élément "#formulaire" n'existait pas au chargement de la page.

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
<script>
 
$(document).on("submit", "#formulaire", function () {
 
		var data = $("#formulaire").serialize();				
		$.ajax({				
			type : 'POST',
			url  : 'update.php',
			data : data,
			success : function(response){						
				if(response==1){									
					$("div#updateOk").html("<center><span id=\"confirmMsg\">modifications effectuées !</span></center>");
				}else {					
					$("div#errorUpdate").html('<div class="alert alert-danger">&nbsp; '+response+' !</div>');
				}
			}
		});
		return false;
});
 
</script>

la page update.php

Code php :

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

1
2
3
4
5
<?php
 
echo $updateOk=$_POST['updateTest']; 
echo 1;
?>

Mon appel ajax fonctionne bien mais la value de l'input updateTest est vide. Si j'ajoute un value en fixe dans mon formulaire tel que :

Code html :

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

<input type="text" class="form-control" placeholder="updateTest" name="updateTest" value="test"/>

La valeur test bien récupérée par la page update.php dans mon $_POST et ma div errorUpdate récupère bien le code erreur puisque mon html n'est pas égal à 1 .

Est ce que quelqu'un a déjà rencontré ce phénomène ?

[headmax]

Tu cible mal ton champs input, la page retour update.php doit retourner un document json afin de bien formaté les données, le bon type-content souhaité, deuxièmement il faut stocker ses variables envoyées a javascript dans un tableau PHP avec des attributs (updateOk, success) accessibles ensuite dans notre script Ajax et faire un unique echo du tableau formaté en object json.

Code php :

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

1
2
3
4
5
6
<?php
...
header('Content-Type: application/json');
 $arr = ['updateOk'=>$_POST['update_Test'], 'success'=> 1];
echo json_encode($arr)
?>

La page javascript : tu ne cible pas ton input, et tu ne lui attribut aucun retour, ici j'affecte la valeur retour de notre objet json a ton champs input. etc ...

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
...
$.ajax({				
			type : 'POST',
			url  : 'update.php',
			data : data,
			success : function(response){						
				if(response.sucess === 1){									
					 $("div#updateOk").html("<center><span id=\"confirmMsg\">modifications effectuées !</span></center>");
                                         $('input[name="updateTest"]').attr('value',response.updateOk);
				}else {					
					$("div#errorUpdate").html('<div class="alert alert-danger">&nbsp; '+response+' !</div>');
				}
			}
		});
...