当前位置: 动力学知识库 > 问答 > 编程问答 >

ruby on rails - Rerun JavaScript on successful ajax call

问题描述:

I have a delete button with the remote: true option set:

# _categories.html.erb

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

My destroy method uses 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

and my destroy.json.erb file looks like:

#destroy.json.erb

<% self.formats = ["html"] %>

{

"html":"<%= raw escape_javascript( render :partial => 'categories', :content_type => 'text/html') %>"

}

Now my problem is that I have this JavaScript run on page load, and deleting an initial category works as intended... Until the data changes. I need this bellow JavaScript to run again every time the user changes data either by adding a new category or deleting a category. How? Please be kind with your help, I do NOT know JavaScript at all! haha

 <script type='text/javascript'>

$(function(){

/* delete category */

$('a[data-remote]').on('ajax:success', function(event, data, status, xhr){

$("#dashboard_categories").html(data.html);

});

});

</script>

FULL 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 %>

网友答案:

I don't know If I have understand you 100% but looks like you want to add the events after AJAX success?

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

Hope it helps :)

分享给朋友:
您可能感兴趣的文章:
随机阅读: