Discussion :

[cris84]

Bonsoir à tous,

je souhaiterai modifier la source de l'image avec JQuery.css après que l'utilisateur est valider le formulaire. J'ai donc un formulaire contenant l'image dans une <div>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <div class="icontext favoris">
		<div class="text-wrap">
		<a href="#" class="b ajouter-fav" id="annonce-<?=$donnees["id"]?>" data-connected="<?php echo isset($_SESSION["id"])?"true":"false" ?>" data-toggle="dropdown" data-offset="220" aria-expanded="false" ><img src="images/favoris.png" width="20" id="icone" /></a>
			<div class="dropdown-menu dropdown-menu-right" style="min-width: 250px; position: absolute; transform: translate3d(129px, 242px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="bottom-end">
                         <?php if(!isset($_SESSION['id'])){?>
			<div class="modal-info">
				 <input type='email' class="email" name="inputEmail" placeholder="Entrez votre email..." />
					 <button class="modal-submit">Ok</button>
						</div>
				  <?php } ?>		
                                               </div>
				       </div>
			  </div>

Le code Javascipt qui valide sans recharger 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
22
23
24
function sendAjax(donnees){
	console.log(donnees);
	 console.log("donnees.id :"+donnees.id);//cet id s'affiche correctement dans la console ou pas ?
	if($("#annonce-"+donnees.id).next(".resultat-ajax").length==0){//si ".resultat-ajax" n'existe pas APRES le span id="annonce-xxx" 
		$("#annonce-"+donnees.id).after("<p class='resultat-ajax'></p>");
 
	}
	$.ajax({
		url:"info.php",
		method:"post",
		data:donnees
	})
	.done(function(data){
		console.log("success ajax :"+data);
		$("#annonce-"+donnees.id).next(".resultat-ajax").html(data);
 
		// ici le code qui permettrait de remplacer l'image favoris.png avec save.png
 
			})
	.fail(function(erreur){
		console.log("Erreur ajax :"+erreur);
		$("#annonce-"+donnees.id).next(".resultat-ajax").html(erreur);
	});
}

A priori je dois ajouter une fonction dans le .done(function(data) qui remplacerait l'image existante toujours sans recharger la page.

Merci de votre aide.

[Toufik83]

Bonjour,

Pour modifier une source d'une image, on utilise jQuery.attr et pas css.

Sinon le mieux est d'utiliser dataType:"json" dans les options d'ajax et faire en sorte que le fichier info.php renverra du json en utilisant json_encode().

[cris84]

Voici la réponse, donnée par toufik83 (merci à lui) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
	url:"info.php",
	method:"post",
	data:donnees,
        dataType:"json"//ajoutes cette option
})
	.done(function(data){
	console.log("succès ajax :",data);//le data doit maintenant ressembler à {msg:"message correspondant","icone":"soit 1 soit 2 soit 3"}
       if(data.icone==1) $("#annonce-"+donnees.id).find("img").eq(0).attr("src","images/save.png");// utilisation de l'id "icone"
else if(data.icone==2) $("#annonce-"+donnees.id).find("img").eq(0).attr("src","images/favoris.png");
	$("#annonce-"+donnees.id).next(".resultat-ajax").html(data.msg);//next() signifie l'élément suivant du span et le point signifie la class
})