ASP.NET - How do I register multiple JavaScript calls to run on PostBack?

Question

I have an ASP.NET page with two instances of the same Web User Control (a simple WYSIWYG editor). On submit, the WUCs do a little JavaScript magic and then proceed with a normal postback.

The first instance seems to be working, but the second fails to post changes back to the server (it reverts to the original, and posts that). I believe the problem is that the JS only fires for the first WUC. I've traced that to the following code, from the generated client-side source:

function WebForm_OnSubmit() {
    prepHtml('AddEditPopup1_ctlEditorQuestion_txtEdit','AddEditPopup1_ctlEditorQuestion_divEdit', 'AddEditPopup1_ctlEditorQuestion_divHT' );        
    //snip...
}

The problem seems to be that there should be two calls to prepHtml: one for the ctlEditorQuestion instance of the WUC, and one for the ctlEditorAnswer instance.

Instead, there's only the one for ctlEditorQuestion. Both controls are registering the OnSubmit event, but one of them overwrites the other.

The prepHtml call is registered from the WUCs' C# code at runtime:

//Page_Load
_onSubmit = String.Format("prepHtml('{0}','{1}', '{2}' );", 
                txtEdit.ClientID, divEdit.ClientID, divHT.ClientID);

//OnPreRender
Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "get-html", _onSubmit);

I should point out that I didn't write this control myself, and I've never seen this kind of runtime registration of OnSubmit JS code before. Page.ClientScript.RegisterOnSubmitStatement is totally new to me.

I need to register both prepHtml calls so they run sequentially. Is this possible? I'm open to alternatives to Page.ClientScript.RegisterOnSubmitStatement, so long as the code still gets fired on submit.

@Chris Gessler: `prepHtml` copies the innerHTML from an editable div to a textarea, which is then posted back. The problem is that there's only one call to `prepHtml`, when there should be two. The second code block is what *should* be there, but it isn't. — Justin Morgan - On strike, Feb 10 '11 at 01:04

Chris Gessler · Accepted Answer · 2011-02-12T02:12:52.990

1

This should do what you want without tightly coupling the controls to the page.

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        string onSubmit = string.Format("prepHtml('{0}','{1}', '{2}';",
            txtEdit.ClientID,
            divEdit.ClientID,
            divHT.ClientID);

        Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), 
            this.Id + "_getHtml", onSubmit);
    }
}

The key (as I mentioned in my comment) is the unique name. Notice that I use "this.ID" in the script name. The ID property is guaranteed to be unique within the page, so it would be a good candidate.

edited Feb 12 '11 at 02:12

answered Feb 10 '11 at 01:03

Chris Gessler

22,727
7
57
83

I don't have access to both sets of client IDs at once; they're in two separate WUCs, each of which are trying to register code in the same place. I should have specified that the C# code is in the WUC codebehind, not the client page. – Justin Morgan - On strike Feb 10 '11 at 01:06
Interesting solution. I think it'd work, but I'm worried about coupling the page and the WUC so tightly. The client page now needs to know about this requirement, and I was hoping others in my group would be able to use it when they need it. Is there any way to do this so the WUC can still be dropped onto the page? – Justin Morgan - On strike Feb 10 '11 at 02:58
I don't think you can add multiple OnSubmit scripts to a single page with RegisterOnSubmitStatement, but try this anyway... In your controls, try using different script names. For example, in Control1 use "Control1-get-html" and in the second control use "Control2-get-html". ASP.NET might be smart enough to combine them for you. – Chris Gessler Feb 11 '11 at 14:32
@Chris Gessler: That's an idea. I'll experiment with it when I have the chance. I think if this comes up again, I'll try to alter the OnSubmit behavior with JavaScript instead, unless I can find a better solution. For now, I've implemented your suggestion. Thanks for your help. – Justin Morgan - On strike Feb 11 '11 at 15:30
I have good news for you. The key to registering multiple OnSubmit statements in separate controls is the unique name. I'll update my solution with the right code. – Chris Gessler Feb 12 '11 at 01:45
+1 - Looks like we both learned something new on this one. Thanks! – Chris Gessler Feb 12 '11 at 01:57
@Chris Gessler: Super cool! Great find, I definitely learned something here. I'd ++ again if I could. Thanks. – Justin Morgan - On strike Feb 12 '11 at 02:11
1

I updated it once more, using the ID property instead of the class name just in case two controls of the same type land on the same page. Anyway, you get the idea. – Chris Gessler Feb 12 '11 at 02:14

ASP.NET - How do I register multiple JavaScript calls to run on PostBack?

1 Answers1