0

remote: true オプションが設定された削除ボタンがあります。

# _categories.html.erb
<%= link_to 'Destroy', category, method: :delete, data: { confirm: 'Are you sure?' }, remote: true %>

私の destroy メソッドは json を使用します:

# categories_controller.rb
  def destroy
    @category = Admin::Category.find(params[:id])
    @category.destroy
    save_to_history("The category \"#{@category.name}\" has been destroyed", current_user.id)

    respond_to do |format|
      # You can't retrieve the @categories before attempting to delete one. 
      @categories = Admin::Category.all

      format.json
    end
  end

私の destroy.json.erb ファイルは次のようになります。

#destroy.json.erb
<% self.formats = ["html"] %>
{
  "html":"<%= raw escape_javascript( render :partial => 'categories', :content_type => 'text/html') %>"
}

今私の問題は、ページの読み込み時にこの JavaScript を実行していて、最初のカテゴリの削除が意図したとおりに機能することです...データが変更されるまで。ユーザーが新しいカテゴリを追加するか、カテゴリを削除してデータを変更するたびに、次の JavaScript を再度実行する必要があります。どのように？親切に助けてください。私は JavaScript をまったく知りません! 笑

  <script type='text/javascript'>

    $(function(){
      /* delete category */
      $('a[data-remote]').on('ajax:success', function(event, data, status, xhr){
        $("#dashboard_categories").html(data.html);
      });
    });

  </script>

完全な index.html.erb:

# index.html.erb
<% title "Categories" %>

<%= form_for @category, remote: true do |f| %>
  <% if @category.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@category.errors.count, "error") %> prohibited this category from being saved:</h2>

      <ul>
      <% @category.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <table>
    <tr>
      <td><%= f.text_field :name, placeholder: 'Category Name' %></td>
      <td><%= f.text_field :color, placeholder: 'Colour' %></td>
      <td><%= f.submit %></td>
    </tr>
  </table>
  <br />
<% end %>


<div id="dashboard_categories">
  <%= render partial: 'categories' %>
</div>


<% content_for :javascript do %>
  <script type='text/javascript'>

    $(function(){

      /* new category */
      $('#new_admin_category').on('ajax:success', function(event, data, status, xhr){
        $("#dashboard_categories").html(data.html);
      });

      /* delete category */
      $('a[data-remote]').on('ajax:success', function(event, data, status, xhr){
        $("#dashboard_categories").html(data.html);
      });
    });

  </script>
<% end %>
4

1 に答える 1

1

あなたのことを 100% 理解しているかどうかはわかりませんが、AJAX の成功後にイベントを追加したいと思われますか?

$(function () {
    function InitializeEvents() {
        /* new category */
        $('#new_admin_category').on('ajax:success', function (event, data, status, xhr) {
            $("#dashboard_categories").html(data.html);
            InitializeEvents();
        });

        /* delete category */
        $('a[data-remote]').on('ajax:success', function (event, data, status, xhr) {
            $("#dashboard_categories").html(data.html);
            InitializeEvents();
        });
    }
    InitializeEvents();
});

それが役に立てば幸い ：）

于 2013-05-14T11:36:22.900 に答える