ral*_*aul 5 javascript ajax ejs highcharts node.js
我试图在点击href时对我的服务器进行Ajax调用.单击我的href后,我成功转到我的服务器并调用已定义的路径.我的路线正确地为我服务并将数据发回给我.下面是执行该操作的脚本.
$('.graph-switch').click(function (){
event.preventDefault();
$.getScript("js/ejs_production.js", function()
$.ajax({
url:'/spiderSwitch',
type: 'GET',
data: { type: $(this).attr('href') },
success: function(result){
console.log(result); // correctly displayed
// WHAT TO DO AT THIS POINT??
},
error: function(){
alert("well this is not working");
}
});
});
});
此时我需要重新渲染我想要改变的部分.下面是我想要更改的HTML部分.
<div class="panel-body text-center"><% include partials/spider-chart.ejs %> </div>
基本上我使用ejs的include关键字添加一个spider-chart.ejs文件.下面是spider-chart.ejs文件.
<!-- views/partials/spider-chart.ejs -->
<!--NOTE: host pages must include the following in <head>-->
<!--<script src='http://code.jquery.com/jquery-1.6.1.js'></script>-->
<!--<script src="scripts/SpiderChartControl.js"></script>-->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="chart" style="min-width: 300px; max-width: 1000px; height: 300px; margin: 0 auto"></div>
<script>
var spiderGraphData = <%- JSON.stringify(spiderGraphData) %>
var options = {
metric: 'accuracy'
}
console.log(JSON.stringify(spiderGraphData));
SpiderChartControl.draw("chart", spiderGraphData, options);
</script>
基本上它是一个使用高图表库填充div的脚本.据我所知,有两种方法我都没有做好工作.
这样的事情:
$("#id").innerHtml = "<div class='panel-body text-center'> <% include partials/spider-graph.ejs %> </div>";
或使用ejs构造的类似内容:
new EJS({url : 'partials/spider-chart.ejs' }).update('.tab-pane active', result);
我对这个问题没有寄予厚望,但在任何任何网络资源中都没有对这个特定问题的答案.
如果我理解得很好，该/spiderSwitch资源包含您想要用来填充 EJS 模板的 JSON 数据，并将生成的 HTML 注入具有以下类名的元素中：panel-body text-center。
根据EJS 文档，您需要使用该.update()方法，正如您在问题中所述。但是，文档不清楚第一个参数代表什么。
通过浏览EJS代码，我发现它实际上应该引用一个元素的ID。不过，您的代码中没有任何带有该.tab-pane activeID 的元素。
如果你想通过元素的类名来选择元素，你需要document.querySelector这样使用：
new EJS({
url: 'partials/spider-chart.ejs'
}).update(
document.querySelector('.panel-body.text-center'),
result
);
顺便说一句，正如@balder所说，你的代码中有一个引用错误，如果你想使用该event参数，你必须在函数参数中声明它：
function (event) {
event.preventDefault();
$.getScript(/* ... */);
}
| 归档时间： |
|
| 查看次数： |
2337 次 |
| 最近记录： |