JQuery，Ajax，Handlebars清除表然后重新填充 [英] JQuery, Ajax, Handlebars clear table then repopulate
问题描述
构建出来的表单并抓取数据，然后使用handlebars.js填充表。如果数据发生变化，那么在第一次执行时会很好地工作，然后不会再次填充。任何想法如何让这个工作？
$（'a.button'）。on（click，function （e）{
e.preventDefault（）;
var date = $（'＃datepicker'）。val（）;
var func =get_all_swo_by_date;
// $（'table.output'）。empty（）;
$ .ajax（{
url：../includes/db_functions.inc.php，
type：post，
data：（{p：date，f：func}），
dataType：json，
success：function（results）{
var source = $（＃entry-template）。html（）;
var template = Handlebars.compile（source）;
$（'table.output'）。empty（）;
if（results.length> 0）
{
$ .each（results，function（i，context）{
$（'table.output'）。append（ template（context））;
}）;
} else {
$（'table.output'）。append（没有数据要返回。）;
}
}
}）;
}）;
当点击一个按钮类的a时，它会填充表格（如上所述以上）。确定现在，当你将datepicker更改为另一个日期，并用一类按钮单击a时，它不会重新填充表格。
如果有人有合理的想法，为什么它不起作用，请让我知道。请不要只是编造东西。我可以自己做很多.. :)
好的，这里是任何人都在寻找它的答案
在我添加更改的数据之前，我想要做的是清除表格，因此当我设置时：
$（'table.output'）。empty（）;
我认为这可能会起作用。然而，我很懒，并没有把我的handlebars.js模板带到另一个文件中，所以我所做的只是清理掉我的模板，所以无法重新填充。实质上，它甚至不存在。
因此，创建一个名为yourtemplate.handlebars的外部文件并将其添加到您的代码中。在我的情况下，它是swooutput.handlebars：
< tr>
< td> {{id}}< / td>
< td> {{item_no}}< / td>
< td> {{swo}}< / td>
< td> {{team_number}}< / td>
< td> {{employee_payrate}}< / td>
< td> {{customer_number}}< / td>
< td> {{customer_name}}< / td>
< td> {{customer_number}}< / td>
< td> {{week_ending}}< / td>
< / tr>
然后在js文件夹中创建一个templates.js文件，如下所示：
Handlebars.getTemplate = function（name）{
if（Handlebars.templates === undefined || Handlebars.templates [name] ===未定义）{
$ .ajax（{
url：name +'.handlebars'，
成功：函数（数据）{
if（Handlebars.templates === undefined） {
Handlebars.templates = {};
}
Handlebars.templates [name] = Handlebars.compile（data）;
}，
async：false
}）;
}
返回Handlebars.templates [name];
};
我从某个地方得到了这些信息，但现在不记得它在哪里。如果我这样做，我会发布链接。无论如何，不是在页面中使用模板，而是使用该函数来获取模板（使其比在运行时编译更快）。或者你可以使用预编译模板，我只是觉得这个方法更容易。
所以这里是最后的jquery ajax调用修改后的代码：
$（b）$
$（'a.button'）。on（click，function（e）{
e.preventDefault（）;
var date = $（'＃datepicker'）。val（）;
var func =get_all_swo_by_date;
// $（'table.output'）。empty（）;
$ .ajax（{
url：../includes/db_functions.inc.php，
type：post，
data：（{p ：date，f：func}），
dataType：json，
success：function（results）{
$（'table.output'）。empty（）;
var template = Handlebars.getTemplate（'swooutput'）;
$ .each（results，function（i，context）{
$（'table.output'）） .append（template（context））;
}）;
}
}）;
}）;
我希望这可以帮助下一个出现的人。
Build a form that goes out and grabs data then populates a table using handlebars.js. Works great on the first go around then won't populate again if data is changed. Any ideas on how to get this to work?
$('a.button').on("click", function(e){
e.preventDefault();
var date = $('#datepicker').val();
var func = "get_all_swo_by_date";
//$('table.output').empty();
$.ajax({
url: "../includes/db_functions.inc.php",
type: "post",
data: ({ p : date, f : func }),
dataType: "json",
success: function(results) {
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
$('table.output').empty();
if(results.length > 0)
{
$.each(results, function(i, context){
$('table.output').append( template(context) );
});
} else {
$('table.output').append("There is no data to return.");
}
}
});
});
When the "a" with a class of button is clicked it populates the table.. (as stated above). Ok now when you change datepicker to another date and click the "a" with a class of button it will not repopulate the table.
If someone has a legitimate idea of why it doesn't work please let me know. Please don't just make up stuff. I can do that plenty on my own.. :)
Ok so here is the answer in case anyone is looking for it down the road.
What I wanted to do was clear out the table before I appended changed data, so when I set the:
$('table.output').empty();
before the append I thought that might work. However, I was being lazy and had not take my handlebars.js template out to another file, so all I was doing is clearing out my template so it could not be repopulated. In essence it didn't even exist..
So create an external file called yourtemplate.handlebars and add your code to it. In my case it was swooutput.handlebars:
<tr>
<td>{{id}}</td>
<td>{{item_no}}</td>
<td>{{swo}}</td>
<td>{{team_number}}</td>
<td>{{employee_payrate}}</td>
<td>{{customer_number}}</td>
<td>{{customer_name}}</td>
<td>{{customer_number}}</td>
<td>{{week_ending}}</td>
</tr>
then create a templates.js file in a js folder like so:
Handlebars.getTemplate = function(name) {
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
$.ajax({
url : name + '.handlebars',
success : function(data) {
if (Handlebars.templates === undefined) {
Handlebars.templates = {};
}
Handlebars.templates[name] = Handlebars.compile(data);
},
async : false
});
}
return Handlebars.templates[name];
};
I got that from somewhere, but can't remember where at the moment. If I do I'll post the link. Anyway, instead of having the template in the page you use that function to grab the template (makes it faster than compiling at run time). Or you can use precompiled templates, I just find this method easier.
So here is the final jquery ajax call with the modified code:
$('a.button').on("click", function(e){
e.preventDefault();
var date = $('#datepicker').val();
var func = "get_all_swo_by_date";
//$('table.output').empty();
$.ajax({
url: "../includes/db_functions.inc.php",
type: "post",
data: ({ p : date, f : func }),
dataType: "json",
success: function(results) {
$('table.output').empty();
var template = Handlebars.getTemplate('swooutput');
$.each(results, function(i, context){
$('table.output').append( template(context) );
});
}
});
});
I hope this helps the next person that comes along.
这篇关于JQuery，Ajax，Handlebars清除表然后重新填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
