Template rendered callback

I'm using jquery tabs in my code. I need to call $('ul.tabs').tabs(); after once the HTML is rendered. But this is throwing error "Type : d[0] is undefined". The code which is used is below.

<template name="customersMapping">
    <div class="col s9 blue-grey lighten-5" id="side-right">
               <div class="row">
                    <div class="col s12"> 
                      <ul class="tabs" id="usersMappingTab">
                       {{#each customerClientMapping}}
                          <li class="tab col s2"><a href="#{{_id}}_Tab">{{name}}</a></li>
                       {{/each}}
                      </ul>
                    </div>
                    {{#each customerClientMapping}}
                        <div id="{{_id}}_Tab" class="col s12">
                            {{#each userChats ..}}
                                <div>{{name}}: {{message}}</div>
                            {{/each}}
                        </div>
                    {{/each}}
              </div>
           </div>

In client.js

Template.customersMapping.rendered = function() {
    if ($('#usersMappingTab').length > 0) {
                $('ul.tabs').tabs();
    }
};

Template.customersMapping.helpers({
    'customerClientMapping' : function() {
        return UserChatsMapping.find({cid : Meteor.userId()}, {sort: {time: -1}});
    },
    'userChats' : function() {
        return Messages.find({uid:this.uid}, {sort:{time: -1}});
    }
});

I think the jquery function is called before the HTML is rendered. Please let me know how to fix this.

I have divided into two template, one for managing subscriptions, and other for rendering tabs.

In the first template(customersMapping) we wait subscriptions to be ready.

When they are ready we can render our second template(tabs).

In tabs template's onRendered callback we can call jquery ui's tabs method without delaying the execution, because our data is already transferred to the client.

<head></head>

<body>
  {{> customersMapping}}
</body>

<template name="customersMapping">
    {{#if Template.subscriptionsReady}}
        {{> tabs}}
    {{else}}
        loading...
    {{/if}}
</template>

<template name="tabs">
   <div id="tabs">
       <ul>
       {{#each customerClientMapping}}
           <li><a href="#{{_id}}_Tab">{{name}}</a></li>
       {{/each}}
       </ul>
       {{#each customerClientMapping}}
           <div id="{{_id}}_Tab" class="col s12">
           <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
          </div>
      {{/each}}
 </div>

UserChatsMapping = new Mongo.Collection("userChatsMapping");

if (Meteor.isClient) {

  Template.customersMapping.onCreated(function() {          
      this.subscribe("userChatsMapping");
  });

  Template.tabs.helpers({
     customerClientMapping: function () {
         return UserChatsMapping.find().fetch();
     }
  });

  Template.tabs.onRendered(function() {
      $( "#tabs" ).tabs();
  });
}


// SERVER
if (Meteor.isServer) {
    Meteor.startup(function () {
    // put random data into collection
        if (UserChatsMapping.find().count() === 0) {
            _.each(_.range(10), function() {
                UserChatsMapping.insert({
                    name: faker.name.findName()
                });
            });
        }
 });

 Meteor.publish("userChatsMapping", function() {
     // simulate some delay
     Meteor._sleepForMs(2000);
     return UserChatsMapping.find();
 });
}