SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE doesnt like empty nodes?

    Ok, on this page (http://retro.doesitmatter.net/inventory.html) i'm getting javascript errors on the page. The functionality is sort of working, because i had to add text to the xml file nodes which were empty and then use css to hide that temporary text. I already posted this in the javascript forum, but it was suggested i post here as well.
    DoesItMatter
    - anyone seen my underwear?

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, a couple of things here:

    Code:
    function items(category) {
    for( var i = 0; i < nodes.length; i++) {
    	var imagesm = xmlDoc.getElementsByTagName(category)[i].getElementsByTagName('smallimg')[0].firstChild.nodeValue;
    	var imagelg = xmlDoc.getElementsByTagName(category)[i].getElementsByTagName('largeimg')[0].firstChild.nodeValue;	
    	var title = "";
    	var desc = "";
    	var price = "";
    	//var title = xmlDoc.getElementsByTagName(category)[i].getElementsByTagName('name')[0].firstChild.nodeValue;
    	//var desc = xmlDoc.getElementsByTagName(category)[i].getElementsByTagName('description')[0].firstChild.nodeValue;
    	//var price = xmlDoc.getElementsByTagName(category)[i].getElementsByTagName('price')[0].firstChild.nodeValue;
    	document.write("<div class='item'>");
    	document.write("<a href="+imagelg+" target='_blank'><img src="+imagesm+" /></a>");
    	document.write("<span class='title'>"+title+"</span>");
    	document.write("<span class='desc'>"+desc+"</span>");
    	document.write("<span class='price'>"+price+"</span>");
    	document.write("</div>");
    	}
    }
    first off, don't use nodes like that. Do something like:

    Code:
    nodes = xmlDoc.getElementsByTagName(category);
    for ( i = 0 ; i < nodes.length ; i++)
    {
      nodes[i].blahetc...
    The way you have it now, you're traversing the entire tree every single time you call xmlDoc.getElementsById. The above code will prevent that from being done, and things will be MUCH faster. But lets not stop there. Now, you again have that problem when dealing with what inside of the category node (<name>, <description>,<price>,etc). What you're in essance doing is checking the name of the node, and taking action accordingly. So.. let's work with that

    Code:
    fuction items(category)
    {
      var nodes = xmlDoc.getElementsByTagName(category);
      for ( i = 0 ; i < nodes.length ; i++)
      {
        var item_entries = nodes[i].childNodes;
        for ( j = 0 ; j < item_entries.length; j++)
        {
          switch(item_entries[j].toLowerCase())
          {
            case "name":
              var name = item_entries[j].nodeValue;
              break;
            case "description":
              var desc = item_entries[j].nodeValue;
              break;
            case "price":
              var price = item_entries[j].nodeValue;
              break;
            case "largeimg":
              var large_image = item_entries[j].nodeValue;
              break;
            case "smallimg":
              var small_image = item_entries[j].nodeValue;
              break;
            default:
              break;
          }
          document.write("<div class='item'>");
          document.write("<a href="+large_image+" target='_blank'><img src="+small_image+" /></a>");
          document.write("<span class='title'>"+name+"</span>");
          document.write("<span class='desc'>"+desc+"</span>");
          document.write("<span class='price'>"+price+"</span>");
          document.write("</div>");
        }
      }
    }
    So basically, we get all elements by the category (tag name in essence), then we loop through the children (prevents having to go through the tree again, and focus on what's underneath the current node), checking for each tag name we want to act upon, and setting local variables for their values accordingly. Then when that's all done, we write out our information.

    Hope that helps.

  3. #3
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops.. so what I forgot to say was, by using nodeValue instead of checking against firstChild, that should pickup the actual text within the node, so if it's empty it simply won't display anything (or you could do an additional check and replace an empty node value with "Not avaliable" or something descriptive).

  4. #4
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow...thanks! I had to remove the toLowerCase function because FF was telling me that it wasnt a function and it was causing it to break the loop.
    DoesItMatter
    - anyone seen my underwear?

  5. #5
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually i made those changes and from what i can see is that the values are now being returned as undefined.
    DoesItMatter
    - anyone seen my underwear?

  6. #6
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, oops, out of scope and forgot nodeName . Try this:

    Code:
    function items(category)
    {
      var nodes = xmlDoc.getElementsByTagName(category);
      for ( i = 0 ; i < nodes.length ; i++)
      {
        var item_entries = nodes[i].childNodes;
        for ( j = 0 ; j < item_entries.length; j++)
        {
          switch(item_entries[j].nodeName.toLowerCase())
          {
            case "name":
              var item = item_entries[j].textContent;
              break;
            case "description":
              var desc = item_entries[j].textContent;
              break;
            case "price":
              var price = item_entries[j].textContent;
              break;
            case "largeimg":
              var large_image = item_entries[j].textContent;
              break;
            case "smallimg":
              var small_image = item_entries[j].textContent;
              break;
            default:
              break;
          }
        }
    		document.write("<div class='item'>");
        document.write("<a href="+large_image+" target='_blank'><img src="+small_image+" /></a>");
        document.write("<span class='title'>"+item+"</span>");
        document.write("<span class='desc'>"+desc+"</span>");
        document.write("<span class='price'>"+price+"</span>");
        document.write("</div>");
      }
    }
    Also helps if I could spell function right

  7. #7
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I had to do some checking on what browser was being used as the final working product, it seems that textContent works only with FF and mozilla browsers and that ".text" works well with IE.

    Code:
    var xmlDoc;
    
     if (window.ActiveXObject) //this portion is meant for I.E.
     {
    	xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
     }
    else if (document.implementation && document.implementation.createDocument) //for firefox
    {
    	xmlDoc = document.implementation.createDocument("", "doc", null);
    }
    
    xmlDoc.async=false;
    xmlDoc.load('store.xml');
    
    function items(category)
    {
      var nodes = xmlDoc.getElementsByTagName(category);
      for ( i = 0 ; i < nodes.length ; i++)
      {
    	var item_entries = nodes[i].childNodes;
    	for ( j = 0 ; j < item_entries.length; j++)
    	{
    	  switch(item_entries[j].nodeName.toLowerCase())
    	  {
    		case "name":
    		  if (document.implementation && document.implementation.createDocument){
    		   var item = item_entries[j].textContent;
    			  break;
    			} else { 
    				var item = item_entries[j].text;
    			 break;
    			}
    		case "description":
    		  if (document.implementation && document.implementation.createDocument){
    		   var desc = item_entries[j].textContent;
    			  break;
    			} else { 
    				var desc = item_entries[j].text;
    			 break;
    			}
    		case "price":
    		  if (document.implementation && document.implementation.createDocument){
    		   var price = item_entries[j].textContent;
    			  break;
    			} else { 
    				var price = item_entries[j].text;
    			 break;
    			}
    		case "largeimg":
    		  if (document.implementation && document.implementation.createDocument){
    		   var large_image = item_entries[j].textContent;
    			  break;
    			} else { 
    				var large_image = item_entries[j].text;
    			 break;
    			}
    		case "smallimg":
    		  if (document.implementation && document.implementation.createDocument){
    		   var small_image = item_entries[j].textContent;
    			  break;
    			} else { 
    				var small_image = item_entries[j].text;
    			 break;
    			}
    		default:
    		  break;
    	  }
    	}
    	 document.write("<div class='item'>");
    	document.write("<a href="+large_image+" target='_blank'><img src="+small_image+" /></a>");
    	document.write("<span class='title'>"+item+"</span>");
    	document.write("<span class='desc'>"+desc+"</span>");
    	document.write("<span class='price'>"+price+"</span>");
    	document.write("</div>");
      }
    }
    DoesItMatter
    - anyone seen my underwear?

  8. #8
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    small note here:

    Code:
    		  if (document.implementation && document.implementation.createDocument){
    		   var item = item_entries[j].textContent;
    			  break;
    			} else { 
    				var item = item_entries[j].text;
    			 break;
    			}
    because of the scope of what you're dealing with, it's more realistic to take the two break's and put them outside the if/else logic:

    Code:
    		       if (document.implementation && document.implementation.createDocument){
    		            var item = item_entries[j].textContent;
    			} else { 
    			    var item = item_entries[j].text;
    			}
                            break;

  9. #9
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for all your help!
    DoesItMatter
    - anyone seen my underwear?


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
  •