在ajax请求之后重新呈现EJS文件

I am trying to make an Ajax call to my server upon a href click. When my href is clicked I successfully go to my server and call a defined route. My route serves me correctly and sends me back the data. Here below is the script which does that.

我试图在点击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");
           }
       });
   });
});

At this point I need to re-render the part which I want to change. Here below is the part of HTML that I want to change.

此时我需要重新渲染我想要改变的部分。下面是我想要更改的HTML部分。

<div class="panel-body text-center"><% include partials/spider-chart.ejs %> </div>

Basically I add a spider-chart.ejs file using the ejs's include keyword. Below is the spider-chart.ejs file.

基本上我使用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>

Basically it is a script which populates a div using high-charts library. As far as I understood there are two approaches which both I failed to make work.

基本上它是一个使用高图表库填充div的脚本。据我所知，有两种方法我都没有做好工作。

something like this:

像这样的东西：

$("#id").innerHtml = "<div class='panel-body text-center'> <% include partials/spider-graph.ejs %> </div>";

or something like this using ejs constructs:

或使用ejs构造的类似内容：

new EJS({url : 'partials/spider-chart.ejs' }).update('.tab-pane active', result);

I don't have high hopes for this question but there is no answer to this particular problem in any any web resource.

我对这个问题没有寄予厚望，但在任何任何网络资源中都没有对这个特定问题的答案。

1 个解决方案

#1

If I understand well, the /spiderSwitch resource contains JSON data that you would like to use to populate the EJS template, and inject the generated HTML in the element that has the following class names: panel-body text-center.

如果我理解的话，/ spiderSwitch资源包含您希望用于填充EJS模板的JSON数据，并将生成的HTML注入具有以下类名的元素：panel-body text-center。

According to the EJS documentation, you need to use the .update() method, as you stated in your question. However, the documentation is unclear on what does the first argument represent.

根据EJS文档，您需要使用.update（）方法，如您在问题中所述。但是，文档不清楚第一个参数代表什么。

By browsing the EJS code, I found that it actually should refer to an element's ID. Though, you don't have any element with the .tab-pane active ID in your code.

通过浏览EJS代码，我发现它实际上应该引用元素的ID。但是，您的代码中没有任何带有.tab-pane活动ID的元素。

If you want to select the element by its classname, you need to use document.querySelector as such:

如果要按类名选择元素，则需要使用document.querySelector：

new EJS({
    url: 'partials/spider-chart.ejs'
}).update(
    document.querySelector('.panel-body.text-center'),
    result
);

By the way, as @balder said, you have a reference error in your code, if you want to use the event argument, you must declare it in the function arguments:

顺便说一下，正如@balder所说，你的代码中有一个引用错误，如果你想使用event参数，你必须在函数参数中声明它：

function (event) {
    event.preventDefault();

    $.getScript(/* ... */);
}

#1