Gmail contextual Gadget - does not support reference JS and CSS?

Question

I was trying to create a Gmail Contextual Gadget and get to know that it doesn't support referencing JS and CSS files. It doesn't load Javascripts and CSS. I have to copy paste the whole CSS and Javascript then only it works.

Please find my code below : It is just to display tabbed layout in gadget.

    <link href="http://54.251.60.219/staging/google/gadget_ui/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
    <script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
    <script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-ui-1.10.3.custom.js"></script>
    <script>
    $(function() {      
        $( "#tabs" ).tabs();
        // Hover states on the static widgets
        $( "#dialog-link, #icons li" ).hover(
            function() {
                $( this ).addClass( "ui-state-hover" );
            },
            function() {
                $( this ).removeClass( "ui-state-hover" );
            }
        );
    });
    function showList(){
        $('#cust-list').show();
    }
    function save(){
        if(!$('input[name=customer]:checked').length)
            alert('You need to select a customer to save an email.');
    }
    </script>

    <style>
    #main {
        margin: 0px;
        padding: 0px;
        font-size: small;
    }
    </style>

    <!-- <div id="main" style="display: none">
    </div>

    <div id="approval" style="display: none">
        <img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif">
        <a href="#" id="personalize">Personalize this gadget</a>
    </div>

    <div id="waiting" style="display: none">
        Please click
        <a href="#" id="approvaldone">I've approved access</a>
        once you've approved access to your data.
    </div> -->

    <div id="loadinggadget"><h2>PS NetSuite Gadget</h2></div>
    <style>
        body{
            font: 62.5% "Trebuchet MS", sans-serif;
            margin: 50px;
        }
        .demoHeaders {
            margin-top: 2em;
        }
        #dialog-link {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #dialog-link span.ui-icon {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #icons {
            margin: 0;
            padding: 0;
        }
        #icons li {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
        #icons span.ui-icon {
            float: left;
            margin: 0 4px;
        }
        .fakewindowcontain .ui-widget-overlay {
            position: absolute;
        }
        </style>
    <!-- Tabs -->
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Login</a></li>
                <li><a href="#tabs-2">Customers</a></li>
            </ul>
            <div id="tabs-1">

                <table cellpadding='0' cellspacing='0' border='0' width='100%'>
                <tr><td bgcolor="white" style="padding:5"><br>
                <form method="post" action="#" name="aform" target="_top">      
                <table>
                <tr><td><font face="verdana,arial" size=-1>Login:</font></td><td><input type="text" name="login"></td></tr>
                <tr><td><font face="verdana,arial" size=-1>Password:</font></td><td><input type="password" name="password"></td></tr>
                <tr><td><font face="verdana,arial" size=-1>Account Id:</font></td><td><input type="text" name="accid"></td></tr>
                <tr><td><font face="verdana,arial" size=-1>&nbsp;</font></td><td><font face="verdana,arial" size=-1><input type="submit" value="Save"></font></td></tr>
                <tr><td colspan=2><font face="verdana,arial" size=-1>&nbsp;</font></td></tr>        
                </table>
                </form>
                </td></tr></table>  

            </div>
            <div id="tabs-2">
            <button onclick="showList()"/>Get Customers</button>
            <button onclick="save()"/>Save To NetSuite</button>
                <div id="cust-list" style="display:none">
                    <input type="radio" name="customer" value="cust1"> Customer </input><br/>
                    <input type="radio" name="customer" value="cust1"> Customer </input><br/>

                <div>
            </div>
        </div>


    <script type="text/javascript">

    gadgets.window.adjustHeight(200);

    function initGadget() {
        gadgets.window.adjustHeight(200);

    }

    gadgets.util.registerOnLoadHandler(initGadget);






  </script>
]]>

I am getting error : "$ is not defined". But this code works in plain HTML file.

Thanks in advance.

Answer 1

Perhaps your web site uses another library. Try use "jQuery" instead of "$"

Answer 2

Well, @aayushi... gadget container doesn't allow to load files from unsecured http. In your code you are loading files using http

<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>

Instead of that try using https

<script src="https://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>

And if your server/application/project is not using https, then you have to make it first. And just to be sure of this solution try loading this for jquery and/or for any other library files like: bootstrap, jquery-ui, etc.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>