Refresh images jquery

Question

I have uploading images with ajax form in my ASp.Net application. I need to refresh images, so I try this:

$(function () {
   $(".fileUploadForm").ajaxForm({
      success: function (data, text, xhr, form) {
       var tmp = jQuery(this).closest("img[class=imageResource]").attr('src');
      }
   });
});

Here is my image:

 <img class="imageResource" alt="picture" src="@Url.Action("Picture", new { id = Model.Id })" />

How can I find and rewrite image source with the same name

Update

Here is my html:

<div class="thumbnail">
<a target="_blank" href="/Template/OriginalPicture/8b8c824b-9605-4931-9fe2-1f5979baca42">
<img class="imageResource" src="/Template/Picture/8b8c824b-9605-4931-9fe2-1f5979baca42" alt="picture">
</a>
<div class="caption">
<div style="margin-bottom: 5px;">
<form class="form-horizontal fileUploadForm" method="post" enctype="multipart/form-data" action="/Template/PictureResource?resourceId=8b8c824b-9605-4931-9fe2-1f5979baca42&configId=aa383b5a-23b2-4780-965e-ef4e95cd3fa2&pageNumber=1">
<div class="input-append">
<input type="file" name="picture">
<input class="span1" type="text" size="128" style="width: 86px;">
<button class="btn browse" type="button"> ...</button>
<button class="btn" type="submit">Upload</button>
</div>
</form>
</div>
</div>

http://stackoverflow.com/questions/1997901/how-to-refresh-the-src-of-img-with-jquery — Breezer, Sep 11 '12 at 14:17
An `img` element cannot have a child so your `closest` doesn't select any element. Note that `closest` selects the closest parent of the element not closest sibling. — Ram, Sep 11 '12 at 14:18
It depends on the markup, also `this` within your success function doesn't refer to an element. — Ram, Sep 11 '12 at 14:21

Viktor S. · Accepted Answer · 2012-09-11T14:49:54.177

1

try this code:

$(function () {
   $(".fileUploadForm").ajaxForm({
      success: function (data, text, xhr, form) {
       var tmp = form.closest('.thumbnail').find('.imageResource').attr('src');
        form.closest('.thumbnail').find('.imageResource').attr('src', tmp + "?" + (new Date()).getTime());
      }
   });
});

I'm not sure if jQuery(this) will return a form (do not remember what is "this" there ) (new Date()).getTime() - is just to change image URL and force brower take image not from cache. Uh. And not noticed .closest - it will search for closest parent, and not for a child element. You may use .find for that.

form - that is a current from, according to docs closest('.thumbnail') will find parent with class .thumbnail closest to a form. .find('.imageResource') will search for an elements with class imageResource only inside .thumbnail. As there is only one image tag with class imageResource inside thumbnail - code above should work fine

edited Sep 11 '12 at 14:49

answered Sep 11 '12 at 14:19

Viktor S.

12,736
1
27
52

thanks, on my page I have 4 images and your code reqrite all of tem , but not current – revolutionkpi Sep 11 '12 at 14:23
see an edit. It suppose that image is in form and there is only one `img` – Viktor S. Sep 11 '12 at 14:24
but if I have some image, hoq can I find current? – revolutionkpi Sep 11 '12 at 14:26
Open jquery selector documentation, read it carefully, build your own selector which will allow you to find an image you want. I can't read your thoughts and I do not know you HTML structure. You may post a form html and show which image should be updated. If in your form there is only one image with class imageResource and it is the one you want to update, that it should be enough to replace `jQuery(".fileUploadForm img")` with `jQuery(".fileUploadForm img.imageResource")`. – Viktor S. Sep 11 '12 at 14:30

Refresh images jquery

1 Answers1