DRY jQuery для RESTful PUT/DELETE ссылки

Question

Я собираю ссылки PUT/DELETE, a la Rails, которые при нажатии создают форму POST со скрытым вводом, обозначенным _method, который отправляет предполагаемый тип запроса. Я хочу сделать его DRYer, но мои знания jQuery не соответствуют этому.

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

Хорошо, так что я наконец-то испытал это. Он делает то, что он утверждает на коробке.

$(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

Забудьте о своем скрытом поле и просто измените способ установки или удаления. Я хотел бы выбрать форму, вместо того, чтобы создавать его, то просто изменить атрибуты

$ («форма»). Атр («метод», «положить»). Представить()

Answer 3

Вы можете просто использовать формы вместо ссылки и пусть jQuery form plugin обрабатывать представление, если вы хотите использовать 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); 
}); 

переменная опции может содержать до и после отправки обратных вызовов.

Стиль ваших кнопок, как ссылки, если это то, что вам нужно.

Answer 4

Я просто проверял следующее, и она работала для меня:

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

Какие проблемы, где вы иметь?