Refresh A Image Src...

Question

k... Strager was able to help me a bit. However, it's still not working quite right. Need someone that knows both MVC and jQuery please...

I have a page that has a image that when clicked on will launch a dialog box that gives the ability to upload a file. Once the dialog closes the image is supposed to refresh with what was uploaded/stored in the database...

All works great the first time. However if I try uploading a 2nd image; the 1st image still displays. It also doesn't seem like my controller method is being called the 2nd time... Below is my code...

I've also eliminated that the page is being cached. Again, the controller method is not being called the 2nd time around...

Controller

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetImage(Guid parentId)
{
    var la = Helper.Service.GetAttachmentByEntity(parentId, MembershipProvider.SecurityTicket).ToList();
    la.OrderByDescending(x => x.CreatedDate);

    return File(la[0].Data, la[0].ContentType);
}

View

<script type="text/javascript">
    $(function() {
        var iphcObject = $('#<%=imagePlaceHolderControl.ClientID %>');

        iphcObject.children().find('#imageUploadDialog').bind('onClose', function() {
            iphcObject.children().find('#image').attr('src', '<%=Url.Action("GetImage", "Image", new { parentId = Model.ParentId }) %>');
        });
    });
</script>

<asp:Panel ID="imagePlaceHolderControl" runat="server">
    <div style="border: solid 1px; width: <%=Model.Width%>; height: <%=Model.Height%>; text-align: center; vertical-align: middle;">
        <a href="#" onclick="$('#imageUploadDialog').dialog('open');" title="Add a picture...">
        <img id="image" src="<%=Url.Content("~/content/images/icon_individual_blank.gif") %>" /></a>
        <%Html.RenderDialog("imageUploadDialog", "Upload image...", "ImagePlaceHolder_Upload", "Image", Model, 235, 335); %>        
    </div>
</asp:Panel>

Answer 1

What is #image shouldn't it be find('img')? Or give the IMG an ID of 'image'.

Answer 2

Your <img> does not have the id image so .find('#image') isn't returning any elements.

Answer 3

I don't know ASP, but this line:

iphcObject.find('#image').attr('src', '<%=Url.Action("GetNewImage", "Image", new { parentId = Model.ParentId }) %>');

Appears to be parsed at the time the page is initially viewed, not when the new image is uploaded.

To fetch the new image's URL, send that data in the response to the POST request. This should be easy, especially if you use JSON or raw text for the transfer.

For the jQuery side:

$.post('<%=Url.Action("GetImage", "Image", new { parentId = Model.ParentId }) %>', {}, function(data) 
{
    iphcObject.find('#image').attr('src', data.newImageUrl);
}, 'json');

If anyone knows how to do it on the ASP side, please edit this post or make another!

Answer 4

I don't know ASP, but... Have you checked the HTTP headers? It could be that the image URL is being cached by the browser. Try LiveHTTPHeaders for Firefox and see what calls are actually making it to the server. Firebug may also be of some assistance here (it tracks cache hits in the browser vs network calls).