RESTful jQuery PUT/DELETE links - RefactorMyCode.com

I'm putting together PUT/DELETE links, a la Rails, that when clicked create a POST form with an hidden input labelled _method that sends the preferred request type. I want to make it DRYer, but my jQuery knowledge isn't up to it. Ideally, I'd like to retain the confirm() if statement for DELETE links, too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Example removal link</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/application.js"></script>
  </head>
  <body>
    
    <a href="/articles/1" class="delete">Destroy Article 1</a>
    <a href="/articles/1/publish" class="put">Publish Article 1</a>
    
  </body>
</html>

$(document).ready(function() {

  $('.delete').click(function() {
    if(confirm('Are you sure?')) {
      var f = document.createElement('form');
      $(this).after($(f).attr({
        method: 'post',
        action: $(this).attr('href')
      }).append('<input type="hidden" name="_method" value="DELETE" />'));
      $(f).submit();
    }
    return false;
  });
  
  $('.put').click(function() {
    var f = document.createElement('form');
    $(this).after($(f).attr({
      method: 'post',
      action: $(this).attr('href')
    }).append('<input type="hidden" name="_method" value="PUT" />'));
    $(f).submit();
    return false;
  });

});

Refactorings

No refactoring yet !

Simo NiemelÃ¤

May 27, 2009, May 27, 2009 17:38, permalink

1 rating. Login to rate!

jQuery.fn.restForm = function(type, options) {
  var defaults = {
    method: 'post',
    action: this.attr('href'),
    confirm: false,
    confirm_message: 'Are you sure?',
    trigger_on: 'click'
  };
  var opts = $.extend(defaults, options);

  this.bind(opts.trigger_on, function() {
    var $form = $('<form></form>').attr({
      method: opts.method,
      action: opts.action
    }).append('<input type="hidden" name="_method" value="' + type + '" />');

    if (opts.confirm && !confirm(opts.confirm_message)) {
      return false;
    }

    this.after($form);
    $form.submit();
    return false;
  });
};

$(function() {
  $('.put').restForm('PUT');
  $('.delete').restForm('DELETE', {confirm: true});
});

Tero

October 25, 2009, October 25, 2009 19:49, permalink

No rating. Login to rate!

I had to make few minor changes on Simo's code to get it working.

jQuery.fn.restForm = function(type, options) {
  var defaults = {
    method: 'post',
    action: this.attr('href'),
    confirm: false,
    confirm_message: 'Are you sure?',
    trigger_on: 'click'
  };
  var opts = $.extend(defaults, options);

  this.bind(opts.trigger_on, function() {
    var form = $('<form></form>').attr({
      method: opts.method,
      action: opts.action
    }).append('<input type="hidden" name="_method" value="' + type + '" />');

    if (opts.confirm && !confirm(opts.confirm_message)) {
      return false;
    }

    $(this).after(form);
    form.submit();
    return false;
  });
};

$(function() {
  $('.put').restForm('PUT');
  $('.delete').restForm('DELETE', {confirm: true});
});

James Brennan

November 5, 2009, November 05, 2009 19:14, permalink

No rating. Login to rate!

If you are working with rails you'll want to pass an auth_token in the request. I've added the ability to do that. I've also wrapped the main function in an .each block, which is the recommended jQuery plugin style.

jQuery.fn.restForm = function(type, options)
{
    var defaults = {
        method: 'post',
        action: 'href',
        confirm: false,
        confirm_message: 'Are you sure?',
        trigger_on: 'click',
        auth_token: false
    };
    var opts = $.extend(defaults, options);

    this.each(function(index, el)
    {
        $(el).bind(opts.trigger_on, function()
        {

            var form = $('<form></form>').attr({
                method: opts.method,
                action: options.action ? opts.action : $(el).attr("href")
            }).append('<input type="hidden" name="_method" value="' + type + '" />');

            if (opts.auth_token)
            {
                form.append('<input type="hidden" name="authenticity_token" value="' + opts.auth_token + '" />');
            }

            if (opts.confirm && !confirm(opts.confirm_message))
            {
                return false;
            }

            $(this).after(form);
            form.submit();
            return false;
        });
    });
};