Question

I have the following code build using jquery. When a user copies and pastes a a youtube url, i am suppose to extract the video id is the getVideoId(str) method in jquery. Using the id, i get the video image picture title and contents.

When the textbox->(“#url”) has a length more than 10, i will make a ajax request. Thus the ajax request is working. But now i have another problem. The very first time when the textbox has more than 10 characters, there is two ajax request being fired (tested using firebug). Than when the user enters more characters, there are many ajax request fired.

Thus this will slow down the process of the last ajax request. I just want to get the data of the youtube link and show a suggest where the user can add the title and content. It is like how the old facebook video video link is. Anyone has a better suggest in improving the codes?

jQuery(document).ready(
    function(){
        $("#url").keyup(function() {
            var $t1 =  $("#url").val();
            var $length = $t1.length;
            var $data;

            $("#title").val($length);
            $("#content").val($t1);

            if($length==0){
                alert('zero value');
                return;
            }

            if($length>10){
                $data = $.ajax({
                url: '<?php echo $this->Html->url(array("action" => "retrieveVideoFeed"));?>',
                dataType: "json",
                data: {
                    vid: getVideoId($t1)
                },
                success: function(data) {
                                            alert('success in getting data');
                }
            });

                return;
            }

        });

            function getVideoId(str) {
                var urlRegex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
                if (urlRegex.test(str) && str.indexOf('v=') != -1)
                {
                    return str.split('v=')[1].substr(0, 11); // get 11-char youtube video id
                } else if (str.length == 11) {
                    return str;
                }
                return null;
            }
    }
);

Answer 1

You could cache the calls and use blur event and not keyup: you are firing a lot of AJAX call because keyup() fires an event each time a key is pressed, you should use blur that fires an event when an input loses focus.
If you cache the calls in an object you can avoid a lot of repeated calls

   var cacheUrl = {};

   $("#url").blur(function() {
        var $t1 =  $("#url").val();
        var $length = $t1.length;
        var $data;

        $("#title").val($length);
        $("#content").val($t1);

        if($length==0){
            alert('zero value');
            return;
        }

        if(cacheUrls[$t1] !== undefined && $length>10){
            $data = $.ajax({
            url: '<?php echo $this->Html->url(array("action" => "retrieveVideoFeed"));?>',
            dataType: "json",
            data: {
                vid: getVideoId($t1)
            },
            success: function(data) {
                    //save the data to avoid a future call
                    cacheUrls[$t1] = data;
                                        alert('success in getting data');
            }
        });

            return;
        }elseif ($length>10){
            //you already have the data in  cacheUrls[$t1] 
        }

    });

EDIT if you want to use the submit key to start the search you could trigger the blur event when you press enter like this:

$("#url").keypress(function(e){
    if(e.which == 13){
       $(this).blur();
       return false;
    }
});