Menu
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.
$('.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.
<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.
<!-- 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.
something like this:
$("#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 don't have high hopes for this question but there is no answer to this particular problem in any any web resource.
415
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.
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.
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.
If you want to select the element by its classname, 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(/* ... */);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
