使用 Ajax 填充模态表
Posted
技术标签:
【中文标题】使用 Ajax 填充模态表【英文标题】：populate a modal table with Ajax 【发布时间】：2018-02-07 09:13:21 【问题描述】：好的，我已经在这个问题上工作了一个多星期，但仍然无法找到可行的解决方案，我有点难过。我遇到的问题是我正在尝试使用 ajax 在单击事件上以模式将数据加载到表中。我尝试了几种不同的实现，但我对 Ajax 和 javascript 很陌生。这是我所拥有的。
我将两个字典从我的控制器传递给我的模板作为上下文：
views.py
def queries_search(request):
...
context =
"title":"Search",
'data': list(od.iteritems())[:10],
'methods': od_methods.iteritems(),
return render(request, 'results.html', context)
我从那里获取第一个字典并使用迭代模板标签将结果传递给表
% if data %
<section class="results-section">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id='loader' class="center-block">
<p>Searching<img src='% static "img/ellipsis.svg" %'></p>
<img class="center-block" src='% static "img/gears.svg" %'>
</div>
<div id='results_donwload'>
<a href="% static 'mycsvfile.csv' %" > Downlaod Search Results </a>
<img style="width: 12%;" src='% static "img/download-icon.png" %'>
</div>
<table class="table table-bordered table-striped table-hover table-responsive" id="results-table" >
<thead>
<tr>
<th style="width: 4%">#</th>
<th>Study Reference</th>
<th>Study Methods</th>
<th>Study Data</th>
<th>Study Tools</th>
<tr>
</thead>
<tbody>
% if data %
% for key, value in data %
<tr>
<td scope="row"> forloop.counter .</td>
<td>
<div id="popup">
<p class="citation" data-hover=" value.2 "> value.1
<img src='% static "img/expand-icon2.png" %' id="expand"></p>
<a class="article" target="_blank" href= value.3 > value.2 </a>
</div>
</td>
% if value.4 %
<td class='test'> value.4|truncatewords:20 <a href='#' id="trigger_ forloop.counter "><img src='% static "img/expand-icon2.png" %' id="expand" data-remote="false"></a>
在此之后，我有一个图标，单击该图标会弹出一个显示单元格数据的模式。
% if methods %
% for key2, value in methods %% ifequal key2 key %
<div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="classModalLabel">
Triples:
</h4>
</div>
<div class="modal-body">
<table id="classTable1" class="table table-bordered">
<thead>
<tr>
<th style="width: 4%">#</th>
<th>Subject</th>
<th>Predicate</th>
<th>Object</th>
<tr>
</thead>
<tbody id='methods_table_data'>
% for item in value %
<tr>
<td scope="row"> forloop.counter .</td>
<td> item </td>
<td> item </td>
<td> item </td>
</tr>
% endfor %
</tbody>
</table>
</div>
但是，这是我卡住的地方，因为模态无法使用我迄今为止编写的 javascript 运行，即：
$('.test').each(function()
var trig = '[id^="trigger_"]';
$(trig).click(function(e)
e.preventDefault();
$.ajax(
url: "/searchTriples/search/",
method: "GET",
dataType: "json",
data: " methods|safe ",
async: true,
success: function (data)
$("#classTable1").html(data);
$("#classModal").modal('show');
//return false;
,
);
//return false;
)
);
控制台输出：
29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262
感谢任何帮助，谢谢！
【问题讨论】：
您目前看到了什么？您是否收到错误、重复结果等任何问题？ 嗨乔纳森，我刚刚用控制台输出更新了我的帖子 尝试控制台记录来自 Ajax 成功的结果数据。你看到什么了吗？ 不，当我添加错误控制台检查时，我仍然得到与上面相同的输出。 要对此进行测试，请尝试确保从/searchTriples/search/ 获得一些纯字符串响应。如果您可以在浏览器控制台中显示它，这将有助于确定任何其他问题
【参考方案1】：
我建议不要重新发明***，而是查看Bootstrap Table 或DataTables 之类的工具。
两者都是 jQuery 的全功能表格插件，支持 Bootstrap，通过 AJAX 加载数据的各种方式，并提供全面的文档。
编辑：对于引导表，开始 here。一般来说，我更喜欢 using data attributes 而不是显式 JavaScript。为了通过 AJAX 加载数据，您将使用 data-url 属性，如下所示：
<table data-toggle="table" data-url="/url/to/json_endpoint">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
您的 AJAX 端点应返回以下格式的数据：
[
"id": 1,
"name": "Item 1",
"price": "$1"
,
"id": 2,
"name": "Item 2",
"price": "$2"
,
"id": 3,
"name": "Item 3",
"price": "$3"
]
【讨论】：
嗨，克里斯，感谢您的帮助，但您能说得更具体一点吗？我已经加载了引导表并开始查看文档，但如果你能指出我正确的方向，那就太好了。 添加了一个使用示例以上是关于使用 Ajax 填充模态表的主要内容，如果未能解决你的问题，请参考以下文章
C# 控制器数据到 JavaScript 但是当使用 RETURN JSON 模态消失/成功后刷新 ajax 模态
无法更改 css 模态引导程序。引导程序中的模态淡入淡出自动添加填充左 15px