jQuery Ajax Script only starts working after a click anywhere on the page

Question

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!

is this input loaded dynamically after page load ? Is script also laoded dynamically? — SachinGutte, May 07 '13 at 18:48
@SachinG No, there is no reason to put the js inline. The code jscript is loaded after jquery.js, jquery_ui.js in the head section of my page. The inputfield is loading together with all the Smarty output. In other words, it is an element of the index.php html-output. I show you the code in my answer. — gwinger, May 09 '13 at 09:50
@EddieMongeJr I put some more information in to the question post, have a look at that, please. — gwinger, May 09 '13 at 09:53
I didn't get the part, how some one type without clicking on any dom element? — Chamika Sandamal, May 09 '13 at 11:36
I didn't say that. The Problem is, that you can type what you want into the inputfield. Nothing happens. But if you once click on a link anywhere on the page. Like in menu or on the home button etc, the page reloads and afterwards you can also type into the input field, but now you get results via Ajax request. The point is, that a normal reload of the page don't works. Only if you click on any hyperlink — gwinger, May 09 '13 at 11:56
@ChamikaSandamal Any idea? You can check the behaviour on my [link](http://guido-winger.de) [/link] The searchfield is top middle of the main content. There is a Placeholder inside the field: "searchfield please type any letters..." — gwinger, May 09 '13 at 12:05
@gwinger If you see html source generated, file `gw_search/javascript/search.js` is added inside body multiple times. One before `inputString` and one after `inputString`. There are also stylesheet and jquery and jqeury ui are added after `inputString`. I guess that's because you've misplaced code that adds these script inside code that generates `inputString`. This has happened to me when I was working on a wordpress site. The second occurrence of `jquery.js` after `inputString` is 404 error. Besides all of this, there's no problem with code anyhow. — SachinGutte, May 09 '13 at 15:42

score 0 · Answer 1 · edited May 23 '17 at 12:03

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 !

jQuery Ajax Script only starts working after a click anywhere on the page

1 Answers1