Access a Dynamically Created Control with Javasript

[cavpollo]

Hi there, I got this annoying problem...

I have to create dynamically an image control that has got to be accesses later through javascript.
In other words, I got an image that was created in the page code, and using javascript I got to be able to work with it

The image ID of a previously created image is uxTimerImage, and I've tried accessing it with the following code:

uxTimerImage = new Image();
uxTimerImage.ID = "uxTimerImage";
...
this.Controls.Add(uxTimerImage);

ClientScript.RegisterClientScriptBlock(this.GetType(),"timer",
          "var timerObject1 = document.getElementById('" + uxTimerImage.ID + "');"+
          "var timerObject2 = document.getElementById('<%= uxTimerImage.ClientID %>');"+
          "var timerObject3 = document.getElementById('uxTimerImage');", 
          true);

The problem is that all those 3 examples return to me a null object, as if my object is nowhere to be found =\

(I don't think it affects the problem, but all this is done inside a content panel that belongs to a master page)

Any kind of help would be greatly appreciated

[Ramesh S]

Hi,

Just check the control's ID found in the JavaScript and ID tag of the image control in the HTML source. You can do it by Right click->View Source.

[Freon22]

Well "this.Controls.Add(uxTimerImage);" does add it to the page but it is outside of the body. Try the code below I tested it and it works. You just need to remember that when you add a control it needs to be a child of the form or body. Also you only had
uxTimerImage = new Image();
It should be
Image uxTimerImage = new Image();

Image uxTimerImage = new Image();
        uxTimerImage.ID = "uxTimerImage";
        form1.Controls.Add(uxTimerImage);

        string Script = @"function window.onload() { 
            var timerObject1 = document.getElementById('" + uxTimerImage.ID + "');" +
                "if (timerObject1) { " + 
                    "alert('I found timerObject1');" +
               " } }";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "window", Script, true);

[cavpollo]

Hi,

Just check the control's ID found in the JavaScript and ID tag of the image control in the HTML source. You can do it by Right click->View Source.

I rigth clicked erveything, this options never appeared...

Well "this.Controls.Add(uxTimerImage);" does add it to the page but it is outside of the body. Try the code below I tested it and it works. You just need to remember that when you add a control it needs to be a child of the form or body. Also you only had
uxTimerImage = new Image();
It should be
Image uxTimerImage = new Image();

Image uxTimerImage = new Image();
        uxTimerImage.ID = "uxTimerImage";
        form1.Controls.Add(uxTimerImage);

        string Script = @"function window.onload() { 
            var timerObject1 = document.getElementById('" + uxTimerImage.ID + "');" +
                "if (timerObject1) { " + 
                    "alert('I found timerObject1');" +
               " } }";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "window", Script, true);

Yeah, I forgot to copy the Image into the example, but this code didn't quite solve my problem. My control could't be found that way.
On the other hand you helped me to remind myself that none of the objects had had time to load in the page. In other words, none of my dynamicaally created controls where there. So after overriding the window.onload() method I was able to access all the controls. Thank you for that.

And now that I've solved my problem I can explain what happened.
Because the control was inside a contentpanel that belonged to a master page, Is id changed a little bit. The old Id was "uxTimerImage" and it changed to "ctl00_uxTimerImage". But that's not all.. I ended up adding the control in the design editor with the id "uxTimerImage" and also I had to add this code

Form.Controls.Add(uxTimerImage);

at some point in my code even though the contorl had been added in teh design editor already (weird, isn't it?), so the javascript would be able to find the control through the instruction getElementById.

Thanks for the help.