Firefox不应该执行JavaScript

Question

I've coded a very basic page with a search text input with ajax auto completion. I've set the input onchange attribute to call an ajax function that will retrieve a set a values from the server, and add options to the associated datalist. When i change something in the text input, the JavaScript just doesn't execute. However, when i minimize the window or click on a new tab, i does execute it, so it's neither a problem of syntax nor file inclusion i suppose. I also tried to clear my cache by it had no effect (and my firefox is totally cleared every time i close it anyway). What could this be due to ? I'll paste my source code :

My AJAX class. It does work, i tested it at work, and it works fine. Don't need to read it, i just paste it in case you want to have a look.

/**
* @file ajax.js
* @version 1.0 - 2012-07-30
* @author *****
* @brief This file describes a class allowing to easily perform AJAX requests.
*/

/**
* @class Ajax
* @brief Used to performs AJAX requests.
* @details Usage example :
*
* var request1 = new Ajax()
*     .url('some_url')
*     .parameters('some_parameters')
*     .callback(function(xhr) { alert(xhr.responseText); })
*     .method('GET')
*     .execute();
*
* var request2 = new Ajax();
* request2.url('some_url');
* request2.parameters('some_parameters');
* request2.callback(function(xhr) { alert(xhr.responseXml); });
* request2.execute();
*
* Using setters is not necessary, properties can be set manually. Setters only allow to chain calls by returning this.
* The order in which properties are set does not matter as long as the mandatory ones are set before calling 'execute'.
* If the server returns a string it can be retrieved from xhr.responseText. If it returns an XML file, it will be in
* xhr.responseXml.
*/
function Ajax()
{
    /**
    * @brief (string) URL of the request (MANDATORY).
    * @details It main contain parameters, but if so, the property 'parameters' should be used instead.
    */
    var url;

    /**
    * @brief (string) Method to use for the request.
    * @details Can be either 'GET' or 'POST'.
    */
    var method = 'POST';

    /**
    * @brief Function to be called once the request has been performed.
    * @details This callback function will be given the XMLHttpRequest object as a parameter.
    */
    var callback;

    /**
    * @brief Parameters of the URL.
    * @details Must be in the following format : 'arg1=value1&arg2=value2'... and contain no question mark.
    */
    var parameters;

    /**
    * @brief Indicates if the request is syncrhonous.
    */
    var wait = false;

    /**
    * @brief Sets the 'url' property.
    * @details Returns the object to chain setter calls.
    * @param String.
    * @return Ajax.
    */
    this.url = function($url) { url = $url; return this; };

    /**
    * @brief Sets the 'method' property.
    * @details Returns the object to chain setter calls.
    * @param String.
    * @return Ajax.
    */
    this.method = function($method) { method = $method; return this; };

    /**
    * @brief Sets the 'callback' property.
    * @details Returns the object to chain setter calls.
    * @param Function.
    * @return Ajax.
    */
    this.callback = function($callback) { callback = $callback; return this; };

    /**
    * @brief Sets the 'parameters' property.
    * @details Returns the object to chain setter calls. WARNING : Using parameters will change the method to POST. If
    * parameters must be passed using GET, they must be included in the URL.
    * @param String.
    * @return Ajax.
    */
    this.parameters = function($parameters) { parameters = $parameters; method = 'POST'; return this; };

    this.wait = function($wait) { wait = $wait; return this; };

    // FIXME POST semble poser probleme lorsque l'on renvoie du json et que l'on l'éval.

    /**
    * @brief Performs the AJAX request.
    * @details The mandatory properties must be set before calling this method.
    */
    this.execute = function()
    {
        var xhr = null;

        try { xhr = new XMLHttpRequest();  }
        catch(e) { 
            try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } 
            catch(e2) { 
                try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } 
                catch(e) {}
            }
        }

        var self = this;

        xhr.onreadystatechange = function() {
            if(4 === xhr.readyState && 200 === xhr.status) {
                if(callback) return callback(xhr);
            }
        };

        xhr.open(method, url, !wait);

        if('POST' === method) xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send(parameters ? parameters : null);

        return this;
    };

    return this;
}

My AJAX auto completion function :

function ajaxAutoComplete(inputId)
{
    var input = document.getElementById(inputId);
    if(null === input) alert('ajaxAutoComplete : invalid input ID.');

    if(!input.list) alert('ajaxAutoComplete : input has no associated data list');

    var list = document.getElementById(input.list.id);
    if(null === list) alert('ajaxAutoComplete : input has an invalid list ID.');

    var suggestions;

    new Ajax()
        .url('../Controller/index.php?exec=ajaxAutoComplete')
        .parameters('searchInput=' + input.value)
        .callback(function(xhr)
        {
            suggestions = eval('(' + xhr.responseText + ')');

            while(list.hasChildNode) list.removeChild(list.firstChild);

            for(var i = 0; i < suggestions.length; ++i)
            {
                var option = document.createElement('option');
                option.value = suggestions[i];
                list.appendChild(option);
            }
        })
        .wait(false)
        .execute();

} // ajaxAutoComplete()

And the HTML code :

<!DOCTYPE html>
<html>
    <head>
        <title>Image Module</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="../Js/main_dev.js"></script>
    </head>
    <body>
        <header>
            <h1>Image module</h1>
        </header>
        <nav>
            <form action="#" method="#">
                <fieldset>
                    <label for="searchInput">Search</label>
                    <input id="searchInput" list="searchSuggestions" name="searchInput" type="text" value="search" maxlength="255" onchange="ajaxAutoComplete(this.id)">
                    <datalist id="searchSuggestions">
                    </datalist>
                    <input type="submit" value="Search">
                </fieldset>
            </form>
        </nav>
        <div class="Content">
        </div>
        <footer>
            <span></span>
        </footer>
    </body>
</html>

The server returns a JSON encoded array of randomly generated numbers such as : [1611, 1515187, 415417, 7815, 587187]

I'm using Firefox 14.

Any ideas ? Thanks for reading ! :)

Answer 1

The change event doesn't get fired until the input loses focus. You might want to listen for keyup or keydown instead.

Answer 2

The change event only fires when the input loses focus.

The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

Bind to a different event.

Also consider using existing code/ widgets / libraries /etc. – I don't really see what all this wheel-reinventing is supposed to gain you aside from lost time.

Answer 3

I'd suggest not making an AJAX call for each character pressed. Delay the request for a few moments to see if the user is still typing. Otherwise you might end up with a previous letter's json being parsed as though it is the current. To do this just make a simple queue:

<input id="searchInput" list="searchSuggestions" name="searchInput" type="text" value="search" maxlength="255" onkeydown="queueRequest(this.id)">

Your Javascript would then look like

function queueRequest(id) {
    if (queuedRequest) clearTimeout(queuedRequest);
    window.queuedRequest = setTimeout(function(id) {
        ajaxAutoComplete(id);
    },100,id);
}

A few notes, this will not work with IE8 or lower due to lack of support for the 3rd argument of setTimeout