Capture all links including form submission
I am wondering how to grab all links on a page using jQuery. The idea is similar to Facebook. On Facebook, if you click on a link, it grabs the link and loads the same link using ajax. Only when opening a link in a new tab, etc. It will load the page with a normal call.
Is there any hint on how to achieve this functionality? I'm sure capturing links shouldn't be an issue, but what about submitting a capture form and then passing all the data through ajax and then displaying the results?
Is there any plugin that already exists?
Thank you for your time.
a source to share
Alec
Can you do it.
I have a form that is processed this way. It uses the jquery form kgiannakakis plugin mentioned above. The javascript example below shows how this 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();
});
}
});
a source to share
A form plugin can convert a regular form to Ajax:
$("#myForm").ajaxForm(
{beforeSubmit: validate, success: showResponse} );
It would be hard to do what you want, but for freeform. What if the form uses validation or is Ajax submitted to begin with? The same goes for links. What if there are multiple javascript navigation scripts (window.location = Url)? If you don't have complete control over the page, it will be difficult for you to do what you want.
a source to share
Typically, pages like facebook execute each event and each form separately, as server side files are usually set for each individual operation / group of operations. I doubt there will be a clean way to convert the page using just the plugin. And if so, I see a lot of overhead.
You can do it manually, but again this is an abuse of Ajax. It is not flash memory and you run into a lot of problems using ajax for all server communications.
- Lack of history tracking.
- Monitoring parallel events and their results.
- Communication with the user that the page is changing.
- Users with javascript disabled.
- And much more.
a source to share