СУХОЙ jQuery для RESTful PUT / DELETE

Question

Я собираю ссылки PUT / DELETE, такие как Rails, которые при нажатии создают форму POST со скрытым вводом, помеченным _method, который отправляет намеченный тип запроса. Я хочу сделать его СУХИМ, но мои знания 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

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

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

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

Answer 3

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

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

Какие проблемы у вас возникают?

Answer 4

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

$ ("form"). Attr ("method", "put"). Submit ()