DRY jQuery for RESTful PUT/DELETE links

Question

I'm putting together PUT/DELETE links, a la Rails, which when clicked create a POST form with an hidden input labelled _method that sends the intended request type. I want to make it DRYer, but my jQuery knowledge isn't up to it.

HTML:

<a href="/articles/1" class="delete">Destroy Article 1</a>
<a href="/articles/1/publish" class="put">Publish Article 1</a>

jQuery:

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

});

Answer 1

Okay, so I finally tested this. It does what it claims on the box.

$(document).ready(function() {

  $.fn.getClassInList = function(list){
       for(var i = 0; i < list.length; i++)
       {
          if($(this).hasClass(list[i]))
             return list[i];
       }
       return "";
  }

  $('.delete,.put').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="' 
            + $(this).getClassInList(['put', 'delete']).toUpperCase() 
            + '" />'));
      $(f).submit();
    }
    return false;
  });

});

Answer 2

Forget about your hidden field and just change the method to put or delete. I would select the form instead of creating it then just change the attributes

$("form").attr("method", "put").submit()

Answer 3

You can just use forms instead of links and let the jQuery form plugin handle the submission if you want to use ajax:

<form class="delete" method="post" action="/articles/1">
    <input type="hidden" name="_method" value="delete"/>
    <button type="submit">Delete</button>
</form>

jQuery:

$(document).ready(function() {
    $('form.delete').ajaxForm(options);
});

The options variable can contain pre and post-submit callbacks.

Style your buttons like links if that's what you need.

Answer 4

I just tested the following and it worked for me:

$(function() {
  $('.post, .POST').click(function() {
    $('<form method="POST" style="display:none"><input type="hidden" name="_method" value="POST" /></form>')
      .insertAfter($(this))
      .attr({
        action: $(this).attr('href')
      }).submit();
    return false;
  });
  $('.put, .PUT').click(function() {
    $('<form method="POST" style="display:none"><input type="hidden" name="_method" value="PUT" /></form>')
      .insertAfter($(this))
      .attr({
        action: $(this).attr('href')
      }).submit();
    return false;
  });
  $('.delete, .DELETE').click(function() {
    if(confirm('Are you sure?')) {
      $('<form method="POST" style="display:none"><input type="hidden" name="_method" value="DELETE" /></form>')
        .insertAfter($(this))
        .attr({
          action: $(this).attr('href')
        }).submit();
    }
    return false;
  });
});

What kind of problems where you having?