Javascript with Dynamic Controls 1

[dcusick]

Hi all. I am having some major issues here, and there has to be a solution out there.

I have a page, that is dynamically created from database entries. I create 3 select boxes and two text boxes for each row in the database. I do this through a loop, create new controls, set the properties, and then add the generated controls to a placeholder.

Depending on what someone selects in one of the select boxes, I will hide or show certain controls. Now, I have this working fine with a SelectedIndexChanged event and an AutoPostBack. However, since all of my controls are dynamic, when I postback, I have to recreate them all. So basically, this takes a minute or two to reload everything.

I know I can do this with Javascript, and I have a function to do this. However, I can't seem to attach a javascript function to a dynamic control. I have similar things working with static controls, so I assume it has something to do with the dynamic part of the controls. It doesn't seem to work. Am I misssing something?

  selBox = new DropDownList();
  selBox.ID = string.Concat( "dd", dr.TemplSpaceVar );
  selBox.Attributes.Add( "runat", "server" );
  selBox.Attributes.Add( "onchange", "viewTemplate('"+dr.TemplSpaceVar+"');" );

Thanks in advance

 

[tgreer]

Where in the Page Life Cycle do you run that code?

[link="[URL unfurl="true"]http://www.tgreer.com/aspnet_html_04.html"[/URL]]ASP.NET Page Life Cycle and Dynamic Controls[/url]



Thomas D. Greer

http://www.tgreer.com

 

[dcusick]

Okay, thanks for the reply, but I think I figured out something else...

This is actually calling fine, however, the issue is with my form. When I create one of the textboxes, I want it hidden by default, so I set Visible = false, in my code-behind. Now in my javascript code, I'm trying to set this to be visible.

In the javascript code, it's showing as undefined. If I set the textbox to true in my code-behind, my code actually works. It seems as if the control doesn't get rendered in the page if you set the Visible property to True. Is there an easy way for me to start them off as hidden and still have them render in my code?

 

[tgreer]

That's correct. Setting the server-side property cause the control not to be rendered.

You want to render the control, but set the CSS "visibility" style to "hidden". Toggle that to "visible", client-side, with JavaScript.





Thomas D. Greer

http://www.tgreer.com

 

[dcusick]

Yeah, just figured that one out. I did the following

control.style.add("display", "none");

Then in my js, I have

document.form.control.style.display="";

Works like a charm. Thanks for the input tgreer!!

 

[tgreer]

Well, "display:none" is different than "visibility: hidden", but if it works for you, then that's fine. The differences are subtle and concern the relative positions of the other controls.

Thomas D. Greer

http://www.tgreer.com

 

[dcusick]

Yeah, I actually saw that. The textbox is pretty large, so when I have visibility:hidden, it's not visible, but the space it should be in is fully taken up. On the other hand, when I have display:none, the width of the table is only that of the longest label, and increases the width if I set display:"".

The latter behavior is actually what I'm looking for, so that's what I decided to go with. Thanks again tgreer!