Hi ,
I am using open erp web frame work. I have a template which displays names of aps.
When clicking on this ap names i want to load another template .
My java script code is 

  openerp.wlan = function(instance) {
    var _t = instance.web._t,
        _lt = instance.web._lt;
    var QWeb = instance.web.qweb;
    instance.wlan = {};
    instance.wlan.HomePage = instance.web.Widget.extend({
        start: function() {
            var self = this;
            var model = new instance.web.Model("wlan.master");
            model.call("get_ap_details", [], {context: new instance.web.CompoundContext()}).then(function(result) {
                console.log(aps_names);
                var aps_names = new Array();
                result.forEach(function(value, i) {
                    aps_names[i] = value[0]
                });
                self.$el.append(QWeb.render("wlanHomePageTemplate",{aps_names:aps_names}));

                self.$el.find(".a_ap_name").click(function() {
                    var details = new instance.wlan.DetailsPage(this);
                    //details.appendTo(self.$el);
               // here i want code for displaying second template

                });
            });
        },
    });
    instance.web.client_actions.add('wlan.homepage', 'instance.wlan.HomePage');

 My templates code is
  <?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="wlanHomePageTemplate">
        <div  id="home" class="page_heading">
            <div id="pageheading_text">
                 QA101n 150M Wireless Broad Band Router
            </div>
         </div>
         <div id="aps_names">
            <div id="ap_name"> AP Names </div>
                <t t-foreach="aps_names" t-as="ap_name">
                    <div>
                        <a class="a_ap_name" href="#"><t t-esc="ap_name"/></a>
                     </div>
                </t>
            </div>
    </t>
 <t t-name="wlanDetailsPageTemplate" style="background-image: url('http://ipv6.com/images/generic/30.jpg');
    background-repeat: no-repeat;
    height: 100px;">
        <div id="details" class="page_heading">
            <div id="pageheading_text">
                QA101n 150M Wireless Broad Band Router
            </div>
        </div>
</t> 

I want to load "wlanDetailsPageTemplate"  on button click.Please help !!