【发布时间】：2015-11-17 10:18:36
【问题描述】：
渲染此模板时。 html 是正确的，并且 html 表加载正确。但是我已经为某些单元格添加了特殊的弹出属性。这些在从同一页面上的 ajax 请求加载 html TemplateView 后不起作用。
我已经从 basehtml.html 中完全复制了 html 表和 javascript 的原始模板 html，并将其放入 servicepathtable_html_table.html。包括数据表在内的所有内容都加载到视图中。搜索功能和排序工作，但弹出和悬停不起作用。我知道表格 html 本身正在正确呈现。由于正确的字段使用该<td> 的html 属性以绿色突出显示
我认为它必须重新加载 DOM 或至少让 DOM 识别新的 html。任何有关使弹出框“工作”的帮助将不胜感激。
Ajax 请求：
$.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)
}
});
basehtml.html：
<div class="tab-pane fade in active" id="s1">
</div>
views.py：
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
servicepathtable_html_table.html：
{% load service_path_extras %}
{% load staticfiles %}
<div class = "well well-light">
<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-5" data-widget-editbutton="false">
<!-- widget edit box -->
<div class="jarviswidget-editbox">
<!-- This area used as dropdown edit box -->
</div>
<!-- end widget edit box -->
<!-- widget content -->
<div class="widget-body no-padding">
<table id="service_path_table" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th style="text-align:center"data-class="expand" class="col-sm-2"><h1 rel="popover-hover" data-placement="top" data-original-title="Service" data-content="Service is the partition or network segment name for a BU.<br>Click through for historical transitions.<br><br>Services Highlighted in <span class='badge bg-color-yellow'>yellow</span> have transitioned or added within the last 3 days." data-html="true"><strong>Service</strong></h1></th>
<th style="text-align:center"><h1 rel="popover-hover" data-placement="top" data-original-title="IP of Service" data-content="The Destination IP address of the corresponding Service<br>is checked from the HUB: hub1: <pre>sh ip bgp x.x.x.x</pre>" data-html="true"><strong>Service IP</strong></h1></th>
<th style="text-align:center"data-hide="phone"><h1 rel="popover-hover" data-placement="top" data-original-title="Best Path Router Hostname" data-content="The destination Hostname of the best path router. <br>Hover over name for more detail. <br>Click through for Statseeker Device View." data-html="true"><strong>Service Router</strong></h1></th>
<th style="text-align:center"data-hide="phone"><h1 rel="popover-hover" data-placement="top" data-original-title="Service Path Source Location" data-content="Location of running service. <br>Hover for Alternate Paths." data-html="true"><strong>Service Location</strong></h1></th>
<th style="text-align:center"data-hide="phone"><h1 rel="popover-hover" data-placement="top" data-original-title="SNMP Location" data-content="SNMP Location field of the best path router." data-html="true"><strong>Route Detail</strong></h1></th>
<th style="text-align:center"data-hide="phone,tablet"><h1><strong>Since</strong></h1></th>
</tr>
</thead>
<tbody>
{% for row in service_path_table %}
<tr>
{% if row.service_path_name in created_recent_service_names %}
<td align="center" class="success"><h6 rel="popover-hover" data-placement="top" data-original-title="Description" data-content="{{row.service_path_description}}"><strong><a href="/servicepathtable/{{row.service_path_id}}/">{{row.service_path_name}}</a></strong></h6></td>
{% elif row.service_path_name in recent_service_names %}
<td align="center" class="warning"><h6 rel="popover-hover" data-placement="top" data-original-title="Description" data-content="{{row.service_path_description}}"><strong><a href="/servicepathtable/{{row.service_path_id}}/">{{row.service_path_name}}</a></strong></h6></td>
{% else %}
<td align="center"><h6 rel="popover-hover" data-placement="top" data-original-title="Description" data-content="{{row.service_path_description}}"><strong><a href="/servicepathtable/{{row.service_path_id}}/">{{row.service_path_name}}</a></strong></h6></td>
{% endif %}
<td align="center"><h6 rel="popover-hover" data-placement="right" data-original-title="Raw Command Output" data-content="<pre>HTX-JC-HUB-2#{{row.sh_command_output}}</pre>" data-html="true">{{row.service_path_ip}}</td>
<td align="center"><h6 rel="popover-hover" data-placement="top" data-original-title="<h4>Quick Router Information</h4>" data-content="<div class='panel-body no-padding'>
<table class='table table-bordered table-condensed'>
<thead>
<tr>
<th align='center'>IP</th>
<th align='center'>Model</th>
<th>Tunnel Count</th>
<th>CPU One Minute Average</th>
</tr>
</thead>
<tbody>
<tr>
<td align='center'>{{row.ip}}</td>
<td>{{row.model}}</td>
<td align='center'>{{row.tunnel_count}}</td>
<td align='center'>{{row.cpu_uti_last_one_min}}%</td>
</tr>
</tbody>
</table>
</div>" data-html="true"><a href="http://NIM/cgi/nimc02?sort=&report=116&device={{row.hostname|convert_host}}">{{row.hostname}}</a></h6></td>
<td align="center"><h6 rel="popover-hover" data-placement="top" data-original-title="<h4>Alternate Paths</h4>" data-content="<div class='panel-body no-padding'>
<table class='table table-bordered table-condensed'>
<thead>
<tr>
<th>jConnect IP</th>
<th>Pref</th>
<th>Via IP</th>
<th>Loopback IP</th>
</tr>
</thead>
<tbody>
{% if row.alt_path_0_ip %}
<tr>
<td>{{row.alt_path_0_ip}}</td>
<td>{{row.alt_path_0_local_pref}}</td>
<td>{{row.alt_path_0_via_ip}}</td>
<td>{{row.alt_path_0_loopback_ip}}</td>
</tr>
{% endif %}
{% if row.alt_path_1_ip %}
<tr>
<td>{{row.alt_path_1_ip}}</td>
<td>{{row.alt_path_1_local_pref}}</td>
<td>{{row.alt_path_1_via_ip}}</td>
<td>{{row.alt_path_1_loopback_ip}}</td>
</tr>
{% endif %}
{% if row.alt_path_2_ip %}
<tr>
<td>{{row.alt_path_2_ip}}</td>
<td>{{row.alt_path_2_local_pref}}</td>
<td>{{row.alt_path_2_via_ip}}</td>
<td>{{row.alt_path_2_loopback_ip}}</td>
</tr>
{% endif %}
{% if row.alt_path_3_ip %}
<tr>
<td>{{row.alt_path_3_ip}}</td>
<td>{{row.alt_path_3_local_pref}}</td>
<td>{{row.alt_path_3_via_ip}}</td>
<td>{{row.alt_path_3_loopback_ip}}</td>
</tr>
{% endif %}
{% if row.alt_path_4_ip %}
<tr>
<td>{{row.alt_path_4_ip}}</td>
<td>{{row.alt_path_4_local_pref}}</td>
<td>{{row.alt_path_4_via_ip}}</td>
<td>{{row.alt_path_4_loopback_ip}}</td>
</tr>
{% endif %}
</tbody>
</table>
</div>" data-html="true">{{row.snmp_location|get_city}}</h6></td>
<td align="center">{{row.snmp_location}}</td>
<td align="center">{{row.date}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<script>
$(document).ready(function() {
var responsiveHelper_dt_basic = undefined;
var responsiveHelper_datatable_fixed_column = undefined;
var responsiveHelper_datatable_col_reorder = undefined;
var responsiveHelper_datatable_tabletools = undefined;
var breakpointDefinition = {
tablet : 1024,
phone : 480
};
/* TABLETOOLS */
$('#service_path_table').dataTable({
// Tabletools options:
// https://datatables.net/extensions/tabletools/button_options
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-6 hidden-xs'T>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
"bPaginate": false,
"oTableTools": {
"aButtons": [
{
"sExtends": "xls",
"sTitle": "ETS_Service_Path_Table",
},
{
"sExtends": "pdf",
"sTitle": "ETS_Service_Path_Table",
"sPdfMessage": "Service Path Table PDF",
"sPdfSize": "letter"
},
{
"sExtends": "copy",
"sButtonText": "Copy to Clipboard",
"oSelectorOpts": { filter: "applied", order: "current" }
},
{
"sExtends": "csv",
"sButtonText": "Export to CSV",
"sTitle": "ETS_Service_Path_Table",
"oSelectorOpts": { filter: "applied", order: "current" }
},
{
"sExtends": "print",
"sButtonText": "Print",
"oSelectorOpts": { filter: "applied", order: "current" }
}
],
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
},
"autoWidth" : true,
"preDrawCallback" : function() {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_datatable_tabletools) {
responsiveHelper_datatable_tabletools = new ResponsiveDatatablesHelper($('#service_path_table'), breakpointDefinition);
}
},
"rowCallback" : function(nRow) {
responsiveHelper_datatable_tabletools.createExpandIcon(nRow);
},
"drawCallback" : function(oSettings) {
responsiveHelper_datatable_tabletools.respond();
}
});
})
</script>
【问题讨论】：
标签： javascript python html ajax django