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

但是虽然它确实运行了ajx并获取了html，但它不会将它们加载到popover上。我怎么能改变它？

Answer 1

Just fiddled您正在寻找使用echo/json动态更新popover内容的内容。

只需翻转p元素并等待3秒延迟。

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

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

Bootstrap popover并使用ajax和django加载内容

1 个答案: