Jquery datatable is not rendered when Ember Handle bars are used


#1

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" 
}];

#2

You’re setting up your datatables on first page load with the $(document).ready() call. At that time Ember isn’t even running yet, so your table isn’t populated and there’s no way it can do what you want it to.

Instead, you’ll want to put the datatable initialisation in a component, use the component to wrap the content to be processed and then you use the didInsertElement event to trigger the datatable code. That component’s code needs a name with a dash (e.g. datatable-wrapper) and its code should look something like:

  tagName: 'table'
  classNames: ['table'],
  _didInsertElement: function() {
     this.$().dataTable({
        scrollY: 200,
        scrollCollapse: true,
        jQueryUI: true
     });
  }.on('didInsertElement')

this.$() in a component gives you a jQuery selector which refers to the outer component element that was inserted into the page, so here that would be the created <table> element.

You’ll need a template for the component, nothing more than:

{{yield}}

And you include the component in your content like:

   {{#datatable-wrapper}}
      <thead>
         <tr>
             <th>Name</th>
             <th>Position</th>
             <th>Office</th>
             <th>Age</th>
             <th>Start date</th>
             <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          {{#each person}}
          <tr>
             <td>{{name}}</td>
             <td>{{position}}</td>
             <td>{{office}}</td>
             <td>{{age}}</td>
             <td>{{date}}</td>
             <td>{{salary}}</td>
          </tr>            
         {{/each}}
      </tbody>
   {{/datatable-wrapper}}

For the correct ways to define components without ember-cli (nothing here is ember-cli specific, but I only use that now) have a look at http://emberjs.com/guides/cookbook/helpers_and_components/

I hope this helps.


#3

@Leeft, Thanks much for your response. It would be great if you can share an example since I am very new to Ember.