Javascript help for a OS X Tiger widget

August 2, 2005 5:39 PM

I'm trying to create my first widget -- a quick corporate directory lookup thingy -- and I'm having some trouble. The UI design, html, and css are all squared away, but the javascript is causing me some trouble.

The way its supposed to work is as follows:

1. User puts search terms into the widget's search input field, and then hits Enter.
2. the javascript captures this input and replaces spaces with +.
3. the script tacks the search terms onto the end of a URL and requests that page from our corporate intranet (via an XMLHttpRequest Object).
4. script waits for page to load into global "req" variable and then goes ahead and strips out and processes the interesting data from req.responseText.
5. script assembles the interesting data into rows and cells and then appends them into a tbody tag in the widget's html.

I have verified that the widget is actually opening a connection to the correct webpage, and does in fact obtain a copy of the page, but the data I want to see isn't displaying. I'm assuming the problem lies in the scrubbing.

The results I want are inside the 4th table element of the returned page. Each row in the table is a record containing four cells (Name,Site,Phone,Email). I want to remove the formatting from the rows and cells (in favor of my own CSS), but leave unaltered the links that exist in three of the four cells.

So now the question. What is the difference between innerText and innerHTML, and should I be using either of these in this case? I'm willing to post my code if you need to see it.

posted by pmbuko to Computers & Internet (4 answers total)

Posting the code is really necessary if you'd like us to have a stab at figuring out what you're doing wrong...
posted by jpburns at 5:17 AM on August 3, 2005

Response by poster: Thanks for looking. Here's the code:

function loadXMLDoc(keywords) {
    // replace spaces with + sign
    keywords.replace(" ","+");
    url = "http://------.----.org/peoplefinder/?cmd=keyword-search&keyword="+keywords;
    req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);
    req.onreadystatechange = buildTbody();
    content = req.responseText;
}

function buildTbody() {
	// initialize vars used throughout function
	var tbody, tr, td, txt;
	// prepare existing tbody element
	tbody = document.getElementById("myTbody");
	clearTBody(tbody);
	// temporary container while accumulating rows
	var docFrag = document.createDocumentFragment();
	// wait for results to finish coming in from server
    if (req.readyState == 4) {
    	if (req.status == 200) {
            // isolate contents of eighth table,
            // which contains the search results
            var resultTable = content.getElementsByTagName("table")[3];
            // put table rows into resultRows
            var resultRows = resultTable.getElementsByTagName("TR");
    		// loop through resultRows array
            // (skipping first/header row)
            // and assemble rows for new tbody
            for (var i = 1; i < resultrows.length; i++) {br>
                // put the cells from the current row into the resultCells array
                var resultCells = resultRows[i].getElementsByTagName("TD").innerHTML;
                tr = document.createElement("tr");
                // loop through resultCells array to assemble
                // cells for new row
                for (var j = 0; j < 5; j++) {br>
                    td = document.createElement("td");
                    txt = document.createTextNode(resultCells[j]);
                    td.appendChild(txt);
                    tr.appendChild(td);
                }
                docfrag.appendChild(tr);
            }
        } else {
            tr = document.createElement("tr");
            tr.style.backgroundColor = "rgb(100%, 10%, 0%)";
            tr.style.color = "#ffffcc";
            td = document.createElement("td");
            td.style.textAlign = "center";
            td.colSpan = "4";
            txt = document.createTextNode("Error retrieving data");
            td.appendChild(txt);
            tr.appendChild(td);
            docFrag.appendChild(tr);
        }
	   tbody.appendChild(docFrag);
    }
}

function clearTBody(tbody) {
	while (tbody.childNodes.length > 0) {
		tbody.removeChild(tbody.childNodes[0]);
	}
}

posted by pmbuko at 9:39 AM on August 3, 2005

Response by poster: sorry about the double-spacing. It didn't look like that in live preview.
posted by pmbuko at 9:39 AM on August 3, 2005

Response by poster: don't know if anyone cares, but I found out what the problem was. You can use getElementsByTagName when the requested page is not strict XHTML. I had to use IndexOf and regexp matches.
posted by pmbuko at 11:36 PM on August 7, 2005