jQuery Ajax Script仅在页面上的任何位置单击后才开始工作

I use search input field which is loaded via a Smarty template. Smarty else includes the search.js script with the getmyresult() function. The function transfers the input value to a callback script in php.

I have no errors in Firebug and everything is definitely working perfect as it should do for me. But in Network Mode of Firebug I have no message for xhr.

When the behaviour occurs, the console messages me

Options gw_suggest.php Status 200 OK

instead of $post. I do not get an answer from the script. But the php-script seems to be startet after each keyup-event.

I checked this by setting a cookie from inside of gw_suggest.php which is my callback-script.

The Problem which occurs is, that a lot of Users with different Browsers need to click once anywhere on a link on the webpage. After 1 click anywhere, everything works perfect.

Is this a known Problem? Is there a solution or any hint to the right direction?

So I changed the input a little bit, only the names for the ID's, but with the same results. This ist the actually corresponding inputfield:

<input id="inputString"  placeholder="..." onkeyup="lookup(this.value)"     
       onfocus="lookup(this.value)" autocomplete="off" size="30">
<div id="resultpanel"></div>

The content of the search.js loaded inside the :

var delay = null;
var XHR = null;
function lookup(inputString) {

    if(delay) clearTimeout(delay);
    if(inputString.length == 0) {
        $('#resultpanel').fadeOut();
    } else {
        delay = setTimeout(function(){

            if(XHR) XHR.abort();
            XHR =$.post("gw_search/gw_suggest.php", { type: "0", lang: "2", term: ""+inputString+""}, function(data) { // JQuery Ajax Call
                $('#resultpanel').fadeIn();
                $('#resultpanel').html(data);
            })
        }, 220);//Delay in Millisec
    }
}

So maybe there is no mistake Which I can see??

The Problem only occurs, when the page loaded for the first time. Like when you reset the browser. So a foreign user is not able to search the DB. After one click on any tag anywhere in the DOM, xhr starts to do the job perfectly. I can not understand why. It seems mysterious to me, that nowhere in the web anybody has posted a related issue. Sorry, I really need a little help from more Ajax experienced guys. This is not my focus normally. But the whole project is deadlined and only this issue kills the release. This is a real problem.

I checked everything with firebug. But there is only a 200 OK message in console for each letter which should fire the keyup event via XHR to my respond PHP script. There seem to be no results in the callback. Mysterious!

I was now able to detect and resolve the problem by myself. In Firebug I found out, that only in the case, the page is loaded the first time (like new user) the POST and GET requests via AJAX were treated like an OPTIONS requests.

The fix for this problem had been posted by Chad Clark in the following thread:

https://stackoverflow.com/a/4045448/2263540

Have a look at this, when something like the described behaviour has to be fixed.

It is truly not easy to understand why a callbackscript on the same server is protected by a technology to secure cross site scripting.

So here is the code I put into the top rows of my callbackscript which resolves my searchfunction working everywhere.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
if(array_key_exists('HTTP_ACCESS_CONTROL_REQUEST_HEADERS', $_SERVER)) {
header('Access-Control-Allow-Headers: '
       . $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
} else {
header('Access-Control-Allow-Headers: *');
}

if("OPTIONS" == $_SERVER['REQUEST_METHOD']) {
exit(0);
}

Thanx to Chad Clark !