I am trying to display a jquery datatable populated with ember model data upon clicking a submit button. When I use ember handle bars, the jquery datatable is not rendered(i.e. it is rendered as a normal HTML table).Anybody has any idea what’s wrong here? here is my html file which contains datatable, submit button and few other fields:
<?xml version="1.0" encoding="UTF-8"?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TestPage</title>
<meta name="viewport" content="width-device-width" initial-scale="1">
<link href="tp/bootstrap-3.2.0-dist/css/bootstrap.css" rel="stylesheet">
<link href="tp/jquery/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet">
<link href="tp/jquery/datatables/css/jquery.dataTables.css" rel="stylesheet">
<link href="" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="tp/jquery/jquery-1.11.1.js"></script>
<script src="tp/jquery/jquery-ui-1.11.1.custom/jquery-ui.js"></script>
<script src="tp/jquery/datatables/js/jquery.dataTables.js"></script>
<script src="tp/ember/handlebars-1.1.2.js"></script>
<script src="tp/ember/ember-1.7.0.js"></script>
<script src="js/app.js"></script>
<script>
$(document).ready(function() {
$( "#radio" ).buttonset();
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
$('#example').dataTable( {
"scrollY": 200,
"scrollCollapse": true,
"jQueryUI": true
} );
} );
</script>
<style>
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em;
float: left;
width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0;
padding-right: .1em;
border-right-width: 1p;
border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em;
float: right;
width: 40em;}
</style>
</head>
<body>
<header id="headerArea" class="row">
<div class="col-md-2">
<!-- dst logo goes here -->
<img id="logo" src="images/DST-logo.png" alt=""/>
</div>
<div class="col-md-10">
<!-- header info goes here -->
<h1>AWD Customer Service</h1>
</div>
</header>
<div id="applicationArea" class="row">
<nav id="navigation" class="col-md-1">
<!-- nav stuff goes here -->
<ul>
<li>nav1</li>
<li>nav1</a></li>
<li>nav1</a></li>
</ul>
</nav>
<main id="content" class="col-md-10">
<!-- main content goes here -->
<form onSubmit="showTable()">
<section id="providerSearchForm">
<div class="row"> <!-- begin inputs, table row -->
<div id="providerSearchFormInputs" class="col-md-2">
<div id="radio"> <!-- begin radio div -->
<p>
<input type="radio" id="radio1" name="radio" />
<label for="radio1">Institutional</label>
</p>
<p>
<input type="radio" id="radio2" name="radio" checked="checked" />
<label for="radio2">Professional</label>
</p>
</div> <!-- end radio div -->
<p>
<label for="provider number">provider number</label><br>
<input type="text" id="provider number">
</p>
<p>
<label for="last name">last name</label><br>
<input type="text" id="last name">
</p>
<p>
<label for="first name">first name</label><br>
<input type="text" id="first name">
</p>
<p>
<label for="npi">npi</label><br>
<input type="text" id="npi">
</p>
<p>
<label for="tax id">tax id</label><br>
<input type="text" id="tax id">
</p>
<p>
<label for="specialty">specialty</label><br>
<input type="text" id="specialty">
</p>
<p>
<label for="zip">zip</label><br>
<input type="text" id="zip">
</p>
</div>
<!-- end div providerSearchFormInputs -->
<div class="col-md-10"> <!-- start searchtable div -->
<!-- putting datatable here-->
<table id="example" class = 'table' >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<script type="text/x-handlebars" id="posts">
{{#each}}
<tr>
<td>{{name}}</td>
<td>{{position}}</td>
<td>{{office}}</td>
<td>{{age}}</td>
<td>{{date}}</td>
<td>{{salary}}</td>
</tr>
{{/each}}
</script>
</table>
</div><!-- end searchtable div -->
</div> <!-- end inputs, table -->
<script type="text/x-handlebars">
<div>
<button type="submit">{{#link-to 'posts'}}Submit{{/link-to}}</button>
</div>
{{outlet}}
</script>
</section><!-- end section providerSearchForm -->
</form>
</main>
<aside id="asideArea" class="col-md-1">
<img src="images/MDWise_600x600-240x240.png" width="100%" alt=""/>
<img src="images/logo-centene.jpg" width="100%" alt=""/>
<img src="images/JHMI_logo_stacked.jpg" width="100%" alt=""/>
<img src="images/FirstCarolinaCare.gif" width="100%" alt=""/>
<img src="images/harvard_medical.jpg" width="100%" alt=""/>
<p>Dogs love to eat meat. So do cats... yada, yada, yada</p>
</aside>
<footer id="footerArea" class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!-- footer stuff goes here -->
Here is some footer content... Grecso pilsno snoggle sosgn idsphe sindnsl skjakch
</div>
</footer>
</body>
</html>
Below is my model:
App = Ember.Application.create();
App.Router.map(function() {
this.resource('providerSearchSubmit');
this.resource('posts' , function() {
});
});
App.PostsRoute = Ember.Route.extend({
model:function(){
return posts;
}
});
var posts =[{
position:'Software Engineer' ,
name: "Vinay",
office: "DST" ,
date: new Date('10-4-2014'),
salary: "50000" ,
age: "25"
}, {
position:'Project Lead' ,
name: "Thiru",
office: "DST" ,
date: new Date(),
salary: "60000" ,
age: "37"
}, {
position:'Senior Software Engineer' ,
name: "Ashok",
office: "DST" ,
date: new Date(),
salary: "60000" ,
age: "31"
}];