update div after ajax call

Question

<li>
    <div class="slidera_img">
    <a href="image.jpg" rel="example_group" title="<a href='#' onClick='ajaxpost(@item.Id)'><img src='foo.jpg'/></a>">
    <img  src="@Url.Action("ViewImage", "Image", new { id = item.Id, imageType = "thumb" })" alt="" width="100" height="100" />
    </a>
    </div>   
    <div class="slidera_num">@item.VoteCount</div>
</li>

I have the above code which opens a modal box, a href inside slidera_img div makes a ajax get with following code. After that I want to be able to update the div with slidera_num class to the current value i get from the ajax request.

<script type="text/javascript">
    function ajaxpost(id) {
        var item = $(this).parent();
        alert(item);
        $.get('@Url.Action("VoteAjax","Home")', { id: id }, function (response) {
            item.closest("li").find(".slidera_num").html(response.vote);
        });
    }

I tried above but no luck.

How can i do this?

Thanks.

Answer 1

first just link to the image you need:

<a href="image.jpg" rel="example_group"><img  src="@Url.Action("ViewImage", "Image", new { id = item.Id, imageType = "thumb" })" alt="" width="100" height="100" /></a>

then call fancybox to display it. on that call you can hook with the onComplete event that returns the item and then call any other ajax call you need to update the page. so just call it with:

$("img[rel='example_group'").fancybox({ onComplete: function(item){
  $.get('@Url.Action("VoteAjax","Home")', { id: item.id }, function (response) {
        $(item).closest("li").find(".slidera_num").html(response.vote);
    });
}});

Answer 2

Without knowing how fancybox works exactly, I can't help you much, but I can suggest some things:

1. Check in your browser if there's a javascript error. If either ajaxpost() or the ajax callback function fails, your code will not work.
2. Open your page in a browser with a debugger, for example a webkit browser with Web Inspector or Firefor with Firebug, and put a breakpoint in your ajaxpost() and the ajax callback, one in each. Check if you are selecting correct elements. Is item what you expect it to be? Is the selector chain in your ajax callback finding what you are expecting it to find?
3. Tell what the original ajaxpost() looks like and what exactly you added. Also tell us what your html is transformed into when your fancybox is loaded. You can also see this in Web Inspector or Firebug. With this info, someone may be able to help.