Hi,

I did search the forums first, but couldn;t find the answer, so hope I;m not repeating a dumb question (new to JS ... )


I have a form with a text field and a submit button, the idea is you type in a search word then press the submit button. The page then gets updated from a load of XML search results.

I've got it kind of working, amazingly I had no problems with the XML. Its the onSubmit which seems to be confusing me. I want the area where the search result appear to say 'loading' the Ajaxy bit is off getting the results. For some reason this doens;t seemt to render, I;m guessing that the page isn't updated until all the JS has finished? Is thre a way to overcome this?

My other problem is that IE insists of submitting the form despite the 'return false;' statement.

Any help would be appreciated!

See below for the code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Ajax 2</title>
  <script type="text/javascript" charset="utf-8">
      <!--
    
    /**
     * XMLHttpRequest state change handler
     */
    handleSearch = function () {
        // check state of request, 4 = DONE
        if (request.readyState == 4) {
            // check response code
            if (request.status != 200) {
                // request failed
                request.element.innerHTML = 'Update Failed, server returned error ' + request.status;
            }
            else {
                // request succesful
                var xmlDoc = request.responseXML.documentElement
                var resultSet = '';
                var results = xmlDoc.getElementsByTagName('Result');
                
                for (var i = 0 ; i < results.length ; i++) {
                    // get one item after another
                    var item = results[i];
                    // Name
                    var title = item.getElementsByTagName("Title")[0].firstChild.nodeValue;
                    // Summary
                    var summary = item.getElementsByTagName("Summary")[0].firstChild.nodeValue;
                    // URI
                    var uri = item.getElementsByTagName("Url")[0].firstChild.nodeValue;
                    // Friendly URI
                    var furi = item.getElementsByTagName("DisplayUrl")[0].firstChild.nodeValue;                    
                    
                    resultSet += '<div id="result' + i + '" class="row' + (i%2+1) + ' row">';
                    resultSet += '<strong><a href="' + uri + '" target="_blank">' + title + '</a></strong>';
                    resultSet += '<br />' + summary;
                    resultSet += '<br /><em><a href="' + uri + '" target="_blank">' + furi + '</a></em></div>';
                }
                
                request.element.innerHTML = resultSet;    
            }
        }
    }
    
    /**
     * Ajax update
     * 
     * @param {String} ID of the element to update
     * @param {String} uri to get update data from
     */
    function doUpdate(elementId, uri, handler) {
        // get element to update
        var el = document.getElementById(elementId)
        if (!el) {
            // failed to find the specified element
            alert('Unknown Element, unable to update ' + elementId);
            return false;
        }
        
        // indicate area is loading.
        el.innerHTML = 'Loading ...';
        
        try {
            // create new XMLHttpRequest object and execute request
            request = new XMLHttpRequest();
            request.element = el;
            request.onreadystatechange = handler;
            request.open('GET', uri);
            request.send();
        }
        catch (ex) {
            // an error occurred, display error message
            request.element.innerHTML = 'Failed to load content.<br />Error: ' + ex.toString();
            return false;
        }
        
        // we got this far, so the function must have been successful!
        return true;
    }
    
    function doSearch(updateId, queryId) {
        // get quesy element
        var el = document.getElementById(queryId)
        if (!el) {
            // failed to find the specified element
            alert('Unknown query element, unable to locate ' + queryId);
            return false;
        }

        // check query value
        if (el.value.length < 3) {
            alert('Your search must be more than three characters');
        }
        else {
            doUpdate(updateId, 'data.php?query=' + el.value, handleSearch);
        }
    }
    
    -->
  </script>
  
  <style type="text/css">
      .row {
          padding: 5px;
        margin: 10px;
        border-top: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        font-family: Tahoma, Arial, Helvetica, sans-serif;
    }
    
      .row1 {
          background-color: #EEEEEE;
      }
    
    .row2 {
          background-color: #F9F9F9;
      }
    
    .row strong {display: block;}
    
    .row em a {text-decoration: none;}
  </style>
</head>

<body>
    <h1>Ajax 2</h1>
    <form id="searchForm" onsubmit="javascript: doSearch('searchResults', 'query'); return false;">
        <input type="text" id="query" />
        <input type="submit" value="Search" id="ajaxUpdateButton"/>
    </form>
    <div id="searchResults">Search results appear here.</div>
</body>
</html>