Dynamically added user control and javascript

[tomouse]

I have a page which adds a user control (ascx) when the user clicks a button (so there can be multiple controls on the page if the user clicks multiple times). Each of these user controls contains a label and some buttons. I want to use clientside javascript so that when the user clicks the button, the value in the label is incremented.

It seems that this should be a fairly simple task, but I can't work out how to reference the objects (each parent user control has it's id assigned at run time when it is added) or where would be the best place to put the javascript itself.

I've been searching and trying things for hours but couldn't find the answer - hope someone can help. I wasn't sure if I should ask this here in ASPland, or over at Javascriptville - sorry if I got it wrong. thanks, Tom

 

[tomouse]

Yeah, I thought it would be waaay too difficult for any of you to answer (see how I'm trying to rile you into helping me with this?). But seriously, if you think this should be over in the Javascript area then let me know. Seemed to me that it's kind of half and half.

 

[ca8msm]

Yeah I think you'll get a better answer in terms on an example in the javascript forum, however they won't really care whether is is in a user control or not. Provide them with an example of the HTML that is generated and explain what elements need to fire the updated value.

In simple terms though, you just an "onclick" event (if it's an ASP.NET Button control then the OnClientClick property will render this HTML property) on your buttons that gets a reference to the label, converts it's value to an integer and adds 1 to it.

Mark,

Darlington Web Design[tab]|[tab]Experts, Information, Ideas & Knowledge[tab]|[tab]ASP.NET Tips & Tricks

 

[tomouse]

Thanks Mark. I went away from the problem for a day and when I returned to it, I found the answer with a small amount of digging into Javascript references. It's all very simple, but just in case anyone is interested: With ASCX files, you need to put the javascript function in the parent page (that is, the aspx file that the control is being put onto).

In the ascx file, I set my asp button to this:

<asp:ImageButton ID="imbMoreRooms" OnClientClick="IncrementRooms(this)" runat="server" ImageUrl="~/img/ico_Add.gif" />

and in the script tags on the parent page I did this:

            function IncrementRooms(btn) {
                var iRoomCount = parseInt(btn.parentNode.children[1].value);
                if (iRoomCount< 99) {
                    btn.parentNode.children[1].value = iRoomCount+ 1;
                }
            }

I'm sure there are a hundred ways to improve this (e.g. I'm hard-coding the reference to the label to be updated using children[1]), but it does the job instantly, without need for a trip back to the server and that's what I wanted.