All geek questions in one place

Re-rendering EJS file after ajax request

I am trying to make an Ajax call to my server by clicking href. When my href is clicked, I successfully go to my server and invoke a specific route. My route serves me correctly and sends me data. Below is a script that does this.

$('.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 redisplay the part I want to change. Below is the HTML part that I want to change.

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

I basically add the spider-chart.ejs file using the ejs include keyword. Below is the spider-chart.ejs file.

 <!-- 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>

This is basically a script that populates a div using a library with tall charts. As I understand it, there are two approaches that I could not follow.

something like that:

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

or something like this using ejs constructs:

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

I do not have much hope for this question, but there is no answer to this specific problem on any web resource.

+5
source share
1 answer

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

According to the .update() documentation , you need to use the .update() method, as you pointed out in your question. However, the documentation is unclear what the first argument represents.

Looking through the EJS code , I found that it really should refer to the identifier of the element. Although, you do not have an element with the identifier .tab-pane active in your code.

If you want to select an element by its class name, you need to use document.querySelector as such:

 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:

 function (event) { event.preventDefault(); $.getScript(/* ... */); }
+3
source

Source: https://habr.com/ru/post/1215775/

More articles:


All Articles