Javascript/ASP - Not working

Question

I must be looking wrong on this but I can't find the trick:

       <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script> 
        <script src="http://www.listinventory.com/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt; 
        <script type="text/javascript" src="http://code.google.com/p/jquery-utils/source/browse/trunk/src/jquery.countdown.js"&gt;&lt;/script&gt; 
<script type="text/javascript">
        $(function hello() {
            // function that does something exciting? 
            var liftOff = function () {
                // ....  
            };

            // Get a date that is some (short) time in the future 
            var getDeadline = function () {
                var shortly = new Date();
                shortly.setSeconds(shortly.getSeconds() + 5.5);
                return shortly;
            };

            // Attach click handler to all our buttons 
            $("div.mainpanel button.resetButton").click(function (event) {

                // I am assuming that you will not be nesting these controls? 
                var $mainpanel = $(this).parents("div.mainpanel")   // this will find the mainpanel div that contains the pressed button 
                .effect("highlight", {}, 700);

                $("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel 
                .countdown('change', { until: getDeadline() });
            });

            // Start all countdowns going on page load 
            $('#shortly').countdown({
                until: getDeadline(),
                onExpiry: liftOff,
                layout: '{sn}'
            });
        });

</script>


    <div class="mainpanel"> 
    <div> 
        test 
    </div> 
    <div class="shortly"> 

    </div> 
    <button class="resetButton"> 
        Reset 
    </button> 
</div>

</asp:Content>

I get an "Microsoft JScript runtime error: Object doesn't support this property or method" exception in the countdown.

Answer 1

You could try to drop the "hello" from $(function hello() { It is not necessary.

Where is the code for the countdown method? is this in a JQuery plugin or is it a function of your own?

Answer 2

Is it possible the naming of $mainpanel is conflicting with something else? Try renaming this to another name (without the $).

Answer 3

I think it must be how you reference your plug-in code. I pasted the code in-line and it works without and error.

See here for my test: http://jsfiddle.net/3UwCg/