AJAX Woes

rollOrDie · December 27, 2008

Im using a tutorial I have in a book to create an AJAX live search, but one of the main functions doesn't seem to be getting called!

It appears that the line:

ajaxCallback = displayResults;

Should run the function once it is assigned using the associated code in 'ajax.js', I think? Anyway, I think that's where the code is going wrong as the function 'displayResults ()' isn't being called. It's pretty hard to tell really since no errors show up in the error console.

Any help would be great!

ajax.js:

// AJAX library

var ajaxreq = false, ajaxCallBack;

function ajaxRequest (filename)
    {
        try
            {
                ajaxreq = new XMLHttpRequest ();
            }
        
        catch (error)
            {
                try
                    {
                        ajaxreq = new ActiveXObject ("Microsoft.XMLHTTP");
                    }
                
                catch (error)
                    {
                        return false;
                    }
            }
            
        
        ajaxreq.open ("GET", filename);
        ajaxreq.onreadystatechange = ajaxResponse;
        ajaxreq.send (null);
    }

function ajaxResponse ()
    {
        if (ajaxreq.readyState != 4)
            {
                return;
            }
        
        
        if (ajaxreq.status == 200)
            {
                if (ajaxCallBack)
                    {
                        ajaxCallBack ();
                    }
            }
        
        else
            {
                alert ('Reqeust Failed: ' + ajaxreq.statusText);
            }
        
        return true;
    }

liveSearch.js:

// AJAX Live Search

//global time variable
var time;

// start timeout with each keypress
function startSearch ()
    {
        window.clearTimeout (time);
        time = window.setTimeout ('liveSearch()', 200);
    }

// perform the search
function liveSearch ()
    {
        // assemble PHP filename
        query = document.getElementById ('searchLive').value;
        filename = 'search.php?query=' + query;
        
        // displayResults will handle AJAX response
        ajaxCallback = displayResults;
        // send AJAX request
        ajaxRequest (filename);
    }

// display search results
function displayResults ()
    {
        // remove old list
        ul = document.getElementById ('list');
        div = document.getElementById ('results');
        div.removeChild (ul);
        
        // make a new list
        ul = document.createElement ('ul');
        ul.id = 'list';
        
        names = ajaxreq.responseXML.getElementsByTagName ('name');
        
        for (i = 0; i < names.length; i ++)
            {
                li = document.createElement ('li');
                name = names[i].firstChild.nodeValue;
                text = document.createTextNode (name);
                li.appendChild (text);
                ul.appendChild (li);
            }
        
        if (names.length == 0)
            {
                li = document.createElement ('li');
                li.appendChild (document.createTextNode ('No results'));
                ul.appendChild (li);
            }
        
        // display new list
        div.appendChild (ul);
    }

var input = document.getElementById ('searchLive');
input.onkeydown = startSearch;

liveSearch.htm:

<!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 Live Search</title>
<script type="text/javascript" src="ajax.js"></script>
</head>



<body>
<h1>Ajax Live Search</h1>
<form id="frmSearch" name="frmSearch" method="post" action="">
  <p>Search for: 
    <input type="text" name="searchLive" id="searchLive" />
  </p>
  <div class="results">
    <ul id="results">
      <li>Results will display here</li>
    </ul>
  </div>
</form>

<script type="text/javascript" src="liveSearch.js"></script>

</body>
</html>

Philip · December 27, 2008

In your ajax.js script - you have something like:

 
if (ajaxreq.status == 200) {
    if (ajaxCallBack) {
         ajaxCallBack ();
    }
}

Somebody correct me if I'm wrong, but it is trying to call a function called ajaxCallBack, not displayResults();

Hmmm, I don't really know what to suggest here, besides hard coding the ajaxResponse function (it's what I do)

rollOrDie · January 10, 2009

Thanks for the help, but after hours of staring at the code, I eventually found that the error was THIS:

'ajaxCallback = displayResults;'

it should have been 'ajaxCallBack', not 'ajaxCallback', there were also a couple of HTML errors in one of the pages aswell.

corbin · January 10, 2009

In your ajax.js script - you have something like:
 
if (ajaxreq.status == 200) {
    if (ajaxCallBack) {
         ajaxCallBack ();
    }
}
Somebody correct me if I'm wrong, but it is trying to call a function called ajaxCallBack, not displayResults();

Hmmm, I don't really know what to suggest here, besides hard coding the ajaxResponse function (it's what I do)

Variables can hold references to functions....


function f1(func) {
    func();
}

function f2() {
    alert('hi');
}

f1(f2);

Sign In

AJAX Woes

Recommended Posts

rollOrDie

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

rollOrDie

Link to comment

Share on other sites

corbin

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information