$.nano is not a function (jQuery Templating Engine-nano)

Updated Question

I am getting the error

$.nano is not a function

And this is my below code.. Any idea why is it happening so? Or is there anything that we have to import or include in my jQuery for this template engine..

window.onload=startDPSViewers;

        function startDPSViewers()
        {
            $('a.action.add-filter').text('');
            dps_ViewerManager.zoomViewerIndex = "http://somehost:8001/viewer/index.jsp";
            dps_ViewerManager.startViewers();
            DPS.startViewersOnLoad(); 
        }



var service_base_url = 'https://somehost/d/services/agile/getmeta?id=';
var id_popover_content = '#popover_content';
var search_agile_metadata  = service_base_url ;

    var id_popover = '#popover';
var id_popover_mask = '#popover-mask';
var template_popover_waiting    = '<div class="waiting"></div>';
var current_doc_info = {id:'', url:'', title:'', repo:'', app:'docsearch2', ts:'', user:''};
var template_popover = '<div id="popover" class="popover"><div class="content clearfix"><div class="t"></div><div id="popover_content"></div></div><div class="b"><div></div></div></div>';
var template_agile_meta = '<p class="item"><span class="label">{label}</span><span class="data">{data}</span></p>';

var template_popover_agile      = '<div id="popup-meta"><h4>Meta Data</h4><div class="popup-content"><div class="waiting">Getting meta data&#8230;</div></div></div>';
var id1='';
var mySplit= '';
var rj='';


 $(function(){



$('body').append($('<div id="popover-mask"></div>'));

        $(id_popover_mask).click(on_popover_close);

        $('body').append($(template_popover));




$('.show-more-info').live('click', function(e) {

        //alert("helo");
        e.preventDefault();

        $(this).addClass('active');

        show_popover_mask();

        // Position the popover
        var offset = $(this).offset();
        var left = offset.left - 442;
        var top = offset.top + 5;
        left = left + 'px';
        top = top + 'px';
        $(id_popover).stop(true, false).show().css({left: left,top: top}).attr('class', 'popover popover-show-info');


         current_doc_info.id = $('p', $(this).parent().parent().parent()).html();
        //alert("TTT:  "  +current_doc_info.id);
        id1 = $('a', $(this).parent().parent().parent().parent().parent()).html();
        //alert("helooss: " +id1);
        if(id1 == 'ASIC_IC')
        {
        mySplit= id1.split("_");
        rj = mySplit[0];
        //alert(" s1  "  +rj.toLowerCase());
        }
        if(id1== 'Part_Assembly')
        {
        mySplit= id1.split("_");
        rj = mySplit[0];
        //alert(" s2  "  +rj.toLowerCase());
        }
        if(id1 == 'Components (CE)')
        {
        mySplit= id1.split("s");
        rj = mySplit[0];
        //alert(" s3 " +rj.toLowerCase());
        //alert("kahan");
        }
        if(id1 == 'Document')
        {
        rj= id1;
        //alert(" s4 " +rj.toLowerCase());
        //alert("kahan");
        }
        if(id1 == 'Drawing/Schematic')
        {
        mySplit= id1.split("/");
        rj = mySplit[0];
        //alert(" s5 " +rj.toLowerCase());
        //alert("kahan");
        }
        if(id1 == 'Software')
        {
        rj= id1;
        //alert(" s6 " +rj.toLowerCase());
        //alert("kahan");
        }

        //alert("heloo: " +id);



        //alert($(this).parent().parent().parent().parent().html());

        $(id_popover_content).css({width:'500px'}).html(template_popover_agile);
                on_show_info_agile();
    });

    });

var show_popover_mask = function() {
//alert("a1");
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        //alert(maskHeight);

        //Set height and width to mask to fill up the whole screen
        $(id_popover_mask).css({
                'width': maskWidth,
                'height': maskHeight
        });

        //transition effect
        $(id_popover_mask).show().css({
                opacity: '0.33'
        });
    };


        var on_popover_close = function(e) {
//alert("hi");
        //e.preventDefault();
        $(id_popover_mask).hide();

        $(id_popover).hide();



        $('.show-more-info').removeClass('active');
    };




var on_show_info_agile = function() {
                //alert("aa");

    var outOfDomainAjaxCall = search_agile_metadata + current_doc_info.id;

    alert(outOfDomainAjaxCall);

                request_meta_info = $.ajax({
                url: "proxi.jsp?url=" + outOfDomainAjaxCall,
                type: 'GET',
                success: on_get_metadata_agile,
                error: on_get_metadata_agile_error

        });



    };


    var on_get_metadata_agile = function(data, text_status, XMLHttpRequest) {

            alert(text_status);
        console.log(data);



        var html = '';
        var info = {};

        $(data).find('attr').each(function() {

                info = {};
                info.data = $(this).attr('value');

                var name = $(this).attr('name');
                var $jq = jQuery.noConflict();
                switch (name) {
                case "TitleBlock.Number":
                    info.label = 'Item Number';
                    html += $jq.nano(template_agile_meta, info);
                    break;
                case "TitleBlock.Description":
                    info.label = 'Description';
                    html += $jq.nano(template_agile_meta, info);
                    break;
                case "TitleBlock.DocumentType":
                    info.label = 'Item Type';
                    html += $jq.nano(template_agile_meta, info);
                    break;
                case "TitleBlock.rev":
                    info.label = 'Item Rev';
                    html += $jq.nano(template_agile_meta, info);
                    break;
                case "TitleBlock.Category":
                    info.label = 'Category';
                    html += $jq.nano(template_agile_meta, info);
         开发者_Go百科           break;
                case "TitleBlock.ProductLine":
                    info.label = "Product Line";
                    html += $jq.nano(template_agile_meta, info);
                    break;
                case "TitleBlock.RevReleaseDate":
                    info.label = 'Modified Date';
                    html += $jq.nano(template_agile_meta, info);
                    break;
                case "TitleBlock.RevIncorpDate":
                    info.label = 'Incorporated Date';
                    html += $jq.nano(template_agile_meta, info);
                    break;
                }
        });


        $('#popup-meta').removeClass('waiting');
        $('#popup-meta .popup-content').html(html);
    };

    var on_get_metadata_agile_error = function(XMLHttpRequest, text_status, error) {
        //log('on_get_metadata_agile_error: ' + text_status);
        alert("error");
        $('#popup-meta').removeClass('waiting');
        $('#popup-meta .popup-content').html('<span class="data-error">Unable to get meta data.</span>');
    };

The most probable is that you are not including the nano <script> properly.

<script type="text/javascript" src="path/to/nano.js"></script>

Don't forget to put it before you use it, my advice is to include it in the <head> section after your jquery script inclusion.

Hope this helps. Cheers