ajax调用后更新div答案

【问题标题】：update div after ajax callajax调用后更新div
【发布时间】：2012-06-01 09:08:39
【问题描述】：

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

我在上面尝试过，但没有运气。

我该怎么做？

谢谢。

【问题讨论】：

为什么你的href标签在你的title属性中？

标签： javascript jquery css asp.net-mvc-3 fancybox

【解决方案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);
    });
}});

【讨论】：

【解决方案2】：

在不知道 fancybox 的具体工作原理的情况下，我帮不了你太多，但我可以提出一些建议：

如果出现 javascript 错误，请检查您的浏览器。如果要么 ajaxpost() 或 ajax 回调函数失败，你的代码不会工作。
在带有调试器的浏览器中打开您的页面，例如带有 Web Inspector 的 webkit 浏览器或带有 Firebug 的 Firefor，并在您的 ajaxpost() 和 ajax 回调中放置一个断点，各一个。检查您是否选择了正确的元素。项目是您期望的吗？ ajax 回调中的选择器链是否找到了您期望它找到的内容？
告诉原始的 ajaxpost() 是什么样的以及您添加的具体内容。还请告诉我们您的fancybox 加载时您的html 会转换成什么。您也可以在 Web Inspector 或 Firebug 中看到这一点。有了这些信息，也许有人可以提供帮助。

【讨论】：