Like Facebook! Problem getting :contains value from textarea on keypress(e)? "DEMO"

Question

I'm trying to fire an event on spacebar press if an url is found in the last word typed and kill that event if there is a result so if the user keeps typing... the function doesn't keep on sending requests to the server. I'm tired and hope this makes sense... Basically I'm trying to accomplish what facebook has when you submit a post and enter an url beginning with http://. I've got it working 100% perfect... you can type and type and when an url is entered beginning with http:// it pings the server, grabs meta data, images from page, etc. But when the user keeps typing, the function seems to go for a loop and freezes because it's still trying to find an url?

Heres the code anyhow below:

$(document).keypress(function(e){
$('#example').keyup(function() { 
if(e.which == 32) {
var body = $('#example').attr('value');
var body = encodeURIComponent(body);
$.ajax({
type: "GET",
url: "get_url.php",
data: "entry="+body,
cache: false,
success: function(html) {
$("#new_url").html(html);
}
});
return false;
}
});
});

I know it's messy... still learning jQuery!

Thanks for all the help! I would like to scan the textarea input as the user types for an url starting with http://, www, or http:// w w w. using jquery, when found trigger the ajax request and stop the function from looking any further for urls... but am currently using regex in php to find url, fetch data, and return it...

Answer 1

I probably wouldn't use the keypress event for something like this. Here's what I'm thinking instead:

1. Use the focus() event on the textbox to trigger a setInterval(...) callback
2. In the called function, use a regex to scan the contents of the textbox for a URL
3. If you find a valid URL, call clearInterval() to stop the scanning, while you do an AJAX request to get info about the URL
4. When the AJAX request returns, update the contents of the textbox, and restore the callback so it keeps scanning
5. In the blur() event of the textbox, set a flag that kills the callback permanently (i.e. it won't get restored, when the current AJAX request returns) -- there's no need scanning if the user isn't typing anything

I'll try and post some code soon, but hopefully, this'll help you get some sleep. Perhaps, you should get some sleep first, and then come back to this?

Answer 2

Try this:

$(document).ready(function() {    
    $('#example').keyup(function(e) {                   
        if(e.which == 32) {                     
            var body = $('#example').attr('value');                     
            body = encodeURIComponent(body);                        
            $.ajax({
                type: "GET",
                url: "get_url.php",
                data: "entry="+body,
                cache: false,
                success: function(html) {
                    $("#new_url").html(html);
                }
            });
            return false;
        }
    });
});         

It doesn't trigger on EVERY key pressed on the entire body. Furthermore I declare the body var only once.

Tested it locally, doesn't lock up anymore, but don't get any usefull response as get_url.php doesn't seem to return anything.