I am using BackgridJs which uses Backbonejs to fill up a grid with data.
This is how my code looks like now:
<!DOCTYPE html>
<html>
<head>
<title>Terminal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../js/backgrid/lib/backgrid.css" />
<script src="../js/backgrid/assets/js/jquery.js"></script>
<script src="../js/backgrid/assets/js/underscore.js"></script>
<script src="../js/backgrid/assets/js/backbone.js"></script>
<script src="../js/backgrid/lib/backgrid.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="btn-group">
<a class="btn btn-ledger dropdown-toggle" data-toggle="dropdown" href="#">
Ledger
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">With Margin</a></li>
<li><a tabindex="-1" href="#">Without Margin</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-company-code dropdown-toggle" id = "company_code" data-toggle="dropdown" href="#">
Company Code
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">DHA</a></li>
<li><a tabindex="-1" href="#">HAC</a></li>
<li><a tabindex="-1" href="#">DHA</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-cost-centre dropdown-toggle" data-toggle="dropdown" href="#">
Cost centre
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">ALL</a></li>
<li><a tabindex="-1" href="#">NSE-EQ</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-type dropdown-toggle" data-toggle="dropdown" href="#">
Type
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">CLNT</a></li>
<li><a tabindex="-1" href="#">GENL</a></li>
<li><a tabindex="-1" href="#">MARG</a></li>
</ul>
</div>
<button type="submit" id = "submit" class="btn btn-success">
<i class="icon-circle-arrow-right icon-large"></i> Submit
</button>
<div id="example-1-result" class="backgrid-container"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../static/js/bootstrap.min.js"></script>
<script>
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory
//url: "examples/territories.json"
});
//var territories = new Territories();
var territory1 = new Territory({ name: "How Bizarre", pop: 20 });
var territory2 = new Territory({ name: "How ", pop: 21 });
var territories = new Territories([territory1,territory2]);
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
name: "pop",
label: "Population",
cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
name: "percentage",
label: "% of World Population",
cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
name: "date",
label: "Date",
cell: "date",
}, {
name: "url",
label: "URL",
cell: "uri" // Renders the value in an HTML anchor element
}];
// Initialize a new Grid instance
var refreshgrid = function(){
var grid = new Backgrid.Grid({
columns: columns,
collection: territories
});
// Render the grid and attach the root to your HTML document
$("#example-1-result").append(grid.render().$el);
}
// Fetch some countries from the url
//territories.fetch({reset: true});
$(".dropdown-menu li").click(function(){
$(this).closest('.btn-group').children('a').text($(this).text())
});
$('#submit').on('click', function(event) {
url = '/ledger/data'
company_code = $("#company_code").text();
// event.preventDefault(); // To prevent following the link (optional)
$.post( url, { name: "John", time: "2pm" },function(data){
ledgerData = JSON.parse(data);
refreshgrid();
});
//$.post(url,function(response){
// alert(response);
//});
});
</script>
</body>
</html>
When I get the JSON data in the Post request, I am not able to figure out how to feed it to the grid during the refreshgrid() call.
In most Backbonejs examples, the url is in the Model itself, but for me, the url keeps changing after every submit. So, how do I get the data and feed it to the grid?
By default, Backbone.js makes RESTful requests with an Accept header for application/json.
If you set a url property on a Collection, fetching the data is a simple as calling fetch
Read more about the Collection.url property here.
var CandiesCollection = Backbone.Collection.extend({url: "/candies"});
var c = new CandiesCollection;
c.fetch();
// GET /candies (Accept: application/json, text/javascript, */*; q=0.01)
Some more examples of Backbone doing magical work for you!
Backbone.js will automatically make a POST request when you save a new model (or use collection.create())
Likewise, it will automatically make a PUT request when you call model.save() on an existing model.
model.destroy() will make a DELETE request.
Aside from that, updating/refreshing is done exactly the same.