Незаметные динамические поля формы в направляющих с jQuery

Основываясь на вашем ответе на мой комментарий, я думаю, что ненавязчивая обработка удаления - хорошее место для начала. Я буду использовать Продукт с каркасами в качестве примера, но код будет общим, поэтому его будет легко использовать в вашем приложении.

Сначала добавьте новую опцию в свой маршрут:

map.resources :products, :member => { :delete => :get }

А теперь добавьте представление удаления в ваши просмотры продуктов:

<% title "Delete Product" %>

<% form_for @product, :html => { :method => :delete } do |f| %>
  <h2>Are you sure you want to delete this Product?</h2>
  <p>
    <%= submit_tag "Delete" %>
    or <%= link_to "cancel", products_path %>
  </p>
<% end %>

Это представление будет видно только пользователям с отключенным JavaScript.

В контроллере продуктов вам нужно добавить действие удаления.

def delete
  Product.find(params[:id])
end

Теперь перейдите в представление индекса и измените ссылку «Удалить» на это:

<td><%= link_to "Delete", delete_product_path(product), :class => 'delete' %></td>

Если вы запустите приложение на этом этапе и просмотрите список продуктов, вы сможете удалить продукт, но мы можем сделать лучше для пользователей с поддержкой JavaScript. Класс, добавленный к ссылке удаления, будет использоваться в нашем JavaScript.

Это будет довольно большой кусок JavaScript, но он ' Важно сосредоточиться на коде, который имеет дело с вызовом ajax - коде в обработчике ajaxSend и обработчике кликов a.delete.

(function() {
  var originalRemoveMethod = jQuery.fn.remove;
  jQuery.fn.remove = function() {
    if(this.hasClass("infomenu") || this.hasClass("pop")) {
      $(".selected").removeClass("selected");
    }
    originalRemoveMethod.apply(this, arguments);
  }
})();

function isPost(requestType) {
  return requestType.toLowerCase() == 'post';
}

$(document).ajaxSend(function(event, xhr, settings) {
  if (isPost(settings.type)) {
    settings.data = (settings.data ? settings.data + "&" : "") + "authenticity_token=" + encodeURIComponent( AUTH_TOKEN );
  }
  xhr.setRequestHeader("Accept", "text/javascript, application/javascript");     
});

function closePop(fn) {
  var arglength = arguments.length;
  if($(".pop").length == 0) { return false; }
  $(".pop").slideFadeToggle(function() { 
    if(arglength) { fn.call(); }
    $(this).remove();
  });    
  return true;
}

$('a.delete').live('click', function(event) {
  if(event.button != 0) { return true; }

  var link = $(this);
  link.addClass("selected").parent().append("<div class='pop delpop'><p>Are you sure?</p><p><input type='button' value='Yes' /> or <a href='#' class='close'>Cancel</a></div>");
  $(".delpop").slideFadeToggle();

  $(".delpop input").click(function() {
    $(".pop").slideFadeToggle(function() { 
    $.post(link.attr('href').substring(0, link.attr('href').indexOf('/delete')), { _method: "delete" },
      function(response) { 
        link.parents("tr").fadeOut(function() { 
          $(this).remove();
        });
      });
      $(this).remove();
    });    
  });

  return false;
});

$(".close").live('click', function() {
  return !closePop();
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, "fast", easing, callback);
};

Вот CSS, который вам тоже понадобится:

.pop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display: none;
  position:absolute;
  text-align:left;
  z-index:500;
  padding: 25px 25px 20px;
  margin: 0;
  -webkit-border-radius: 8px; 
  -moz-border-radius: 8px; 
}

a.selected {
  background-color:#1F75CC;
  color:white;
  z-index:100;
}

Нам нужно отправлять токен аутентификации, когда мы выполняем POST, PUT или DELETE. Добавьте эту строку под существующим тегом JS (возможно, в вашем макете):

<%= javascript_tag "var AUTH_TOKEN = #{form_authenticity_token.inspect};" if protect_against_forgery? -%>

Почти готово. Откройте свой контроллер приложений и добавьте эти фильтры:

before_filter :correct_safari_and_ie_accept_headers
after_filter :set_xhr_flash

И соответствующие методы:

protected
  def set_xhr_flash
    flash.discard if request.xhr?
  end

  def correct_safari_and_ie_accept_headers
    ajax_request_types = ['text/javascript', 'application/json', 'text/xml']
    request.accepts.sort!{ |x, y| ajax_request_types.include?(y.to_s) ? 1 : -1 } if request.xhr?
  end

Нам нужно отбросить флэш-сообщения, если это вызов ajax - иначе вы увидите флэш-сообщения из «прошлого» на следующем обычном http запрос. Второй фильтр также необходим для браузеров webkit и IE - я добавляю эти 2 фильтра ко всем своим проектам Rails.

Все, что осталось, это действие destroy:

def destroy
  @product.destroy
  flash[:notice] = "Successfully destroyed product."

  respond_to do |format|
    format.html { redirect_to redirect_to products_url }
    format.js  { render :nothing => true }
  end
end

И вот оно. Ненавязчивое удаление с помощью Rails. Кажется, что много работы напечатано, но на самом деле это не так уж и плохо, если вы начнете. Возможно, вас тоже заинтересует этот Railscast .

Кстати. rails немного изменился, поэтому вы больше не можете использовать _delete, теперь используйте _destroy.

def remove_child_link(name, f)
  f.hidden_field(:_destroy) + link_to(name, "javascript:void(0)", :class => "remove_child")
end

Также мне было проще просто удалить html, который предназначен для новых записей ... так что я делаю это

$(function() {
  $('form a.add_child').click(function() {
    var association = $(this).attr('data-association');
    var template = $('#' + association + '_fields_template').html();
    var regexp = new RegExp('new_' + association, 'g');
    var new_id = new Date().getTime();

    $(this).parent().before(template.replace(regexp, new_id));
    return false;
  });

  $('form a.remove_child').live('click', function() {
    var hidden_field = $(this).prev('input[type=hidden]')[0];
    if(hidden_field) {
      hidden_field.value = '1';
    }
    $(this).parents('.new_fields').remove();
    $(this).parents('.fields').hide();
    return false;
  });
});