Question

Here am sending contents of the textbox with class searcher using keyup event by ajax. I wanted not to send ajax request if the textbox with class searcher is empty and clear the content of a div with id sub_cont. but i couldn’t do it.

anyone help with pointing out where am wrong

thanks

$(".searcher").keyup(function(){

        if($('.searcher').val == "")
        {
        $('#sub_cont').fadeOut(1500);
        }
        else{

        //show the loading bar
        showLoader();
        $('#sub_cont').fadeIn(1500);
        $("#content #sub_cont").load("main/search.php?val=" + $("#search").val(), hideLoader());
    }

    });

Answer 1

// cache commonly used selectors (but not in a global scope, please).
var sub_cont = $("#sub_cont");
$(".searcher").keyup(function(){
    // check if the value of the input is empty or whitespace
    // you don't need to check the length of the string or even 
    // bother checking if it is `== ""` as an empty string already
    // evaluates to false.
    if(!$.trim(this.value)){
        // stop any existing animations before fading out
        // so we don't have ourselves a long queue of animations.
        sub_cont.stop().fadeOut(1500);
    }
    else{
        showLoader();
        // **Note: While `$.fn.load` is certainly the easiest way to do it,
        // other methods, such as $.fn.get are much more robust.**
        // (see my comments in the body of the answer for why)
        // Use the `data` parameter to make sure your values are encoded and
        // concatenated properly. This also allows for much more maintainable 
        // code
        sub_cont.load("main/search.php", {"val": this.value}, function(){
             hideLoader();
             sub_cont.stop().fadeIn(1500);
        });
    }
});

You should use $.get instead of $.fn.load here for several reasons:

1. This “autocomplete” function will be called every time a key is pressed. Using $.get you can cache the jXHR object and abort() the previous ajax request before sending a new one.
2. Errors happen. load gives you no escape hatch if there is an error whereas get does.
3. By implementing these suggestions yourself by reading the jQuery docs on $.get you’ll learn a lot more about jQuery and javascript. :-p