Ajax调用后更新div

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>

我上面的代码打开了一个模式框，slidera_img div内的href使以下代码获得ajax。 之后，我希望能够将带有slidera_num类的div更新为从ajax请求中获取的当前值。

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

我尝试以上但没有运气。

我怎样才能做到这一点？

谢谢。

Answer 1

首先只需链接到您需要的图像：

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

然后调用fancybox进行显示。 在该调用上，您可以挂钩onComplete事件，该事件返回该项目，然后调用您需要更新页面的任何其他ajax调用。 因此只需调用：

$("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

不知道fancybox的工作原理如何，我无法为您提供很多帮助，但是我可以提出一些建议：

1. 检查您的浏览器是否存在javascript错误。 如果ajaxpost（）或ajax回调函数失败，则您的代码将无法工作。
2. 在带有调试器的浏览器中打开页面，例如，具有Web Inspector的Webkit浏览器或具有Firebug的Firefor，然后在ajaxpost（）和ajax回调中分别放置一个断点。 检查您是否选择了正确的元素。 项目是您期望的吗？ Ajax回调中的选择器链是否在寻找您期望的内容？
3. 告诉您原始的ajaxpost（）是什么样的，以及您添加的内容是什么。 还请告诉我们您的fancybox加载时html会转换成什么。 您也可以在Web Inspector或Firebug中看到它。 有了此信息，也许有人可以提供帮助。