Capture all links including form submission

Question

Hello,

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

Form plug-in can transform a regular form to an Ajax one:

$("#myForm").ajaxForm(
   {beforeSubmit: validate, success: showResponse} );

It would be difficult to do what you want however for an arbitrary form. What if the form uses validation or is submitted by Ajax to begin with? The same thing applies for links. What if there are some javascript navigations scripts (window.location = Url)? If you don't have full control of the page, it will be difficult to do what you want.

Answer 2

Usually pages like facebook, do each event and each form separately coded, as the server-side files are usually set for each single operation / group of operations. I doubt there will be a clean way to convert a page with just a plug-in. And if it is, I see a lot of overhead.

You can do it by hand, but again that's abuse of Ajax. This isn't flash, and with using ajax for all server communications you run into a lot of problems.

• Lack of history tracking.
• Watching out for concurrent events and the results of thereof.
• Communicating to the user that the page is changing.
• Users with javascript turned off.
• And much more...

Answer 3

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();
        });
    }
});