Append a Jade file to a div in parent Jade file on Button click

Question

I tried to find solution for the past 3 days but no luck.

My requirement is to load highcharts which has some data for analysis. I have to load 50 such charts with each chart holding a million points . To get rid of the browser collapse, I decided to load 10 charts at once and give a show more button at the bottom of the page which onclick should load another 10 charts on the same page below the existing 10.

Issue:

• No idea on how to append a jade file to a div on a button click to the existing jade file .

What i did:

• I have two jade file named jade1to10.jade and jade11to20.jade with there respective .js(angular) files for charts configurations.
• I can load them individually on different tabs.
• I tried Include option in jade but that loads on the compile time and want the second page to load/append to the parent jade after the button click .

I am using angular controllers in the jade to load charts. Please give your inputs to find a fix. Thanks in advance.

Answer 1

OK, I think I got it.

Actually you need to use ajax. When the user clicks the button, then send a ajax request to the server and return the charts in html form to you. Finally just insert them into your div.

To compile the file from jade form into html form, See the following example.

var jade = require('jade')
var file = fs.... //onefile, must be a string.
var template = jade.compile(file)
var result = template(locals) //the locals is a object which contains the variables you want to pass to the template. 

....
app('/',function(req,res){
    res.send(result)
)

You can also just pass the data to the client, and transform them into which you want then insert into the div. That can reduce the network consumption.

Hope it will be helpful.