Can HTML exist within a control, and can it be referenced by getElementById() ?

I know that you can insert an AW grid (for example) into regular HTML, but can you insert regular HTML into new AW controls and still be able to access the HTML using DOM access functions?

I'm creating a control and have the need to dynamically insert HTML into the control. Elements of this HTML need to be referenced by using getElementById(). The HTML is not being created using ActiveWidgets templates.

For example, I'd like to do something like this:

this.setContent("ui", '<input type="text" id="txt1">');
alert(document.getElementById("txt1"));

Is this possible?

Once you insert the HTML into your AW object, make sure you call refresh() on the object then you will be able to use getElementById to reference any 'added' HTML objects to an AW object. I do this routinely and have no problems. One caveat is that if you are adding an AW object to an AW object and the first object has children object you have to use this technique:

obj2.setContent('html', obj2.element().innerHTML + obj1.element().innerHTML);

This will ensure that all of the objects of obj1 get embedded. I discovered that if you just use " + obj1" then it looses child elements. Theoretically using obj2.setContent('html', obj2 + obj1) should work but it doesn't in all cases. It works in most, but not all. I am using the AW framework to create my entire page and I have many levels of parentage and initially I would loose children but with the example above that uses innerHTML, I have had no problems. This may or may not be of interest to you but it might be to others reading this.

Thanks again Jim... I'll give that a try.

PS. Your contributions to this forum have been helpful.

Alex, if you're watching this thread here's another idea... Can you add the ability for readers to post a "Did you find this helpful" response to each thread? Eg: 0=Not at all helpful ... 4=Very helpful

Perfect! Works just as you describe -- thanks again.

setContent method accepts two arguments: the first is the name of the content fragment (so you can refer to it later), and the second one is the content itself - either literal string, AW object or a function returning a string or an AW object:

// literal string
var obj1 = new Active.HTML.DIV;
obj1.setContent("html", "<input id='test1'>");
document.write(obj1);

// AW object
var obj2 = new Active.HTML.DIV;
obj2.setContent("object", new Active.HTML.INPUT);
document.write(obj2);

// function returning a string or AW object
var obj3 = new Active.HTML.DIV;
obj3.setContent("function", function(){return "<input id='test3'>"});
document.write(obj3);

You should be able to make a hybrid system where parts of the html are created on the client-side (using AW) and other parts are sent from the server and dynamically injected into AW objects.

forgot the main point - the literal html content is inserted 'as is' so you can access it using getElementById()

Alex,

Does the obj.setContent("object", some_AW_object) replace the entire innerHTML of the obj or does it add to it?

Thanks Steve for the nice comments.