next »

[KaptainKrayola]

So, i hijacked some JS to make it so that when you were typing in a field and stopped for 1 second it would then send out an ajax request to do a search against the DB and it seemed to work beautifully.  However, it seems now that its only triggering the onkepress event about every third keystroke.

for example, if i type a word then backspace once it doesn't fire off and do the magic but if i hit backspace two more times it does.  Also, if i highlight the whole word/phrase i typed in and hit delete or backspace same thing.  Very odd.

Here is the JS i have doing the business so if anyone sees something I don't or has some clue as to why this may be happening that would be awesome

Code:

   function addTextAreaCallback(textArea, callback, delay) {
       var timer = null;
       
       textArea.onkeyup = function() {
           if (timer) {
               window.clearTimeout(timer);
               if(!waiting){
                $("#results").html("<img src='img/ajax-loader.gif' />");
                 waiting = 1;
              }

           }
           timer = window.setTimeout( function() {
               timer = null;
               callback();
               waiting = 0;
           }, delay );
       };
       textArea = null;
   }

[isthisthingon]

Looks like you're catching onkeyup, not onkeypress.  In any case, or if you tried onchange or onkeydown, this area get's quite hackey.  I'd try rerendering the section after each keystroke to keep it clean but the feel get's a little choppy when rerendering 

I've noticed with ajax that many events either don't happen because of timing issues or they're delayed and are trying to happen after other client/server rendering completes.  Is it also possible to flag this call to execute before or after the server method completes?  Not sure if this involves server round-trips but if you requerying the database I'll assume there's a server trip involved.

I've been pretty unsuccessful trying to do things like this in general (on keystrokes especially) so perhaps someone else would have a magic answer for ya 

For example, having a re-query button would "fix" everything...

[KaptainKrayola]

yeah on that chunk i did have onkeyup  - apparently i was trying that instead of onkeypress which is how i had it originally.

i have been screwing with it for a little bit now and it seems what is actually happening is that *sometimes* the line that sets the div to the loading image                 $("#results").html("<img src='img/ajax-loader.gif' />");

is whats not working right.  If i, for example, highlight and delete all the text in the text input then wait a second it does do what its supposed to as far as the ajax call is concerned it just doesn't load up the wait image whjile it's doing it.

it will also do it if i clear out the box and enter just an "a"  - no loading image but it does do the ajax  call.  very odd.  timing issue is what it seems to be.  boooooooo

[KaptainKrayola]

nevermind, i am a dipshit today.  i had to move the code that sets the wait image out of the if() for the timer.  works like a champ now.

[isthisthingon]

nevermind, i am a dipshit today.  i had to move the code that sets the wait image out of the if() for the timer.  works like a champ now.

   Thanksgiving binge blunder perhaps?     Glad it works like a champ now.

[jammaster82]

nevermind, i am a dipshit today.  i had to move the code that sets the wait image out of the if() for the timer.  works like a champ now.

??

can you please post the new code that works... this is awesome!!!

[KaptainKrayola]

Sure thing - here you go:

Code:

   function addTextAreaCallback(textArea, callback, delay) {
       var timer = null;
       
       textArea.onkeyup = function() {
           if (timer) {
               window.clearTimeout(timer);
           }
            if(waiting == 0){
                $("#results").html("<img src='img/ajax-loader.gif' />");
                 waiting = 1;
              }
           timer = window.setTimeout( function() {
               timer = null;
               callback();
               waiting = 0;
               timer = null;
           }, delay );
       };
       textArea = null;
   }

Keep in mind the line:

Code:

$("#results").html("<img src='img/ajax-loader.gif' />");

is using jQuery so if you aren't using jQuery that line wont work - will tell you something about "$ is not defined".  You'll want to use your preferred method for setting the innerHTML of the div with the IMG tag.

[isthisthingon]

 

Nice code.