Creating html from javascript objects

Discussion in 'Javascript' started by lcjohnso@gmail.com, May 12, 2006.

  1. Guest

    Hi all,

    Does anyone know if there is an easy way to create the html
    representation of an HTMLElement object in javascript? I'm attempting
    to update the innerHTML property of a div element to allow user entries
    to presist when the the input display pane is changed. Basically I have
    several different div panes that users can rotate through when entering
    values of a simulated form whose values are then parsed and used to
    dynamically display content using ajax style methods. The innerHTML
    property seems to update in IE as users input values and this works
    fine. However, with firefox a user's values are lost when I update the
    innerHTML property of one of the hidden div elements. So basically I'm
    trying to write a method that will build the updated html with
    checkboxes checked etc so that I can use the generated html as the
    value of the innerHTML property of the div I'm trying to update.
    , May 12, 2006
    #1
    1. Advertising

  2. Guest

    wrote:
    (snipped)
    > However, with firefox a user's values are lost when I update the
    > innerHTML property of one of the hidden div elements. So basically I'm
    > trying to write a method that will build the updated html with
    > checkboxes checked etc so that I can use the generated html as the
    > value of the innerHTML property of the div I'm trying to update.


    I had this problem, I solved it by reading in all the data, updating
    the innerHTML, then writing the values back. Something like this :

    var controls = ['name', 'address', 'number_of_badgers'];

    function UpdateForm(form)
    {
    // first save all the values
    var saved = [];
    for(var control_name in controls)
    {
    saved[control_name] = form[control_name].value;
    }

    // mess around with form :
    form.innerHTML += "<p>Message</p>";

    // save the values back
    for(var control_name in controls)
    {
    form[control_name].value = saved[control_name];
    }
    }

    HTH

    Sam
    , May 12, 2006
    #2
    1. Advertising

  3. RobG Guest

    wrote:
    > Hi all,
    >
    > Does anyone know if there is an easy way to create the html
    > representation of an HTMLElement object in javascript?


    innerHTML is a property invented by MS and widely copied. There is no
    public specification, so others have simply copied MS's implementation
    with varying degrees of exactitude.

    It generally works OK except that not all DOM attributes are represented
    in HTML, for example you can't differentiate between current value and
    default value for a text input, you can only set the value attribute:

    <input ... value="foo">

    which now becomes the default value and the current value. In Firefox,
    the innerHTML value attribute remains as per the original source HTML,
    but in IE it becomes whatever the current value is. So in Firefox you
    lose the current value, in IE you lose the default value.


    > I'm attempting
    > to update the innerHTML property of a div element to allow user entries
    > to presist when the the input display pane is changed. Basically I have
    > several different div panes that users can rotate through when entering
    > values of a simulated form whose values are then parsed and used to
    > dynamically display content using ajax style methods. The innerHTML
    > property seems to update in IE as users input values and this works
    > fine. However, with firefox a user's values are lost when I update the
    > innerHTML property of one of the hidden div elements. So basically I'm
    > trying to write a method that will build the updated html with
    > checkboxes checked etc so that I can use the generated html as the
    > value of the innerHTML property of the div I'm trying to update.


    Have you considered hiding the forms using the display attribute? Or
    removing them from the document and storing them in an object? Then you
    can replace them whenever you want. Serialising elements using
    innerHTML then writing them back out again does not seem to be a good idea.

    Try this sample that removes the object by storing it in a global
    object, then restores it. When archived, the form is kept as-is. It is
    still available to script if you want to do anything with it but it's no
    longer part of the document.

    <script type="text/javascript">

    var elStore = {};

    function archiveEl(id) {
    var el = document.getElementById(id);
    elStore[id] = el.parentNode.removeChild(el);
    }

    function replaceEl(childID, parentID) {
    if (childID in elStore) {
    var p = document.getElementById(parentID);
    p.appendChild(elStore[childID]);
    }
    }
    </script>

    <button onclick="archiveEl('formA');">Remove formA</button>
    <button onclick="replaceEl('formA','frameA');">Restore formA</button>

    <div id="frameA">
    <form id="formA" name="formA" action=""><div>
    <input type="text" name="t0" value="t0 default"><br>
    <input type="text" name="t2" value="t0 default"><br>
    <input type="radio" name="rset0" value="rs0" checked><br>
    <input type="radio" name="rset0" value="rs1"><br>
    <input type="radio" name="rset0" value="rs2"><br>
    <input type="submit"><input type="reset">

    </div></form>

    </div>



    --
    Rob
    RobG, May 13, 2006
    #3
  4. Guest

    Rob,

    Thanks for all the info. I figured it was something to do with the
    various implementations of innerHTML, but its good to have that bit of
    knowledge clarified. In the end, using the divs themselves instead of
    using them as containers ended up doing the trick. I have to set width
    and height to make sure they're truly hidden when they need to be but
    all in all it seems I was really overcomplicating the issue.

    Thanks again,

    Larry
    , May 15, 2006
    #4
    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. 7stud
    Replies:
    11
    Views:
    667
    Dennis Lee Bieber
    Mar 20, 2007
  2. News123
    Replies:
    7
    Views:
    368
    Dave Angel
    Jun 29, 2009
  3. Lance
    Replies:
    3
    Views:
    98
  4. yawnmoth

    creating objects in javascript

    yawnmoth, Aug 3, 2007, in forum: Javascript
    Replies:
    3
    Views:
    72
    yawnmoth
    Aug 3, 2007
  5. bizt
    Replies:
    1
    Views:
    238
    Dan Rumney
    Jun 3, 2008
Loading...

Share This Page