Rails:在模态操作/提交后不刷新页面

时间:2016-07-19 14:40:49

标签: javascript ruby-on-rails ajax ruby-on-rails-4 modal-dialog

我有一个模态在另一个屏幕上打开。基本屏幕有一个过滤方法,它使用AJAX过滤该页面上的结果。

之后,我在屏幕上过滤结果,我可以打开模态并在模态中对表单执行操作。但是,我不想执行重定向/刷新。

如何在执行提交时执行此操作?

我的模态链接如下:

<%= link_to this_path(user_id: user.id), class:"modal-link", data: {"modal-url" => this_path(user_id: user.id)} do %><span><i class="fa fa-plus"></i><% end %>

模态足够标准:

<div class="modal form-modal">
    <div class="modal-container">
        <div class="modal-dialog modal-dialog-wide">
            <button class="close">&times;</button>
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="hdg-b">Edit This</h2>
                </div>
                <div class="modal-body">
                    <div id="error_explanation"></div>
                    <%= render 'form', form_path: action_path, form_method: :put, create: false %>
                </div>
            </div>
        </div>
    </div>
</div>

AJAX也是:

MyProject.onPageLoad(function() {
  var form  = $('.edit_site_scope'),
  onSubmit  = function(event) {     //callback handler for form submit
                event.preventDefault();
                var form     = $(this),
                url          = form.attr("action"), //get form action:
                type         = form.attr("method"),
                data         = form.serialize();
                var location = window.location.href;

                var posting  = $.ajax({
                  type: type,
                  url: url,
                  data: data,
                  dayaType: "json",
                  success:function(data, textStatus, jqXHR) 
                  { 
                    $('.modal').remove();
                    window.location = location;
                    $('#contact-tab-submit').show();
                  },
                  error: function(jqXHR, textStatus, errorThrown) 
                  {
                    $('#error_explanation').html('');
                    errors = jqXHR.responseJSON;
                    $.each( errors, function( key, value ) {
                      $('#error_explanation').append('<div class="alert alert-dismissable" id="alert-message"><i class="fa fa-exclamation-triangle"></i>' + value + '<div class="alert-close">Close</div></div>');
                    });
                    $('#contact-tab-submit').show();
                  }
                });

                window.setTimeout(function() {
                  $(".alert").fadeTo(500, 0).slideUp(500, function(){
                      $(this).remove(); 
                  });
                }, 5000);

                return false; // prevent default when submit button clicked
  };
  if (form.size() !== 0)  {
      form.submit(onSubmit);
  }
});

这是我在表单提交上的控制器操作:

def action_to_be_performed
    @this_thing = ThisThing.where(id: params[:id]).first
    @this_thing.update(this_things_params)
    flash[:success] = "Successfully performed the action."
    render json: @this_thing
  rescue => error
    Rails.logger.error "Exception caught updating this.\nCause: #{error}\n" + error.backtrace.join("\n")
    render json: @this_thing.errors.full_messages, status: :bad_request
  end

我真的很难用模态,我想用AJAX。如何执行操作,关闭模式并保持当前页面打开?

1 个答案:

答案 0 :(得分:0)

我在驱动器上找到了一个简单的解决方案。我的Javascript中的以下行:

window.location = location;

可以更改为:

window.location.reload();