Django Templateview - 使用Boostrap Popovers加载HTML表格无效

时间:2015-08-24 05:00:22

标签: javascript python html ajax django

enter image description here渲染此模板时。 html是正确的,并且html表正确加载。但我已经为某些单元格添加了特殊的弹出属性。从同一页面上的ajax请求加载html Request_id后,这些操作无效。

我确实从 basehtml.html 复制了html表和javascript的原始模板html,并将其放入 servicepathtable_html_table.html 。视图中的所有内容都会加载,包括Datatable。搜索功能和排序工作,但弹出窗口和悬停不起作用。我知道表html本身正在被正确呈现。正确的字段使用该TemplateView

的html属性突出显示为绿色

我认为它必须在重新加载DOM或至少让DOM识别新的html时做些什么。任何有关使用弹出窗口工作的帮助" work"非常感谢。

Ajax请求

<td>

basehtml.html

$.ajax({
    url: "/servicepathapi/v1/servicepathtable_html/",
    type: 'GET',
    dataType: 'html', 
    success: function(result) {
      $('#s1').html(result);
      $.smallBox({
        title : "Table Loaded Successfully",
        content :
        "The API Works",
        color : "#79C1E4",
        timeout: 10000,
        icon : "fa fa-thumbs-up",
      });
        console.log(result)

    }
});

views.py

<div class="tab-pane fade in active" id="s1">
</div>

servicepathtable_html_table.html

class Servicepathtable_html_table(TemplateView):

    template_name = "servicepathtable_html_table.html"

    def get_context_data(self, **kwargs):
        context = super(Servicepathtable_html_table, self).get_context_data(**kwargs)
        enddate = date.today()
        startdate = enddate - timedelta(days=4)
        service_path_recents = ServicePathTableFull.objects.filter(date__range=[startdate, enddate])
        recent_service_names = [x.service_path_name for x in service_path_recents]
        service_path_created_recent = ServicePathTableFull.objects.filter(date_created__range=[startdate, enddate])
        created_recent_service_names = [x.service_path_name for x in service_path_created_recent]

        for service in created_recent_service_names:
            if service in recent_service_names:
                recent_service_names.remove(service)

        context['service_path_table'] = ServicePathTableFull.objects.all()
        context['service_paths'] = ServicePathPaths.objects.all()
        context['recent_service_names'] = recent_service_names
        context['service_path_recents'] = service_path_recents
        context['created_recent_service_names'] = created_recent_service_names
        return context

1 个答案:

答案 0 :(得分:0)

想出这个,我必须“重新初始化”标记为“popup-hover”的所有内容,之后我更换了html。

添加$("[rel=popover-hover]").popover({'trigger':'hover'});

<script type="text/javascript">
    $("#put_new").on("click", function(){
        $.ajax({
            url: "/servicepathapi/v1/servicepathtable_html/",
            type: 'GET',
            dataType: 'html',
            success: function(result) {
              $('#s1').html(result);
              $("[rel=popover-hover]").popover({'trigger':'hover'});
              $.smallBox({
                title : "Table Loaded Successfully",
                content :
                "The API Works",
                color : "#79C1E4",
                timeout: 10000,
                icon : "fa fa-thumbs-up",
              });
                console.log(result)

            }
        });
    });
</script>

Kuddos对这个问题:How do I use popover from Twitter Bootstrap to display an image?