Question

Hi I recently fell in love with an extended upload button control I found here that when used together with an aspnet file upload control, can perform uploads in a gmail-like manner. The only problem is that when the control is placed on a page any button on that page will trigger the click event of the extended control.

I had no idea why this was happening until I looked at the source code.

/// Basic registration of events
        protected override void OnInit(EventArgs e)
        {
            this.Page.LoadComplete += new EventHandler(Page_LoadComplete);
            base.OnInit(e);
            this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "ScriptBlock", this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "WebControls.JScripts.AIMScript.js"));
            string cid = this.ClientID;
            string onsubmitstatement = "return AIM.submit( document.forms[0], {'onStart' : " + OnStartScript + ", 'onComplete' : " + OnCompleteScript + "})";
            this.Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "OnSubmitScript", onsubmitstatement);
        }

From what I can gather the problem lies in the control registering the ‘onsubmitstatement‘ for all controls
on pages form i.e ‘document.forms[0]’. Now I have very limited experience in authoring custom controls so all my efforts to register the ‘onsubmitstatement’ for only the upload control has failed e.g

string ctrlid = this.ClientID 
string onsubmitstatement = "return AIM.submit( document.getElementById('" + ctrlid + "'), {'onStart' : " + OnStartScript + ", 'onComplete' : " + OnCompleteScript + "})";

can any one help me? Is there a way to register the onsubmit function for only this control ?

Answer 1

We’d need to know what exactly AIMScript.js is actually doing to really answer the question.

The basic idea though is that you need to change the javascript so it does it’s thing on the click event for a particular button, rather than intercepting the submit event for the entire form. But it could be that this particular javascript might be dependent on a form element in some other ways too.

It could be as simple as changing the registrations to just register a javascript DoClick function like this:

string onsubmitstatement = "function DoClick() {return AIM.submit( document.forms[0], {'onStart' : " + OnStartScript + ", 'onComplete' : " + OnCompleteScript + "})}";
this.Page.ClientScript. RegisterClientScriptBlock(this.GetType(), "OnSubmitScript", onsubmitstatement);

Then in on the actual button control, wire it up to call the new DoClick() javascript function you registered above –like this:

<input type="button" value="ClickMe" onclick="DoClick()" />