is dynamically creating a new field on a page DHTML, Javascript, XML or a combination?

Discussion in 'Javascript' started by NotGiven, Sep 17, 2004.

  1. NotGiven

    NotGiven Guest

    I want to learn moer of what I saw in a recent example. They create a page
    that created new fields/element. It's not like they were hidden and they
    displayed them, they were not there, then the script created them.

    It used things like parentnode, insertBefore, appendChildNode,...

    Any ideas/direction is appreciated.
    NotGiven, Sep 17, 2004
    #1
    1. Advertising

  2. NotGiven

    Dag Sunde Guest

    "NotGiven" <> wrote in message
    news:V1E2d.150662$...
    > I want to learn moer of what I saw in a recent example. They create a

    page
    > that created new fields/element. It's not like they were hidden and they
    > displayed them, they were not there, then the script created them.
    >
    > It used things like parentnode, insertBefore, appendChildNode,...
    >
    > Any ideas/direction is appreciated.
    >


    The answer is Yes!

    DHTML (Dynamic Html) is just using Javascript to manipulate
    the (html) page dynamically, and the common way to do this,
    is to manipulate the pages Document Object Model (DOM)'s
    parentnode, insertBefore, appendChildNode, et.c...

    Xml is not (usually) used for such things, but with the right
    xml style sheet (XSL/XSLT), you can create dynamic HTML-documents
    from xml-documents too...

    --
    Dag.
    Dag Sunde, Sep 17, 2004
    #2
    1. Advertising

  3. NotGiven

    NotGiven Guest

    So if I want to search for web sites to learn more about this typ eof thing,
    I would search for DHTML?



    "Dag Sunde" <-way> wrote in message
    news:tuE2d.2455$...
    > "NotGiven" <> wrote in message
    > news:V1E2d.150662$...
    >> I want to learn moer of what I saw in a recent example. They create a

    > page
    >> that created new fields/element. It's not like they were hidden and they
    >> displayed them, they were not there, then the script created them.
    >>
    >> It used things like parentnode, insertBefore, appendChildNode,...
    >>
    >> Any ideas/direction is appreciated.
    >>

    >
    > The answer is Yes!
    >
    > DHTML (Dynamic Html) is just using Javascript to manipulate
    > the (html) page dynamically, and the common way to do this,
    > is to manipulate the pages Document Object Model (DOM)'s
    > parentnode, insertBefore, appendChildNode, et.c...
    >
    > Xml is not (usually) used for such things, but with the right
    > xml style sheet (XSL/XSLT), you can create dynamic HTML-documents
    > from xml-documents too...
    >
    > --
    > Dag.
    >
    >
    NotGiven, Sep 17, 2004
    #3
  4. NotGiven

    Dag Sunde Guest

    "NotGiven" <> wrote in message
    news:Q6F2d.150985$...
    > "Dag Sunde" <-way> wrote in message
    > news:tuE2d.2455$...
    > > "NotGiven" <> wrote in message
    > > news:V1E2d.150662$...
    > >> I want to learn moer of what I saw in a recent example. They create a

    > > page
    > >> that created new fields/element. It's not like they were hidden and

    they
    > >> displayed them, they were not there, then the script created them.
    > >>
    > >> It used things like parentnode, insertBefore, appendChildNode,...
    > >>
    > >> Any ideas/direction is appreciated.
    > >>

    > >
    > > The answer is Yes!
    > >
    > > DHTML (Dynamic Html) is just using Javascript to manipulate
    > > the (html) page dynamically, and the common way to do this,
    > > is to manipulate the pages Document Object Model (DOM)'s
    > > parentnode, insertBefore, appendChildNode, et.c...
    > >
    > > Xml is not (usually) used for such things, but with the right
    > > xml style sheet (XSL/XSLT), you can create dynamic HTML-documents
    > > from xml-documents too...
    > >

    >
    > So if I want to search for web sites to learn more about this typ eof

    thing,
    > I would search for DHTML?
    >


    Yes...
    ....And Javascript, and post specific questions here when you're stuck... ;-)


    --
    Dag
    58°26'15.9" N 008°46'45.5" E
    Dag Sunde, Sep 17, 2004
    #4
  5. NotGiven

    NotGiven Guest

    I posted one here a few days ago and no one replied. I thought I might in
    the wrong newsgroup. Here's what I posted:

    ===========================================

    The code below is overwriting itself.

    What it is doing is creating the fields correctly the first time through.
    Then it writes over those same fields again and again. I can tell because
    the value of the first field changes every loop.

    Any ideas?



    Code:


    var ex_counter = 0;
    var ex = "";
    function ex_morefields() {
    var x=document.getElementById("choices");
    ex_counter++;
    var newfields = document.getElementById('ex_fields').cloneNode(true);
    newfields.id = '';
    newfields.style.display = 'block';
    var newfield = newfields.childNodes;
    for (y = 0; y<(x.length); y++) { //loop through all item in the list
    ex = x[y].text;
    for (var i=0;i<newfield.length;i++) {
    var theName = newfield.name;
    if (theName) {
    newfield.name = theName;// + ex_counter;
    }
    if (theName == "exercise") {
    newfield.setAttribute('value', ex);
    }
    }
    var insertHere = document.getElementById('write_EX');
    insertHere.parentNode.insertBefore(newfields,insertHere);
    }
    } // end add more software script
    here's the html in the page:

    HTML:


    <span id="write_EX"></span>
    NotGiven, Sep 17, 2004
    #5
  6. On Fri, 17 Sep 2004 14:36:00 -0400, NotGiven <> wrote:

    > I posted one here a few days ago and no one replied.


    You posted it yesterday. At a quick glance, I couldn't see what was wrong,
    but after reformatting your code, it's quite clear, so in future please
    indent code blocks. It's much easier to follow code that way. In addition,
    post *all* the relevant HTML. You reference three elements by id, and many
    more through the childNodes collection. How can we tell what's being
    manipulated without the document?

    [snip]

    > The code below is overwriting itself.


    With very good reason. However, you might also like to know that it will
    probably fail in most browsers, if you're doing what I think you're doing.

    > What it is doing is creating the fields correctly the first time through.
    > Then it writes over those same fields again and again. I can tell because
    > the value of the first field changes every loop.


    That may be so, but you always insert the same node, which results in it
    being removed, then being reinserted.

    > var ex_counter = 0;
    > var ex = "";


    Why is 'ex' global?

    > function ex_morefields() {
    > var x=document.getElementById("choices");
    > ex_counter++;
    > var newfields = document.getElementById('ex_fields').cloneNode(true);
    > newfields.id = '';
    > newfields.style.display = 'block';
    > var newfield = newfields.childNodes;
    > for (y = 0; y<(x.length); y++) { //loop through all item in the list


    What list?

    This is why I said this code will fail. A conforming browser will only
    return one node, or nothing at all, with a getElementById call. This means
    that the length property will be undefined and the loop will never be
    entered. You seem to be under the impression that it will return a
    collection which implies a few things:

    1) You've only tested on IE, which is far from a compliant browser.
    2) You're using the same id on several elements.
    3) You haven't validated you page before trying to script it.

    The DOM Specification doesn't define specific behaviour with a document
    contains elements with identical id attributes and a getElementById call.
    This means that only the first element in document order might be
    returned. It's even reasonable to assume that null can be returned. What
    IE does - return a collection - is certainly not correct as the interface
    for the method clearly defines what can be returned, and a NodeList is not
    one of the options.

    It's advisable to test on a decent browser before checking with IE. You're
    more likely to find bugs that way. Opera and Mozilla are good options, and
    are available on many platforms. Also validate:
    <URL:http://validator.w3.org/>.

    > ex = x[y].text;
    > for (var i=0;i<newfield.length;i++) {
    > var theName = newfield.name;
    > if (theName) {
    > newfield.name = theName;// + ex_counter;


    Rather redundant, isn't it?

    > }
    > if (theName == "exercise") {
    > newfield.setAttribute('value', ex);


    Use of setAttribute is usually unnecessary. If the element defines the
    attribute as a property, as in the case of INPUT elements and the value
    attribute, then

    <object>.<property> = <value>;

    is all that's required.

    > }
    > }
    > var insertHere = document.getElementById('write_EX');


    Why do you repeatedly look up this reference?

    > insertHere.parentNode.insertBefore(newfields,insertHere);


    This is the other issue. The newfields variable is only defined once
    outside the outer loop, so it never changes. You probably meant
    newfield, but the first problem is the most pressing as correcting it
    might require you to re-examine all of this code, and probably the HTML,
    too.

    > }
    > } // end add more software script


    One final point: In all of the code above, you fail to check if the user
    agent supports the methods and objects you use. Always feature test (4.26).

    <URL:http://jibbering.com/faq/>

    [snip]

    I'm sorry if that's a lot of information to throw at you, but it's all
    important. If you need more help, you'll have to post your HTML and what
    you're trying to accomplish. This would be best done by providing a link
    to a demonstration.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Sep 17, 2004
    #6
  7. NotGiven

    NotGiven Guest

    I would like nothing more than to show you the entire page but it is
    proprietary at the moment. I'll work on making it more generic then post
    it.

    Thanks for your expert help. I've been developing for year but in another
    language and have little javascript exp other than copying code form
    tutorials and maiking it work on my site.

    This code is more advanced than I have a prayer of solving at this point.

    My goal is to create fields on the fly. This page has a listbox with
    several items. I'd like to click a button that will create fields on the
    fly that have the listbox items as values in the fields.

    What do you suggest I read to learn enough to do this?

    Thanks.


    "Michael Winter" <> wrote in message
    news:eek:psehlpsx5x13kvk@atlantis...
    > On Fri, 17 Sep 2004 14:36:00 -0400, NotGiven <> wrote:
    >
    >> I posted one here a few days ago and no one replied.

    >
    > You posted it yesterday. At a quick glance, I couldn't see what was wrong,
    > but after reformatting your code, it's quite clear, so in future please
    > indent code blocks. It's much easier to follow code that way. In addition,
    > post *all* the relevant HTML. You reference three elements by id, and many
    > more through the childNodes collection. How can we tell what's being
    > manipulated without the document?
    >
    > [snip]
    >
    >> The code below is overwriting itself.

    >
    > With very good reason. However, you might also like to know that it will
    > probably fail in most browsers, if you're doing what I think you're doing.
    >
    >> What it is doing is creating the fields correctly the first time through.
    >> Then it writes over those same fields again and again. I can tell because
    >> the value of the first field changes every loop.

    >
    > That may be so, but you always insert the same node, which results in it
    > being removed, then being reinserted.
    >
    >> var ex_counter = 0;
    >> var ex = "";

    >
    > Why is 'ex' global?
    >
    >> function ex_morefields() {
    >> var x=document.getElementById("choices");
    >> ex_counter++;
    >> var newfields = document.getElementById('ex_fields').cloneNode(true);
    >> newfields.id = '';
    >> newfields.style.display = 'block';
    >> var newfield = newfields.childNodes;
    >> for (y = 0; y<(x.length); y++) { //loop through all item in the list

    >
    > What list?
    >
    > This is why I said this code will fail. A conforming browser will only
    > return one node, or nothing at all, with a getElementById call. This means
    > that the length property will be undefined and the loop will never be
    > entered. You seem to be under the impression that it will return a
    > collection which implies a few things:
    >
    > 1) You've only tested on IE, which is far from a compliant browser.
    > 2) You're using the same id on several elements.
    > 3) You haven't validated you page before trying to script it.
    >
    > The DOM Specification doesn't define specific behaviour with a document
    > contains elements with identical id attributes and a getElementById call.
    > This means that only the first element in document order might be
    > returned. It's even reasonable to assume that null can be returned. What
    > IE does - return a collection - is certainly not correct as the interface
    > for the method clearly defines what can be returned, and a NodeList is not
    > one of the options.
    >
    > It's advisable to test on a decent browser before checking with IE. You're
    > more likely to find bugs that way. Opera and Mozilla are good options, and
    > are available on many platforms. Also validate:
    > <URL:http://validator.w3.org/>.
    >
    >> ex = x[y].text;
    >> for (var i=0;i<newfield.length;i++) {
    >> var theName = newfield.name;
    >> if (theName) {
    >> newfield.name = theName;// + ex_counter;

    >
    > Rather redundant, isn't it?
    >
    >> }
    >> if (theName == "exercise") {
    >> newfield.setAttribute('value', ex);

    >
    > Use of setAttribute is usually unnecessary. If the element defines the
    > attribute as a property, as in the case of INPUT elements and the value
    > attribute, then
    >
    > <object>.<property> = <value>;
    >
    > is all that's required.
    >
    >> }
    >> }
    >> var insertHere = document.getElementById('write_EX');

    >
    > Why do you repeatedly look up this reference?
    >
    >> insertHere.parentNode.insertBefore(newfields,insertHere);

    >
    > This is the other issue. The newfields variable is only defined once
    > outside the outer loop, so it never changes. You probably meant
    > newfield, but the first problem is the most pressing as correcting it
    > might require you to re-examine all of this code, and probably the HTML,
    > too.
    >
    >> }
    >> } // end add more software script

    >
    > One final point: In all of the code above, you fail to check if the user
    > agent supports the methods and objects you use. Always feature test
    > (4.26).
    >
    > <URL:http://jibbering.com/faq/>
    >
    > [snip]
    >
    > I'm sorry if that's a lot of information to throw at you, but it's all
    > important. If you need more help, you'll have to post your HTML and what
    > you're trying to accomplish. This would be best done by providing a link
    > to a demonstration.
    >
    > Mike
    >
    > --
    > Michael Winter
    > Replace ".invalid" with ".uk" to reply by e-mail.
    NotGiven, Sep 17, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Minho Chae

    Creating combination of sequences

    Minho Chae, Nov 13, 2004, in forum: Python
    Replies:
    5
    Views:
    300
    Hung Jung Lu
    Nov 14, 2004
  2. beginner
    Replies:
    13
    Views:
    563
  3. Steve
    Replies:
    1
    Views:
    281
    Richard Cornford
    Apr 9, 2005
  4. mparker
    Replies:
    0
    Views:
    114
    mparker
    Feb 7, 2007
  5. jr
    Replies:
    3
    Views:
    416
Loading...

Share This Page