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>

我有上面的代码打开一个模态框，一个href里面的slidera_img div使用下面的代码得到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如何正常工作的情况下，我无法帮到你，但我可以提出一些建议：

检查浏览器是否存在javascript错误。如果是 ajaxpost（）或ajax回调函数失败，你的代码不会工作
使用调试器在浏览器中打开您的页面，例如使用Web Inspector或Firefor with Firebug的webkit浏览器，并在ajaxpost（）和ajax回调中放置一个断点，每个都有一个。检查您是否选择了正确的元素。项目你期望它是什么？你的ajax回调中的选择器链是否找到了你期望它找到的东西？
告诉原始的ajaxpost（）是什么样的，你究竟添加了什么。还要告诉我们在加载fancybox时你的html会被转换成什么。您还可以在Web Inspector或Firebug中看到此信息。有了这些信息，有人可能会提供帮助。

ajax调用后更新div

2 个答案: