SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Ivisible text using appendChild and an <li> elemnt in Safari

    Hi everyone
    I have an interesting problem in Safari. There is a text cell that you type into. When you are done typing, the text in the text box is compared to what is in a <li> element.

    Code:
           text = text == null?"":trimString(text);
            var save = false;
            var isModified = false;
            var childNodes = li.childNodes;
            if(childNodes.length > 0){
              if(trimString(childNodes[0].data) != text){
                if(childNodes[0].data != text){
                  isModified = true;
                }
                childNodes[0].data = text;
                save = true;
              }
            }
            else if(text != ""){
              li.appendChild(document.createTextNode(text));
              save = true;
            }
    This works great in Firefox and IE, but in safari the text does no show up. However, the text is there, as when you click on the li, the text is put into the text box.


    Code:
            var childNodes = li.childNodes;
            if(childNodes.length > 0){
              textCell.value = childNodes[0].data;
            }
    Thanks
    AFrieze

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    San Francisco, CA
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey AFrieze,

    Confused on a couple points, and I'm not quite picturing quite how the code should work:
    1) what is .data? I can't find a reference to it in any DOM references I have. And trying out the code it doesn't seem to have anything.

    2) if your creating a new LI element shouldn't you do this:
    Code:
    newLi = document.createElement("LI");
    newLi.appendChild(document.createTextNode(text));
    li.appendChild(newLi);

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    data is a property of text nodes. You could use the nodeValue property instead. Both will give you the text in the text node. They are defined in DOM1 Core.

    AFrieze, could you show us where you defined the "li" variable?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies, I will try to be a little more specific.
    The application we are talking about is 50+ pages of javascript. It is an ajax spreadsheet. When you click on an li(data cell), a text box is moved ontop of the li, and the text in the li is put in the text box, when you leave that li, whatever text is in the textbox gets put in the li.

    Hopefull this helps visualize what is occuring. On safari, the user will type text and leave the cell, the text disapears, when they go back to the cell, the text is put into the textbox, so the text must be in the li.

    The li variable exists in the document and is defined when the spreadsheet is created. Generally, I clone an existing li, append it to a tree not in the document(doing thousands of these at once) then append the tree to the document. I am quite sure that the li exists when we reach this point in the code.

    Here is a picture
    Spreadsheet picture


    Sorry If I am confusing, I will look into posting an example
    Thank You
    Andrew Frieze
    Last edited by AFrieze; Nov 14, 2006 at 13:32.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    San Francisco, CA
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I had a quick shot at reproducing the functionality... probably doesn't work exactly like yours and I couldn't get it to work exactly as desired in Safari to begin with. But I always find isolating as much as possible helpful in finding problems.

    The first thing I guess I would try is having the input text box appear somewhere other than directly over the cell. Perhaps it is some redraw problem.

    I would also try just putting in some random value -- rather than the value that comes out of the text box (in case there is something untoward finding its way in)

    Lastly, if the problem still occurs, is to play with the CSS some. It could be just some Safari specific CSS bug.

    Here's my attempt at a unit test (i tried cloning the input node into the LI rather than moving something, doesn't quite end up in the right place in Safari for some reason though).

    Code:
    <ul>
    <li id="li" onclick="openInput()">asdasd</li>
    </ul>
    
    <p>&nbsp;</p>
    <input id="text" onblur="change(this.value)" style="display:none;position:absolute;">
    
    <script>
    var isOpen = false
    function openInput()
    {
    	if (!isOpen)
    	{
    		objT = document.getElementById('text')
    		objNewT = objT.cloneNode(true)
    		objli = document.getElementById("li")
    		if (objli.childNodes.length > 0 ) 
    		{
    			objNewT.value = objli.childNodes[0].nodeValue;
    			objli.insertBefore(objNewT,objli.childNodes[0]);
    		}
    		else
    		{
    			objli.appendChild( objNewT )
    		}
    		objNewT.style.display='block'
    		isOpen = true;
    	}
    }
    
    function change(text)
    {
    	text = text == null?"":text;
    	var save = false;
    	var isModified = false;
    	
    	objli = document.getElementById("li")
    	if (objli.childNodes.length > 1)
    	{
    		objli.childNodes[1].nodeValue
    		if( objli.childNodes[1].nodeValue != text)
    		{
    	   		isModified = true;
    	    	objli.childNodes[1].nodeValue = text;
    	    	save = true;
    		}
    		else if(text != "")
    		{
    			save = true;
    		}
    	}
    	objli.removeChild(li.childNodes[0])
    	isOpen = false
    }
    </script>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •