使用 ajax 和 django 引导弹出窗口和加载内容

Question

我知道它已经得到了一些答案，但我会努力的 :)。正如标题所说，我想添加 popover bootstrap 但加载 ajax 内容。我的 html，但我希望先显示加载消息，然后显示内容。

<p class='entry' data-adjaxload = '/calendar/entry/1'>Title1</p>
<p class='entry' data-adjaxload = '/calendar/entry/2'>Title2</p>
<p class='entry' data-adjaxload = '/calendar/entry/3'>Title3</p>

我的 django 视图如下

def entry_details(request, entry_id):
    entry = get_object_or_404(Entry, pk=entry_id)

    args = dict(entry=entry, user=request.user)

    if request.is_ajax():
        return render_to_response('mycal/ajax/entry_details.html', args)
    else:
        entry_form = EntryForm(instance=entry)
        args.update(entry_form=entry_form)
        return render_to_response('mycal/entry_details.html', args)

很简单。我正在使用相同的视图通过弹出窗口中的 ajax 加载 html 内容，或者通过正常的 get 请求加载详细信息页面

ajax详情页面：

<div class="entry">
    <p>{{entry.title}}</p>
    <p>{{entry.date}}</p>
    <p>{{entry.customer}}</p>
</div>

和脚本

$(document).ready(function(){
    $('p.entry').each(function (){
        var i = $(this);            
        $(i).bind('mouseenter', function(){
            i.popover({
                html:True,
                title:i.html(),
                content:'Loading'
            }).popover('show');                    
            $.ajax({
                url:i.data('ajaxload'),
                dataType:'html',
                success:function (data){
                        i.popover({content:data}).popover('show');

                    }
            });
        });
        $(i).bind('mouseleave', function(){
            i.popover('hide');
        });
    });
});

但是虽然它确实运行 tha ajx 并获取 html，但它不会将它们加载到弹出窗口中。我该如何改变呢？

Answer 1

Just fiddled 使用echo/json 动态更新弹出框内容，您正在寻找什么。

只需滚动p 元素并等待 3 秒延迟。

如果如您所说，数据正在正确加载，那么唯一需要的更改是：

var popover = i.data('popover');
popover.options.content = data.text;    
i.popover('show');