Hi Chris,
I do hope I get answers to my Question here as I am cluesless as to what it is I have not been doing right here. I have watched this particular video at least 5 times and I still can not seem to get my own AJAX extender control to work as I expect it to. I have posted this same on the forum and still no responses so I figure, I might try to ask you directly.
I am a newbie to Javascript. I have an extender control that is supposed to work with a FileUpload and an Image control. What I want to happen is when a file is selected for upload, at the firing of the OnChange event, what my code is meant to do is show the image that is selected for upload. Problem is nothing seems to be happening. Below is the jScript I have, I followed your example above to create a server class for the wiring of behaviors. Problem is I do not know what else to tweak to get this working. Can you please help?
/// <reference name="MicrosoftAjax.js"/>
Type.registerNamespace("Ajax.UserControls");
Ajax.UserControls.ImagePreview = function(element) {
//initialize the base
Ajax.UserControls.ImagePreview.initializeBase(this, [element]);
// Initialize instance level fields
this._defaultimage = null;
this._previewimage = null;
this._targetimageid = null;
}
Ajax.UserControls.ImagePreview.prototype =
{
//call initialize on this first
initialize: function() {
Ajax.UserControls.ImagePreview.callBaseMethod(this, 'initialize');
// Get a reference to the associated element
var fileuploadcontrol = this.get_element();
// Wire up handler for onmouseover
var delegate = Function.createDelegate(this, this._onChange);
$addHandler(fileuploadcontrol, 'change', delegate);
this._onChange();
}, //end initialize
dispose: function() {
//Add custom dispose actions here
Ajax.UserControls.ImagePreview.callBaseMethod(this, 'dispose');
}, //end dispose
//Properties
get_DefaultImage: function() {
return this._defaultimage;
},
set_DefaultImage: function(value) {
this._defaultimage = value;
},
get_PreviewImage: function() {
return this._previewimage();
},
set_PreviewImage: function(value) {
this._previewimage = value;
},
get_TargetImageID: function() {
return this._targetimageid;
},
set_TargetImageID: function(value) {
this._targetimageid = value;
},
// Event Handlers
_onChange: function() {
// Get a ref to the image element
var img = $get(this._targetimageid);
//be sure there is an imagecontrol to work with
if (img && !img.disabled && img.src != this.get_PreviewImage()) {
// Set the source to the preview image
img.src = this.get_PreviewImage();
}
else {
if (img.src != this.get_DefaultImage) {
//set it to the disabled image immediately
img.src = this.get_DefaultImage();
}
}
}
}
Ajax.UserControls.ImagePreview.registerClass('Ajax.UserCont rols.ImagePreview', Sys.UI.Behavior);
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();