Inserting
    and a space using the DOM

    Date: 07/05/07 (Javascript Community)    Keywords: database

    I'm working on customer management system, and have introduced a little AJAX to make the interface a bit more user friendly.  At the moment, I'm having a little trouble with an edit-in-place contact controller.

    For adding a new contact to a customer's file I have a form which when filled out saves the contact to the database synchronously then removes the form and shows the new contact details as text.  It's not the AJAX part that is causing me a problem, the application is fully functional, it's more a matter of presenting the new details neatly on the page after they have been saved.

            newContactTr1 = document.createElement('tr');
            newContactL1 = document.createElement('td');
            newContactR1 = document.createElement('td');
            newContactL1.style.fontWeight = 'bold';
            newContactR1.style.fontWeight = 'bold';
           
            newContactTr2 = document.createElement('tr');
            newContactL2 = document.createElement('td');
            newContactR2 = document.createElement('td');
           
            linebreak = document.createElement('br');
            space = document.createTextNode(' ');
           
            newContactTr1.id = 'row1-NewContactTemp';
            newContactTr2.id = 'row2-NewContactTemp';
            newContactL2.id = 'numbers-NewContactTemp';
            newContactR2.id = 'address-NewContactTemp';
           
            newContactL1.appendChild(fnameSpan);
            newContactL1.appendChild(space);
            newContactL1.appendChild(lnameSpan);
            newContactR1.appendChild(document.createTextNode('Address'));
            newContactL2.appendChild(phone1Span);
            newContactL2.appendChild(space);
            newContactL2.appendChild(phone1descSpan);
            newContactL2.appendChild(linebreak);
            newContactL2.appendChild(phone2Span);
            newContactL2.appendChild(space);
            newContactL2.appendChild(phone2descSpan);
            newContactL2.appendChild(linebreak);
            newContactL2.appendChild(phone3Span);
            newContactL2.appendChild(space);
            newContactL2.appendChild(phone3descSpan);
            newContactR2.appendChild(street1Span);
            newContactR2.appendChild(linebreak);
            newContactR2.appendChild(street2Span);
            newContactR2.appendChild(space);
            newContactR2.appendChild(townSpan);
            newContactR2.appendChild(linebreak);
            newContactR2.appendChild(countySpan);
            newContactR2.appendChild(linebreak);
            newContactR2.appendChild(postcodeSpan);

            newContactTr1.appendChild(newContactL1);
            newContactTr1.appendChild(newContactR1);
            newContactTr2.appendChild(newContactL2);
            newContactTr2.appendChild(newContactR2);

            contactsTable = document.getElementById('contactsTable');
            contactsTable.appendChild(newContactTr1);
            contactsTable.appendChild(newContactTr2);

    It basically inserts four table cells, with the details in spans (the spans have been set earlier).  The problem I'm having is with my line breaks and spaces to make the text present properly.  They just don't appear.  Can you see any obvious reason why this would be?  Alternatively, is there a better way to do this?

    Thanks in advance!

    Source: http://community.livejournal.com/javascript/135276.html

« Question about hosting .NET... || XML DOM vs. HTML DOM -... »


antivirus | apache | asp | blogging | browser | bugtracking | cms | crm | css | database | ebay | ecommerce | google | hosting | html | java | jsp | linux | microsoft | mysql | offshore | offshoring | oscommerce | php | postgresql | programming | rss | security | seo | shopping | software | spam | spyware | sql | technology | templates | tracker | virus | web | xml | yahoo | home