Ajax requests
Closed this issue · 4 comments
First, thanks for this repo. It's really helpful!
I need to retrieve some data using $.ajax and populate a table. So, I created a new .hbs file and added the following code, based on your datatables example:
logs.hbs
---
title: Logs
icon: fa fa-file-archive-o
scripts: $(function() { Metis.getLogs(); });
---
<!--Begin Datatables-->
<div class="row">
<div class="col-lg-12">
<div class="box">
<header>
<div class="icons"><i class="fa fa-file-archive-o"></i></div>
<h5>Current logs</h5>
</header>
<div id="collapse4" class="body">
<table id="logTable" class="table table-bordered table-condensed table-hover table-striped">
{{> logTable}}
</table>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!--End Datatables-->
I created a new logTable.hbs file that contains the row and columns:
<thead>
<tr>
<th>Created At</th>
<th>Action Id</th>
<th>Text</th>
<th>Project Id</th>
<th>Scenario Id</th>
<th>Id</th>
</tr>
</thead>
<tbody>
{{#if logTable}}
{{#each logTable}}
<tr>
<td>{{created_at}}</td>
<td>{{action_id}}</td>
<td>{{text}}</td>
<td>{{project_id}}</td>
<td>{{scenario_id}}</td>
<td>{{_id}}</td>
</tr>
{{/each}}
{{/if}}
</tbody>
Finally, I added a new logs.js in the assets/js/app folder that contains my ajax code:
;(function($){
"use strict";
Metis.getLogs = function() {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/api/v1/projects/5678/scenarios/9012/log',
dataType: 'json',
success: function(data) {
console.log('got data')
var logTable = data.logentries;
},
error: function(error) {
console.log(error);
}
});
};
return Metis;
})(jQuery);
I can see my js is called
How can I bind the result of my query to {{logTable}}? Should I create a template, create a helper for that?
I would welcome any help/tips on how to proceed.
Thanks.
@PierrickI3
metis uses handlebars files only while creating static html files.
For details : https://github.com/assemble/assemble
Thanks @onokumus , I just figured out that I can use jquery-datatables for this and it works.
So, just to make sure I understand: Are you saying that assemble and handlebars are used to generate the static html files in /dist and then if I want to add functionalities (like ajax requests), I should use these generated files only?
@PierrickI3
Yes. Assemble is used to generate the static html files. But http://handlebarsjs.com/ are not only used for this.
You can see the details from http://handlebarsjs.com/ For more professional works, use http://emberjs.com/