document.write() in the middle of a document?

Discussion in 'Javascript' started by jullag, Sep 19, 2005.

  1. jullag

    jullag Guest

    Hi,

    does anyone know of any javascript method that does the same job as
    document.write(), but not necessarily at the end of the document? For
    instance, insert some text inside an element that has a specific ID
    tag?
    thanks a lot
    JL
     
    jullag, Sep 19, 2005
    #1
    1. Advertising

  2. jullag

    Evertjan. Guest

    jullag wrote on 19 sep 2005 in comp.lang.javascript:

    > Hi,
    >
    > does anyone know of any javascript method that does the same job as
    > document.write(), but not necessarily at the end of the document? For
    > instance, insert some text inside an element that has a specific ID
    > tag?
    > thanks a lot
    > JL


    document.write() can be used anywhere in a html document, but it should
    only be used before the document is fully loaded and an implicit
    document.close() is issued.

    Any next document.write() will implicidly do a document.open(), thereby
    destroying the whole page inclusive of any onpage javascript.


    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)
     
    Evertjan., Sep 19, 2005
    #2
    1. Advertising

  3. jullag

    Frances Guest

    Dr Clue wrote:
    > jullag wrote:
    >
    >> does anyone know of any javascript method that does the same job as
    >> document.write(), but not necessarily at the end of the document? For
    >> instance, insert some text inside an element that has a specific ID
    >> tag?
    >> thanks a lot
    >> JL

    >
    >
    >
    >
    > document.getElementById("MyDiv").innerHTML="whatever"


    I'm also having a document.write() problem.. document.write is
    generated dynamically, and everything else in the page disappears when
    document.write() executes.. thank you...

    Frances
     
    Frances, Sep 19, 2005
    #3
  4. JRS: In article <432efa02$0$245$>, dated Mon,
    19 Sep 2005 13:48:51, seen in news:comp.lang.javascript, Frances
    <> posted :
    >Dr Clue wrote:
    >> jullag wrote:
    >>
    >>> does anyone know of any javascript method that does the same job as
    >>> document.write(), but not necessarily at the end of the document? For
    >>> instance, insert some text inside an element that has a specific ID
    >>> tag?


    >> document.getElementById("MyDiv").innerHTML="whatever"

    >
    >I'm also having a document.write() problem.. document.write is
    >generated dynamically, and everything else in the page disappears when
    >document.write() executes.. thank you...


    Both respondents, and the OP, should read the newsgroup FAQ.

    To be clueful, recommendation of getElementByID should be accompanied by
    noting that it does not work on all browsers (see FAQ) and that it can
    be emulated well enough for some of the others.

    if (document.all && !document.getElementById) {
    document.getElementById = function(id) { return document.all[id] } }

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Sep 19, 2005
    #4
  5. jullag

    Lee Guest

    Frances said:
    >
    >Dr Clue wrote:
    >> jullag wrote:
    >>
    >>> does anyone know of any javascript method that does the same job as
    >>> document.write(), but not necessarily at the end of the document? For
    >>> instance, insert some text inside an element that has a specific ID
    >>> tag?
    >>> thanks a lot
    >>> JL

    >>
    >>
    >>
    >>
    >> document.getElementById("MyDiv").innerHTML="whatever"

    >
    >I'm also having a document.write() problem.. document.write is
    >generated dynamically, and everything else in the page disappears when
    >document.write() executes.. thank you...


    That's exactly what document.write() is supposed to do.
    The first call to document.write() after the page has been displayed
    generates a call to document.open(), to re-open it for writing.
    document.open(), in turn, always calls document.clear();
     
    Lee, Sep 19, 2005
    #5
  6. jullag

    web.dev Guest

    jullag wrote:
    > Hi,
    >
    > does anyone know of any javascript method that does the same job as
    > document.write(), but not necessarily at the end of the document? For
    > instance, insert some text inside an element that has a specific ID
    > tag?
    > thanks a lot
    > JL


    Hi JL,

    Off the top of my head, I can think of 2 ways.

    Suppose you had an element:

    <div id = "mydiv"></div>

    and you wanted to insert text in between the div tag. You can do the
    following:

    var div = document.getElementById("mydiv");
    var text = document.createTextNode("my text");
    div.appendChild(text);

    OR

    document.getElementById("mydiv").innerHTML = "my text";

    Hope this helps. :)
     
    web.dev, Sep 19, 2005
    #6
  7. jullag

    Randy Webb Guest

    Dr John Stockton said the following on 9/19/2005 4:20 PM:
    > JRS: In article <432efa02$0$245$>, dated Mon,
    > 19 Sep 2005 13:48:51, seen in news:comp.lang.javascript, Frances
    > <> posted :
    >
    >>Dr Clue wrote:
    >>
    >>>jullag wrote:
    >>>
    >>>
    >>>>does anyone know of any javascript method that does the same job as
    >>>>document.write(), but not necessarily at the end of the document? For
    >>>>instance, insert some text inside an element that has a specific ID
    >>>>tag?

    >
    >
    >>>document.getElementById("MyDiv").innerHTML="whatever"

    >>
    >>I'm also having a document.write() problem.. document.write is
    >>generated dynamically, and everything else in the page disappears when
    >>document.write() executes.. thank you...

    >
    >
    > Both respondents, and the OP, should read the newsgroup FAQ.
    >
    > To be clueful, recommendation of getElementByID should be accompanied by
    > noting that it does not work on all browsers (see FAQ) and that it can
    > be emulated well enough for some of the others.
    >
    > if (document.all && !document.getElementById) {
    > document.getElementById = function(id) { return document.all[id] } }


    And that it is only needed for a browser that is almost 10 years old?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Sep 19, 2005
    #7
  8. jullag

    Guest

    jullag wrote:
    > Hi,
    >
    > does anyone know of any javascript method that does the same job as
    > document.write(), but not necessarily at the end of the document? For
    > instance, insert some text inside an element that has a specific ID
    > tag?
    > thanks a lot
    > JL


    It is interesting that document.write is taboo in xhtml 1.1 served
    correctly as application/xhtml+xml. Most of the recent browsers can
    handle this mime type, but not the badly outmoded IE6(you can use a php
    include at the very top of the page to automatically rewrite the code
    as html 4.01 strict if you run into an outmoded browser). When you
    write in xhtml 1.1 and serve as the correct mentioned mime type, modern
    browsers including Opera and the Mozilla family(Mozilla, Firefox,
    Netscape) become extremely strict and parse the code as xml. One reason
    a document.write can not be allowed, is there is no telling what it
    might write including tags that are not closed or xml forbidden
    characters. Thus document.write can not be allowed. If you use
    document.write, even in an external script, the page will not display
    and you may get a xml parse error message from the browser. I often use
    server-side php script to get around this problem. For example, my
    60000 year perpetual calendar needs hundreds of divisions to write a
    calendar for a full year. This was done with javascript using a
    document.write at the bottom of a nest of 4 "for" loops to write all of
    the divisions. This all had to go on conversion to xhtml 1.1 served
    with the proper mime type. One enters the desired year, which is sent
    to the server. Then the server uses php to write the code for the
    calendar for the selected year, which produces hundreds of divisions.
    This code is then downloaded to the browser, and the xml parser is
    pleased because it can check all of the computed divisions for closing
    tags, xml forbidden characters, and such. Many are kicking and
    screaming about using true xhtml, but it can be done now in most cases
    with automatic conversion to html 4.01 strict for outmoded browsers. If
    one only considered PCs, there might be little justification for xhtml
    and xml purity. However there are now a large number of computing
    devices out there in addition to PCs. To allow the many devices to
    exchange information, they all need to conform to xml or some other
    standard they they all can understand. For now, xml seems to be the
    best common language for most devices that we have.
     
    , Sep 20, 2005
    #8
  9. JRS: In article <>, dated Mon, 19 Sep
    2005 18:58:42, seen in news:comp.lang.javascript, Randy Webb
    <> posted :
    >Dr John Stockton said the following on 9/19/2005 4:20 PM:


    >> To be clueful, recommendation of getElementByID should be accompanied by
    >> noting that it does not work on all browsers (see FAQ) and that it can
    >> be emulated well enough for some of the others.
    >>
    >> if (document.all && !document.getElementById) {
    >> document.getElementById = function(id) { return document.all[id] } }

    >
    >And that it is only needed for a browser that is almost 10 years old?


    You exaggerate : the system age is less than three-quarters of that.

    Not everyone uses the latest systems (vulnerable to the latest malware).


    Indeed, you yourself are using, AIUI, an out-of-date newsreader.

    <QUOTE>

    > Can
    >
    > User-Agent: Mozilla Thunderbird 0.7.2 (Windows/20040707)
    > X-Accept-Language: en-us, en
    >
    > be set to properly unambiguous date-stamps, rather than such as
    >
    > 9/1/2005 6:13 PM meaning Sep 1st
    >
    > and, if so, how?
    >


    I don't think it's alterable, but there have been several upgrades
    since then. Version 1.0.2 gives the proper dd mmm yyyy hh:mm:ss format.

    </QUOTE>

    Of course, even that format is not as proper as it would be if it
    followed ISO 8601.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
    PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
    Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
     
    Dr John Stockton, Sep 20, 2005
    #9
  10. jullag

    Frances Guest

    dynamic content...

    web.dev wrote:
    > jullag wrote:
    >
    >>Hi,
    >>
    >>does anyone know of any javascript method that does the same job as
    >>document.write(), but not necessarily at the end of the document? For
    >>instance, insert some text inside an element that has a specific ID
    >>tag?
    >>thanks a lot
    >>JL

    >
    >
    > Hi JL,
    >
    > Off the top of my head, I can think of 2 ways.
    >
    > Suppose you had an element:
    >
    > <div id = "mydiv"></div>
    >
    > and you wanted to insert text in between the div tag. You can do the
    > following:
    >
    > var div = document.getElementById("mydiv");
    > var text = document.createTextNode("my text");
    > div.appendChild(text);
    >
    > OR
    >
    > document.getElementById("mydiv").innerHTML = "my text";
    >
    > Hope this helps. :)
    >


    ok, I'm following advice here.. but it's not working right...

    function pricing() {
    var list = document.forms[0].product;
    var selItem = list.options[list.selectedIndex].value;
    // alert('iframes/' + selItem + '.html');

    // var copy = 'yada yada'; // ***** prints fine..

    var copy = '<iframe src="iframes/' + selItem + '.html" scrolling=no
    width=300 height=200 frameborder=0>';
    var copy =+ '</iframe>'; // ******** prints 'NaN'

    var div = document.getElementById("divPricing");
    var divCopy = document.createTextNode(copy);
    // div.appendChild(divCopy); // ******* prints 'NaN'

    document.getElementById("divPricing").innerHTML = divCopy;
    // **** prints '[object]'
    // whether plain text or "<iframe>..." in var 'copy'
    }

    would appreciate some leads.. thank you very much...

    Frances
     
    Frances, Sep 21, 2005
    #10
  11. jullag

    km0ti0n Guest

    Re: dynamic content...

    Hi

    First thing i notice is the way you are referencing the value of the
    select please read this :

    http://km0ti0n.blunted.co.uk/viewfaq.xap?ID=632629154586250000

    Ok so you want to create HTML dynamically. There's a workign example
    here:

    http://km0ti0n.blunted.co.uk/Using DOM methods to create html.xap

    As for adding an iframe I had to think for a minuite to ensure it was
    possible to append an iframe using DOM methods. I made you this
    example.

    http://km0ti0n.blunted.co.uk/viewng.xap?ID=632629149606406250

    Hope it helps
     
    km0ti0n, Sep 21, 2005
    #11
  12. jullag

    Frances Guest

    Re: dynamic content...

    km0ti0n wrote:
    > Hi
    >
    > First thing i notice is the way you are referencing the value of the
    > select please read this :
    >
    > http://km0ti0n.blunted.co.uk/viewfaq.xap?ID=632629154586250000
    >
    > Ok so you want to create HTML dynamically. There's a workign example
    > here:
    >
    > http://km0ti0n.blunted.co.uk/Using DOM methods to create html.xap
    >
    > As for adding an iframe I had to think for a minuite to ensure it was
    > possible to append an iframe using DOM methods. I made you this
    > example.
    >
    > http://km0ti0n.blunted.co.uk/viewng.xap?ID=632629149606406250
    >
    > Hope it helps
    >

    thank you very much for yr help...

    I have a few questions about yr example..

    function test() {
    var iframe = document.createElement("iframe");
    iframe.src = "http://www.google.co.uk";
    document.getElementById("body").appendChild( iframe );
    }

    I have adapted yr function as follows:

    function pricing() {
    list = document.forms[0].product;
    selItem = list.options[list.selectedIndex].value;

    var iframe = document.createElement("iframe");
    // iframe.src = "iframes/cc.html"; // works fine..
    // file I want to see shows up fine...

    iframe.src = "iframes/' + selItem + '.html"; // get a 404...
    // ?? alert below prints what I expect it to..
    // shows correct path to file..
    alert('iframes/' + selItem + '.html');

    document.getElementById("divPricing").appendChild( iframe );
    }

    this line

    changed to
    document.getElementById("divPricing").appendChild( iframe );

    b/c this iframe goes inside a div (a div nested inside another div..)
    and either way when did
    document.getElementById("body").appendChild( iframe );
    got an error..
    ("document.getElementById("") is null or not an object..")

    thank you very much..

    Frances
     
    Frances, Sep 21, 2005
    #12
  13. jullag

    km0ti0n Guest

    Re: dynamic content...

    I fyou are getting ("document.getElementById("") is null or not an
    object..") errors make sure you are referenceing the element correctly.
    By checking the ID of the element is correct and make sure the the
    elements id isn't duplicated.

    I see you have this

    document.getElementById("divPricing").appendChild( iframe );

    You should have the corrisponding HTML :

    <div id="divPricing"> .... </div>

    Normally it's a typo....

    Also you are *STILL* using selItem =
    list.options[list.selectedIndex].value; and not just list.value. they
    are the same.
     
    km0ti0n, Sep 21, 2005
    #13
  14. jullag

    Frances Guest

    Re: dynamic content...

    km0ti0n wrote:
    > I fyou are getting ("document.getElementById("") is null or not an
    > object..") errors make sure you are referenceing the element correctly.
    > By checking the ID of the element is correct and make sure the the
    > elements id isn't duplicated.
    >
    > I see you have this
    >
    > document.getElementById("divPricing").appendChild( iframe );
    >
    > You should have the corrisponding HTML :
    >
    > <div id="divPricing"> .... </div>
    >
    > Normally it's a typo....
    >
    > Also you are *STILL* using selItem =
    > list.options[list.selectedIndex].value; and not just list.value. they
    > are the same.


    you're right -- I just changed that.. however on larger problem:

    yes, corresponding HTML IS there for div..

    <div id="divPricing">
    </div>

    and positioned w/css where I want it..

    funny thing I noticed is that behavior is exactly the same whether or
    not I put quotes in <option> tags..

    <option value="doc1">Doc 1</option>
    <option value="doc2">Doc 2</option>

    <option value=doc1>Doc 1</option>
    <option value=doc2>Doc 2</option>

    exact same behavior here in both cases...
    ???

    again many thanks for yr help..
     
    Frances, Sep 21, 2005
    #14
  15. jullag

    Frances Guest

    Re: dynamic content...

    Frances wrote:
    > km0ti0n wrote:
    >
    >> I fyou are getting ("document.getElementById("") is null or not an
    >> object..") errors make sure you are referenceing the element correctly.
    >> By checking the ID of the element is correct and make sure the the
    >> elements id isn't duplicated.
    >>
    >> I see you have this
    >>
    >> document.getElementById("divPricing").appendChild( iframe );
    >>
    >> You should have the corrisponding HTML :
    >>
    >> <div id="divPricing"> .... </div>
    >>
    >> Normally it's a typo....
    >>
    >> Also you are *STILL* using selItem =
    >> list.options[list.selectedIndex].value; and not just list.value. they
    >> are the same.

    >
    >
    > ok, am trying a different approach, iframes print w/a border that I
    > can't get rid of.. not sure yet whether will go w/iframes or not, but at
    > any rate am having problems w/this approach also:
    >
    > in <body>:
    > <option value="val1">Product One</option>
    > <option value="val2">Product Two</option>
    > <option value="val3">Product Three</option>
    > <option value="val4">Product Four</option>
    >
    > in <head>:
    > function pricing() {
    > var val1 = "Product One";
    > var val2 = "Product Two";
    > var val3 = "Product Three";
    > var val4 = "Product Four";
    >
    > var list = document.forms[0].product;
    > var selItem = list.value;
    > var copy = "" + selItem + "";
    > var div = document.getElementById("divPricing");
    > var divCopy = document.createTextNode(copy);
    >
    > div.appendChild(divCopy); // prints, for example,
    > // (no quotes) 'val4' instead of 'Product Four'...
    >
    > // div.innerHTML = divCopy; // this prints '[object]' (no quotes)
    > }
    >
    >
    > again many thanks for your help...... Frances



    ok, I think I need to go back to iframes..

    the problem is a very odd one.. pls see below:

    function pricing() {
    var list = document.forms[0].product;
    var selItem = list.value;
    var ifr = document.createElement("iframe");
    //ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..

    look @ 2 following lines.. this is very weird..
    ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..
    // ifr.src = "iframes/aa.html"; // *****loads fine..

    document.getElementById("divPricing").appendChild( ifr );
    }

    I can't just put divs there or do show/hide divs b/c this is for a div
    nested in another div which itself is hidden or visible depending on
    user input.. would appreciate any help here.. thank you very much...
     
    Frances, Sep 21, 2005
    #15
  16. jullag

    Frances Guest

    Re: dynamic content...

    Frances wrote:
    > Frances wrote:
    >
    >> km0ti0n wrote:
    >>
    >>> I fyou are getting ("document.getElementById("") is null or not an
    >>> object..") errors make sure you are referenceing the element correctly.
    >>> By checking the ID of the element is correct and make sure the the
    >>> elements id isn't duplicated.
    >>>
    >>> I see you have this
    >>>
    >>> document.getElementById("divPricing").appendChild( iframe );
    >>>
    >>> You should have the corrisponding HTML :
    >>>
    >>> <div id="divPricing"> .... </div>
    >>>
    >>> Normally it's a typo....
    >>>
    >>> Also you are *STILL* using selItem =
    >>> list.options[list.selectedIndex].value; and not just list.value. they
    >>> are the same.

    >>
    >>
    >>
    >> ok, am trying a different approach, iframes print w/a border that I
    >> can't get rid of.. not sure yet whether will go w/iframes or not, but
    >> at any rate am having problems w/this approach also:
    >>
    >> in <body>:
    >> <option value="val1">Product One</option>
    >> <option value="val2">Product Two</option>
    >> <option value="val3">Product Three</option>
    >> <option value="val4">Product Four</option>
    >>
    >> in <head>:
    >> function pricing() {
    >> var val1 = "Product One";
    >> var val2 = "Product Two";
    >> var val3 = "Product Three";
    >> var val4 = "Product Four";
    >>
    >> var list = document.forms[0].product;
    >> var selItem = list.value;
    >> var copy = "" + selItem + "";
    >> var div = document.getElementById("divPricing");
    >> var divCopy = document.createTextNode(copy);
    >>
    >> div.appendChild(divCopy); // prints, for example,
    >> // (no quotes) 'val4' instead of 'Product Four'...
    >>
    >> // div.innerHTML = divCopy; // this prints '[object]' (no quotes)
    >> }
    >>
    >>
    >> again many thanks for your help...... Frances

    >
    >
    >
    > ok, I think I need to go back to iframes..
    >
    > the problem is a very odd one.. pls see below:
    >
    > function pricing() {
    > var list = document.forms[0].product;
    > var selItem = list.value;
    > var ifr = document.createElement("iframe");
    > //ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..
    >
    > look @ 2 following lines.. this is very weird..
    > ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..


    ok, above line is wrong (the quotes..)
    however when did this still got 404..

    ifr.src = '"iframes/' + 'aa' + '.html"';

    only way finally got it to work:

    ifr.src = 'iframes/' + selItem + '.html';

    ?????
    (tried to escape that double-quote like you do in java, but also no go..)
     
    Frances, Sep 21, 2005
    #16
  17. jullag

    web.dev Guest

    Re: dynamic content...

    Frances wrote:
    > Frances wrote:
    > > Frances wrote:
    > >
    > >> km0ti0n wrote:
    > >>
    > >>> I fyou are getting ("document.getElementById("") is null or not an
    > >>> object..") errors make sure you are referenceing the element correctly.
    > >>> By checking the ID of the element is correct and make sure the the
    > >>> elements id isn't duplicated.
    > >>>
    > >>> I see you have this
    > >>>
    > >>> document.getElementById("divPricing").appendChild( iframe );
    > >>>
    > >>> You should have the corrisponding HTML :
    > >>>
    > >>> <div id="divPricing"> .... </div>
    > >>>
    > >>> Normally it's a typo....
    > >>>
    > >>> Also you are *STILL* using selItem =
    > >>> list.options[list.selectedIndex].value; and not just list.value. they
    > >>> are the same.
    > >>
    > >>
    > >>
    > >> ok, am trying a different approach, iframes print w/a border that I
    > >> can't get rid of.. not sure yet whether will go w/iframes or not, but
    > >> at any rate am having problems w/this approach also:
    > >>
    > >> in <body>:
    > >> <option value="val1">Product One</option>
    > >> <option value="val2">Product Two</option>
    > >> <option value="val3">Product Three</option>
    > >> <option value="val4">Product Four</option>
    > >>
    > >> in <head>:
    > >> function pricing() {
    > >> var val1 = "Product One";
    > >> var val2 = "Product Two";
    > >> var val3 = "Product Three";
    > >> var val4 = "Product Four";
    > >>
    > >> var list = document.forms[0].product;
    > >> var selItem = list.value;
    > >> var copy = "" + selItem + "";
    > >> var div = document.getElementById("divPricing");
    > >> var divCopy = document.createTextNode(copy);
    > >>
    > >> div.appendChild(divCopy); // prints, for example,
    > >> // (no quotes) 'val4' instead of 'Product Four'...
    > >>
    > >> // div.innerHTML = divCopy; // this prints '[object]' (no quotes)
    > >> }
    > >>
    > >>
    > >> again many thanks for your help...... Frances

    > >
    > >
    > >
    > > ok, I think I need to go back to iframes..
    > >
    > > the problem is a very odd one.. pls see below:
    > >
    > > function pricing() {
    > > var list = document.forms[0].product;
    > > var selItem = list.value;
    > > var ifr = document.createElement("iframe");
    > > //ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..
    > >
    > > look @ 2 following lines.. this is very weird..
    > > ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..

    >
    > ok, above line is wrong (the quotes..)
    > however when did this still got 404..
    >
    > ifr.src = '"iframes/' + 'aa' + '.html"';


    I don't see why you even need to place in double quotes. The whole
    thing is a string value. The above code statement is equivalent to the
    following:

    ifr.src = '"iframes/aa.html"';

    When all you really could've done is:

    ifr.src = 'iframes/aa.html';

    >
    > only way finally got it to work:
    >
    > ifr.src = 'iframes/' + selItem + '.html';


    The solution you're presenting here does not really relate to the above
    problem you mentioned.

    >
    > ?????
    > (tried to escape that double-quote like you do in java, but also no go..)


    If you're having trouble with javascript, I would rather you post your
    own thread instead of using someone else's.
     
    web.dev, Sep 21, 2005
    #17
  18. jullag

    Frances Guest

    Re: dynamic content...

    web.dev wrote:
    > Frances wrote:
    >
    >>Frances wrote:
    >>
    >>>Frances wrote:
    >>>
    >>>
    >>>>km0ti0n wrote:
    >>>>
    >>>>
    >>>>>I fyou are getting ("document.getElementById("") is null or not an
    >>>>>object..") errors make sure you are referenceing the element correctly.
    >>>>> By checking the ID of the element is correct and make sure the the
    >>>>>elements id isn't duplicated.
    >>>>>
    >>>>>I see you have this
    >>>>>
    >>>>>document.getElementById("divPricing").appendChild( iframe );
    >>>>>
    >>>>>You should have the corrisponding HTML :
    >>>>>
    >>>>><div id="divPricing"> .... </div>
    >>>>>
    >>>>>Normally it's a typo....
    >>>>>
    >>>>>Also you are *STILL* using selItem =
    >>>>>list.options[list.selectedIndex].value; and not just list.value. they
    >>>>>are the same.
    >>>>
    >>>>
    >>>>
    >>>>ok, am trying a different approach, iframes print w/a border that I
    >>>>can't get rid of.. not sure yet whether will go w/iframes or not, but
    >>>>at any rate am having problems w/this approach also:
    >>>>
    >>>> in <body>:
    >>>><option value="val1">Product One</option>
    >>>><option value="val2">Product Two</option>
    >>>><option value="val3">Product Three</option>
    >>>><option value="val4">Product Four</option>
    >>>>
    >>>>in <head>:
    >>>>function pricing() {
    >>>>var val1 = "Product One";
    >>>>var val2 = "Product Two";
    >>>>var val3 = "Product Three";
    >>>>var val4 = "Product Four";
    >>>>
    >>>> var list = document.forms[0].product;
    >>>> var selItem = list.value;
    >>>>var copy = "" + selItem + "";
    >>>>var div = document.getElementById("divPricing");
    >>>>var divCopy = document.createTextNode(copy);
    >>>>
    >>>> div.appendChild(divCopy); // prints, for example,
    >>>> // (no quotes) 'val4' instead of 'Product Four'...
    >>>>
    >>>>// div.innerHTML = divCopy; // this prints '[object]' (no quotes)
    >>>> }
    >>>>
    >>>>
    >>>>again many thanks for your help...... Frances
    >>>
    >>>
    >>>
    >>>ok, I think I need to go back to iframes..
    >>>
    >>>the problem is a very odd one.. pls see below:
    >>>
    >>>function pricing() {
    >>> var list = document.forms[0].product;
    >>> var selItem = list.value;
    >>> var ifr = document.createElement("iframe");
    >>>//ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..
    >>>
    >>> look @ 2 following lines.. this is very weird..
    >>>ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..

    >>
    >> ok, above line is wrong (the quotes..)
    >> however when did this still got 404..
    >>
    >> ifr.src = '"iframes/' + 'aa' + '.html"';

    >
    >
    > I don't see why you even need to place in double quotes. The whole
    > thing is a string value. The above code statement is equivalent to the
    > following:
    >
    > ifr.src = '"iframes/aa.html"';


    ok, what confused me is that in TAG (<iframe>) you have to put (I think)
    attr under src in quotes (<iframe src="file.html"..>) is this right? at
    any rate not sure this is 100% required so left them out.. but of course
    you're right, I'm not even generating iframe w/a conventional tag so I
    guess that requirement doesn't apply..

    finally got this to work thus:

    list = document.forms[0].product;
    selItem = list.value;
    var ifr = document.createElement("iframe");
    ifr.src = 'iframes/' + selItem + '.html';
    ifr.scrolling = 'no';
    ifr.style.borderWidth='0'; // this only stuff that's not working..
    document.getElementById("divPricing").appendChild(ifr);


    problem NOW is that when user goes back to sel obj and selects a diff.
    product new iframe gets placed BESIDE current one, not in same place
    where other one is :( (which is weird b/c iframe is inside a div
    positioned absolutely w/css.. I guess have to do the visible/hidden
    thingie w/css...)

    again, many thanks for your help..... Frances
     
    Frances, Sep 21, 2005
    #18
  19. jullag

    web.dev Guest

    Re: dynamic content...

    Frances wrote:
    > web.dev wrote:
    > > Frances wrote:
    > >
    > >>Frances wrote:
    > >>
    > >>>Frances wrote:
    > >>>
    > >>>
    > >>>>km0ti0n wrote:
    > >>>>
    > >>>>
    > >>>>>I fyou are getting ("document.getElementById("") is null or not an
    > >>>>>object..") errors make sure you are referenceing the element correctly.
    > >>>>> By checking the ID of the element is correct and make sure the the
    > >>>>>elements id isn't duplicated.
    > >>>>>
    > >>>>>I see you have this
    > >>>>>
    > >>>>>document.getElementById("divPricing").appendChild( iframe );
    > >>>>>
    > >>>>>You should have the corrisponding HTML :
    > >>>>>
    > >>>>><div id="divPricing"> .... </div>
    > >>>>>
    > >>>>>Normally it's a typo....
    > >>>>>
    > >>>>>Also you are *STILL* using selItem =
    > >>>>>list.options[list.selectedIndex].value; and not just list.value. they
    > >>>>>are the same.
    > >>>>
    > >>>>
    > >>>>
    > >>>>ok, am trying a different approach, iframes print w/a border that I
    > >>>>can't get rid of.. not sure yet whether will go w/iframes or not, but
    > >>>>at any rate am having problems w/this approach also:
    > >>>>
    > >>>> in <body>:
    > >>>><option value="val1">Product One</option>
    > >>>><option value="val2">Product Two</option>
    > >>>><option value="val3">Product Three</option>
    > >>>><option value="val4">Product Four</option>
    > >>>>
    > >>>>in <head>:
    > >>>>function pricing() {
    > >>>>var val1 = "Product One";
    > >>>>var val2 = "Product Two";
    > >>>>var val3 = "Product Three";
    > >>>>var val4 = "Product Four";
    > >>>>
    > >>>> var list = document.forms[0].product;
    > >>>> var selItem = list.value;
    > >>>>var copy = "" + selItem + "";
    > >>>>var div = document.getElementById("divPricing");
    > >>>>var divCopy = document.createTextNode(copy);
    > >>>>
    > >>>> div.appendChild(divCopy); // prints, for example,
    > >>>> // (no quotes) 'val4' instead of 'Product Four'...
    > >>>>
    > >>>>// div.innerHTML = divCopy; // this prints '[object]' (no quotes)
    > >>>> }
    > >>>>
    > >>>>
    > >>>>again many thanks for your help...... Frances
    > >>>
    > >>>
    > >>>
    > >>>ok, I think I need to go back to iframes..
    > >>>
    > >>>the problem is a very odd one.. pls see below:
    > >>>
    > >>>function pricing() {
    > >>> var list = document.forms[0].product;
    > >>> var selItem = list.value;
    > >>> var ifr = document.createElement("iframe");
    > >>>//ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..
    > >>>
    > >>> look @ 2 following lines.. this is very weird..
    > >>>ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..
    > >>
    > >> ok, above line is wrong (the quotes..)
    > >> however when did this still got 404..
    > >>
    > >> ifr.src = '"iframes/' + 'aa' + '.html"';

    > >
    > >
    > > I don't see why you even need to place in double quotes. The whole
    > > thing is a string value. The above code statement is equivalent to the
    > > following:
    > >
    > > ifr.src = '"iframes/aa.html"';

    >
    > ok, what confused me is that in TAG (<iframe>) you have to put (I think)
    > attr under src in quotes (<iframe src="file.html"..>) is this right? at
    > any rate not sure this is 100% required so left them out.. but of course
    > you're right, I'm not even generating iframe w/a conventional tag so I
    > guess that requirement doesn't apply..
    >
    > finally got this to work thus:
    >
    > list = document.forms[0].product;
    > selItem = list.value;
    > var ifr = document.createElement("iframe");
    > ifr.src = 'iframes/' + selItem + '.html';
    > ifr.scrolling = 'no';
    > ifr.style.borderWidth='0'; // this only stuff that's not working..


    It is working. But it's probably not the border you were thinking of.
    That border is for placing a border around the entire iframe. And if
    that's the case, then you still have what you asked for, a zero border.
    But if you wanted something visible, you might also want to set the
    borderStyle and the borderColor.

    > document.getElementById("divPricing").appendChild(ifr);
    >
    >
    > problem NOW is that when user goes back to sel obj and selects a diff.
    > product new iframe gets placed BESIDE current one, not in same place
    > where other one is :( (which is weird b/c iframe is inside a div
    > positioned absolutely w/css.. I guess have to do the visible/hidden
    > thingie w/css...)
    >
    > again, many thanks for your help..... Frances


    Hiding the other frames with css is not a good solution. Consider
    this, what if the user continuously selects a different product? Then
    the page will continue to append a new child.

    What you'll have to do is use the replaceChild method.

    document.getElementById("id").appendChild(newChild, oldChild);
     
    web.dev, Sep 21, 2005
    #19
  20. jullag

    Frances Guest

    Re: dynamic content...

    Richard Cornford wrote:
    > km0ti0n wrote:
    >
    >>First thing i notice is the way you are referencing the
    >>value of the select please read this :
    >>
    >>http://km0ti0n.blunted.co.uk/viewfaq.xap?ID=632629154586250000

    >
    >
    > The value property of an HTMLSelectElement is specified in the W3C HTML
    > DOM standard, and is a formalisation of pre-existing behaviour from some
    > browser implementations. It was not universal at the time of its
    > standardisation and so its use in place of looking up the value of a
    > selected option with the selectedIndex property will needlessly
    > sacrifice browser compatibility. This would not be wise in a script such
    > as a form validation script that does not itself have a dependency on
    > other more recent DOM features.
    >
    > Richard.


    yes, I tried this, it works.. thank you.. I like it, simpler than other
    way... (also thanks for pointing out I had wrong var decl (=+ instead
    of +=..)
     
    Frances, Sep 22, 2005
    #20
    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. Rick Spiewak
    Replies:
    1
    Views:
    426
    Rick Spiewak
    Jul 22, 2003
  2. Kay
    Replies:
    2
    Views:
    7,159
  3. Roger Pack
    Replies:
    2
    Views:
    100
    Roger Pack
    Jun 26, 2008
  4. PHP2
    Replies:
    4
    Views:
    151
  5. Frank Peterson
    Replies:
    9
    Views:
    232
    David Mark
    Jun 28, 2009
Loading...

Share This Page