Writing an element to the page.

adam0101 · May 13, 2005

If I dynamically create a form field with a reference to a JS object in an expando property, what would be the best way to add it to the page? Obviously I can't use document.write() because the JS object isn't a string. Right now I'm creating a temporary SPAN object, adding my custom element, then destroying the SPAN.

Is there a better way than the writeElement() function I made?

Code:

<html>
<head>
<script>
PhoneObject = function(id, label, title, defaultValue)
{
    this.ui = document.createElement("INPUT");
    this.ui.type = 'text';
    this.ui.id = id;
    this.ui.name = id;
    this.ui.defaultValue = defaultValue || '';
    this.ui.label = label || id;
    this.ui.title = title || label || id;
    this.ui.obj = this;
    this.ui.maxlength = '10';
    this.ui.onblur = function()
    {
        this.obj.validate();
    }
    this.validate = function()
    {
        var v = this.ui.value.replace(/[^0-9]+/gi,"");
        if(v.length==10)
        {
            this.ui.value='('+v.substr(0,3)+')'+v.substr(3,3)+'-'+v.substr(6,4);
        }
        else
        {
            return this.ui.label + " must consist of ten digits.";
        }
    }
    this.render = function()
    {
        writeElement(this.ui);
    }
}
[red]// Is creating a temp SPAN the best way?
function writeElement(obj)
{
    document.write('<span id="spnTemp"></span>');
    var spnTemp = document.getElementById("spnTemp");
    spnTemp.parentNode.insertBefore(obj,spnTemp);
    spnTemp.parentNode.removeChild(spnTemp);
}[/red]
</script>
</head>
<body>
<form>

<script>
(new PhoneObject('HomePhone','Home Phone','Please enter your home phone number')).render();
</script>

</form>
</body>
</html>

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

jemminger · May 13, 2005

how about getting a reference to the field's form and using form.appendChild()?

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

adam0101 · May 13, 2005

But wouldn't that add the field to the end of the form? How do you add it to the document in the same location as it is defined?

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

jemminger · May 13, 2005

you could use insertAfter() to insert it after the last element at the current position. form.elements will only be as long as the number of form elements at the current position:

Code:

<form>
	<script>alert(document.forms[0].elements.length);</script>
	<input type="text" />
	<script>alert(document.forms[0].elements.length);</script>
	<input type="text" />
	<script>alert(document.forms[0].elements.length);</script>
</form>

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

jemminger · May 13, 2005

also if you're trying to simplify client-side form validation, you could <plug type="shameless"> check out my free library here:

http://www.jeffemminger.com/jvalx/

</plug>, or there's another good one out there called fValidate

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

adam0101 · May 13, 2005

Cool library, but my question really has to do with rendering a custom object that can't be represented as a string as the page loads. It doesn't necessarily have to be a form field. It could be any element. An image, for example:

Code:

<html>
<head>
<script>
ImgObject = function(src)
{
    this.ui = document.createElement("IMG");
    this.ui.src = src;
    this.ui.obj = this;
    this.ui.showSrc = function(){alert(this.src)}
    this.ui.onclick = this.ui.showSrc;
    this.render = function()
    {
        writeElement(this.ui);
    }
}

function writeElement(obj)
{
    document.write('<span id="spnTemp"></span>');
    var spnTemp = document.getElementById("spnTemp");
    spnTemp.parentNode.insertBefore(obj,spnTemp);
    spnTemp.parentNode.removeChild(spnTemp);
}
</script>
</head>
<body>
<form>

<script>
var myImg = new ImgObject('image.gif');
myImg.render();
</script>

</form>
</body>
</html>

I'm trying to keep everything object-oriented so I'll be able to inherit from these objects later and create new objects with extended functionality.

I tried your suggestions, but insertAfter() isn't supported by IE (except in the XML DOM), and document.body.appendChild(obj) gives me a weird error in IE.

I guess my writeElement() function works well enough for me for now. Thanks.

Adam

There are only 10 types of people in the world: Those who understand binary, and those who don't

BillyRayPreachersSon · May 14, 2005

You could use the replaceChild method to avoid having to destroy the initial element:

http://msdn.microsoft.com/library/d...thor/dhtml/reference/methods/replacechild.asp

But it still doesn't get rid of the need for the document.write. One way around this would be to put placeholders where your script calls are:

Code:

<form>
   <span id="placeHolder1"></span>
</form>

and then onload, use replaceChild to switch in your element.

It's an interesting point however... How would you, in JS, find the point in the HTML document that it is being called from? I'd love to know.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Writing an element to the page.

adam0101

Programmer

jemminger

Programmer

adam0101

Programmer

jemminger

Programmer

jemminger

Programmer

adam0101

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor