Richard Knop's Zend Framework Blog » jQuery http://blog.richardknop.com Zend Framework, PHP, MySQL, jQuery, JavaScript, AJAX, SEO, E-commerce and more Mon, 06 Sep 2010 15:49:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 JQuery autosave on click event http://blog.richardknop.com/2009/09/jquery-autosave-on-click-event/ http://blog.richardknop.com/2009/09/jquery-autosave-on-click-event/#comments Tue, 29 Sep 2009 19:54:28 +0000 Richard Knop http://blog.richardknop.com/?p=460 What does this simple jQuery snippet do? When you click on the link with class “autosave”, the form with id “autosave” is submitted via POST request to the same page. After that it redirects to the actual target of the link (href attribute).

  1. $(document).ready(function() {
  2.     $('a.autosave').click(function() {
  3.         // get relative address of the current window/tab
  4.         var url = window.location.pathname;
  5.         // collect the data from the form with id "autosave-form"
  6.         $postData = $('form#autosave').serialize();
  7.         // submit the form
  8.         $.post(url, $postData, function(data) {
  9.             // after the ajax request is successful, redirect to the link target
  10.             window.location.href = $('#autosave').attr('href');
  11.         });
  12.         // prevent default behavior
  13.         return false;
  14.     });
  15. });

This can be useful in numerous situations. For example, on the page where user can edit his/her profile, you want to have a link saying something like “view my profile”. But you don’t want less experienced users to click on the link and lose all changes they have made to their profile (which happens quite a lot).

]]> http://blog.richardknop.com/2009/09/jquery-autosave-on-click-event/feed/ 0