Question

I am wondering how to capture all links on a page using jQuery. The idea being similar to Facebook. In Facebook, if you click on a link it captures the link and loads the same link using ajax. Only when you open a link in new tab etc. will it load the page using regular call.

Any clue on how to achieve such kind of functionality? Am sure capturing links should not be a problem, but what about capture form submissions and then submitting the entire data via ajax and then displaying the results?

Is there any plugin which already exists?

Thank you for your time.

Answer 1

Alec,

You can definitely do this.

I have a form that is handled in just this way. It uses the jquery form plugin kgiannakakis mentioned above. Example javascript below shows how it might work.

$("form").ajaxForm({
    beforeSubmit: function(){
        //optional: startup a throbber to indicate form is being processed 
        var _valid = true;
        var _msg = '';
        //optional: validation code goes here. Example below checks all input
        //elements with rel attribute set to required to make sure they are not empty
        $(":input [rel='required']").each(function(i){
            if (this.value == '') { 
                _valid = false;
                _msg += this.name + " may not be empty.\n";
                $(this).addClass("error");       
            }
        });
        alert(_msg);
        return _valid; 
    },
    success: function(response){
        //success here means that the HTTP response code indicated success
        //process response: example assumes JSON response
        $("body").prepend('<div id="message" class="' + response.status + '"></div>');
        $("#message").text(response.message).fadeIn("slow", function(){
                $(this).fadeOut("slow").remove();
        });
    }
});