Strange problems with client side script

Dec 7, 2011 at 8:28 PM
Edited Dec 7, 2011 at 8:29 PM

Hi guys,

I'm very new to AJAX and ASP.net though a seasoned C# and C++ developer. I'm finding it hard to find any good guidance on writing Client Side Javascript, but have managed to get a custom control (a photo browser) up and running through trial and error. My problem is that I am now stuck with some very strange errors when I debug the script through the FireFox Javascript debugger that I am unable to resolve. Basically it tells me that the SetSelectedThumbBox function is not a function despite the fact that the function is successfully called in the init function but then fails to work from that point on. It is also complaining about setInterval(this.FadeUp, 10); and tells me that it is a useless call because there are missing quotes around the argument. the trouble is that the call seems to be working just fine and if i do put quotes around the argument it stops working.

Below is my sample Client Script, it seems to be mostly working apart from these odd errors and functions working when called once then suddenly not being recognised as functions on any subsequent calls. I've been searching for a couple of days now but really can't find any information on what I'm doing wrong! Any pointers would be gratefully received!

 

/// <reference name="MicrosoftAjax.js"/>
Type.registerNamespace("CustomControls");

CustomControls.ClientControl1 = function(element) 
{
    CustomControls.ClientControl1.initializeBase(this, [element]);
}

CustomControls.ClientControl1.prototype =
{
    initialize: function () {
        CustomControls.ClientControl1.callBaseMethod(this, 'initialize');

        // Store some global java variables in the window object, in AJAX it seems we store these directly in the window object and not by defining vars.....
        window.PhotoViewerWindow = document.getElementById('PhotoViewBox');
        window.PhotoViewerWindow.style.opacity = '0'; // set its initial opacity to 0

        window.$addHandler(window.PhotoViewerWindow, "click", this.TestMe, true);

        // initialise some global variables
        window.AspectRatio = 1.519756;
        window.ImageCount = 10;
        window.ThumbCount = 10;
        window.CurrentThumbBoxID = 0;
        window.PreviousThumbBoxID = 0;

        window.CurrentImageID = 0;

        window.onresize = this.Resize;

        // Add the click event handlers to the thumbnail buttons
        for (a = 0; a < window.ThumbCount; a++) {
            $addHandler($get("ThumbBox" + a.toString()), 'click', Function.createCallback(this.SetImage, new Array(document.getElementById('ThumbData' + a.toString()).value, a.toString())), true);
        }

        this.SetThumbs();
        this.Resize();
        this.FadeUp();
        this.SetImage(null, new Array(1, 1));
    },
    SetImage: function (e, args) {
        var ID = args[0];
        var ThumbBoxID = args[1];

        // Only change if we're not parked on that image
        if (ID != CurrentImageID) {
            PhotoViewerWindow.style.opacity = '0'; // set its initial opacity to 0
            PhotoViewerWindow.src = "Images/" + ID.toString() + ".jpg";
            CurrentImageID = ID;

            PreviousThumbBoxID = CurrentThumbBoxID;
            CurrentThumbBoxID = ThumbBoxID;

            this.SetSelectedThumbBox();
            this.FadeUp(); // start animating
        }
    },
    SetThumbs: function () {
        for (a = 0; a < ThumbCount; a++) {
            var ThumbBox = document.getElementById('ThumbBox' + a.toString());
            ThumbBox.src = "Images/" + a.toString() + ".jpg";
        }
    },
    FadeUp: function () {
        PhotoViewerWindow.style.opacity = parseFloat(PhotoViewerWindow.style.opacity) + 0.05;

        if (parseFloat(PhotoViewerWindow.style.opacity) < 1) {
            setInterval(this.FadeUp, 10);
        }
    },
    SetSelectedThumbBox: function () {
        // highlight the selected ThumbBox
        if (undefined != CurrentThumbBoxID) {
            $get("ThumbBox" + CurrentThumbBoxID.toString()).style.borderColor = '#FF6A00';
            $get("ThumbBox" + CurrentThumbBoxID.toString()).style.opacity = '1';
        }

        if (undefined != PreviousThumbBoxID && PreviousThumbBoxID != CurrentThumbBoxID) {
            $get("ThumbBox" + PreviousThumbBoxID.toString()).style.borderColor = '#FFFFFF';
            $get("ThumbBox" + PreviousThumbBoxID.toString()).style.opacity = '0.5';
        }
    },
    Resize: function () {
        window.PhotoViewerWindow.style.height = (PhotoViewerWindow.width / 1.519756) + 'px';
    },
    dispose: function () {
        //Add custom dispose actions here
        CustomControls.ClientControl1.callBaseMethod(this, 'dispose');
    }
}

CustomControls.ClientControl1.registerClass('CustomControls.ClientControl1', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 

Many thanks for you help,

Damien.