rafraichir une div après requete post

Version imprimable

09/10/2009, 13h18
gtraxx

rafraichir une div après requete post

Bonjour, je ne sais pas comment expliquer mon petit problème.
En faites je fais un upload d'une image avec une requête de type post.
Jusque la pas de probléme....
Seulement l'image ne change pas (logique) et je suis obliger de recharger la page pour voir la modification.
Je me demande comment faire pour recharger la div qui contient mon image ou un équivalent propre avec rechargement de la page courante :aie:
Bref vos conseils sont précieux :mouarf:
10/10/2009, 04h18
Invité

salut,

lorsque tu as fait ton upload dimage qui est jimagine dans un iframe ou qqch dautre.
Dans cet iframe, il faut que tu genere l'image avec un nom style
<img src="monImage.jpg?10003409094" alt=""/>

Ca a pour but de faire charger la nouvelle image au navigateur.
10/10/2009, 11h39
gtraxx

je n'utilise pas d'iframe pour l'envoi d'image, un formulaire plutôt classique avec l'image juste en dessous.
Pensez vous que je doivent faire une requête get ou un load pour charger cette image et lors de l'envoi refaire une requête ?
12/10/2009, 16h41
marcha

Salut,

J'ai de la peine à saisir la technique que tu utilises pour uploader ton image, tu peux
donner un peu de code ?

Pour le moment, je recharge la page après envoi :

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
25
26
27
28
29
30
31
32
33
34
35
 
function updateProgress() {
	  var progress;
	  progress = $("#progressbar")
	    .progressbar("option","value");
	  if (progress <= 100) {
	      $("#progressbar")
	        .progressbar("option", "value", progress + 1);
	      $("#progressText").text(progress+"%");
	      setTimeout(updateProgress, 100);
	  }
	  if(progress>=100){
		  location.reload();
	  }
	  return false;
	}
		$('<div class="filesystem"></div>').insertAfter('span.photo');
		$('.filesystem').empty();
		$(':checkbox#addimg').click(function(){
	 		if(this.checked){
	 			jQuery('<input type="file" id="photo" name="photo" value="" />').appendTo(".filesystem");
	 		}else{
	 			jQuery('.filesystem').empty();
	 		}
	 	});
$('#subimg').click(function(){
$('#profil-photo').ajaxSubmit({
			 	url:"http://test.dev",
			 	type:"post",
			 	beforeSubmit:function(){
		 		$("#progressbar").progressbar({ value: 0 });
			 	setTimeout(updateProgress, 100);
			 	}
			});
})

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<form class="forms-profil" method="post" action="" enctype="multipart/form-data" id="profil-photo">
	<fieldset>
		<table>
		<tr>
			<td class="label"><label for="addimg">Photo :</label></td>
		</tr>
		<tr>
			<td>
			<table>
				<tr>
					<td style="width:400px;">
						<div id="progressbar"></div>
					 	<div id="progressText"></div>
					 </td>
				</tr>
			</table>
			<table>
				<tr>
					<td style="width:250px;">
						<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
				 		<input type="checkbox" name="addimg" id="addimg" value="" />&nbsp;<span class="photo">Envoyer une Photo</span>
				 	</td>
				 	<td>&nbsp;</td>
				 	<td style="width:250px;" class="errorInput"></td>
			 	</tr>
			 	<tr>
			 	<td><input type="submit" name="saddimg" class="ud-button ui-state-default ui-corner-all" value="envoyer" id="subimg" /></td>
			 	</tr>
		 	</table>
			</td>
		</tr>
		<tr>
			<td class="status"></td>
		</tr>
		<tr>
			<td valign="top">
				<img style="margin:4px 0 0 5px;" src="/monimage.gif" width="" height="" alt="photo" />
			</td>
			<td style="width:100px;"></td>
		</tr>
	</table>
	</fieldset>
	</form>

C'est en gros quoi :mouarf: mais recharger l'image

Code:

<img style="margin:4px 0 0 5px;" src="/monimage.gif" width="" height="" alt="photo" />

pour remplacer le src me semble peut être une bonne idée cela m'éviterai de recharger toute la page comme indiquer dans la fonction updateProgress

13/10/2009, 13h41
marcha

Salut,

Je n'ai encore jamais trouvé de solution d'upload qui n'utilise pas la technique
du ciblage du formulaire dans un iframe (a pars avec des plugins tel que flash
ou java)

Est-tu bien sur de ce que tu es en train de faire ?

Bonjour,

Il faut que tu utilise l'option "success" de jQuery.ajax

Voir la doc et les exemples sur le site de jQuery...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('#subimg').click(function(){
    $.ajax({
	url:"http://test.dev",
	type:"post",
	beforeSubmit:function(){
		$("#progressbar").progressbar({ value: 0 });
		setTimeout(updateProgress, 100);
	},
        success: function(){
            $("#idImage").attr('src',da)
        }
    });
});