Modifier la source d'une image

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:

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:

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.

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().

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

Code:

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
})