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

Posted 2023-02-24

【中文标题】使用 ajax 和 django 引导弹出窗口和加载内容

【英文标题】：Bootstrap popover and loading content with ajax and django

【发布时间】：2013-12-05 17:33:20

【问题描述】：

我知道它已经得到了一些答案，但我会努力的 :)。正如标题所说，我想添加 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，但它不会将它们加载到弹出窗口中。我该如何改变呢？

【问题讨论】：

既然您已经将i 声明为$(this)，则无需再次将其封装在$ 中。

谢谢。但仍然没有解决我的问题。但我按照你的建议从代码中删除了 $

尝试删除.popover('show')，因为调用popover(options) 仍然会显示弹出框。

全部？将它们全部删除根本没有显示弹出窗口。我没有触发选项。

你能写一个fiddle吗？这样调试会更容易。

【参考方案1】：

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

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

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

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

【讨论】：

我正在这样做，但我返回 undefined...i.data('popover') 在上面的代码中给了我 undefined 。也添加了 rel="popover" 但仍未定义。我正在使用 Bootstrap 3。正如我在生成的代码（开发人员控制台）中看到的那样，我的 p 元素中没有添加任何 data-popover 值

哦，原来是 bootstrap 3！在这种情况下，您是否正在初始化工具提示类see here？如果这不起作用，则删除 data-content 属性并每次使用弹出内容选项填充弹出内容，如.popover("content":"New Text goes here");

当鼠标进入 p 元素时我会“初始化”弹出框（第一篇文章）或者我应该在与 mouseenter 绑定之前做 $("p.entry").popover()

好的。 Here's an updated fiddle 适用于 Bootstrap 3.0。除了 AJAX 调用的 success 处理程序的方式之外，该代码与您在原始帖子中发布的代码相同。

检查弹出框的placement 属性。它可能正在重置。如果您将应用程序托管在某个地方，共享链接是否可行？