CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajax
user4965201
user4965201

Reputation: 973

Rails - page is not loading after submitting form through ajax

I have a form in which i am using ajax validation, for that i have made the form as :remote => true and the view is given as

<%= nested_form_for @interview_round, :remote => true do |f| %>
   <div id="error-div"> </div>
<%= f.text_field :interviewer_name %>
<%= f.text_field :log_skill, :id=>'hint-log' %>
<%= f.text_field :comm_skill, :id=>'hint-comm' %>
<%= f.submit %>
  <% end %>

and the controller is given as

  def update
    @interview_round = InterviewRound.where(id: params[:id]).first
    respond_to do |format|
     if  @interview_round.update_attributes round_params

        format.html{ redirect_to interview_path(@interview_round.interview_id), notice: I18n.t('round_created')}
        format.js
     else
       format.html { render :action => "edit" }
       format.js
     end
      end
  end

i am showing the errors in the update.js.erb

<% if @interview_round.errors.present?%>
$('#error-div').html('<%= j(render 'shared/error_messages', :target => @interview_round) %>');
<% else %>
$('form.edit_interview_round').removeAttr('data-remote')
<% end %>

Now when i am submitting form the errors are coming remotely through ajax and showing on the page but when i am submitting the form without any error the page is not redirecting to the desired page but it is storing the data in database and submitting the form , though i am also trying to remove the data-remote on the form when there are no error it is removing in the HTML but still the page is not loading when i submit

Please Help !!

Upvotes: 3

Views: 1050

Answers (2)

RichardAE
RichardAE

Reputation: 2970

When you use remote: true you can't redirect via the 'redirect' function as it's a 'script' request and doesn't create a new page/headers etc.

The following would work for example, the syntax is ugly but this will redirect:

format.html{ redirect_to interview_path(@interview_round.interview_id), notice: I18n.t('round_created')}
format.js { render js: "window.location.href = '#{interview_path(@interview_round.interview_id)}'" }

However you would be better off doing the JS code within a seperate .js view file for the action. If you create a view file in the same directory as your HTML view called update.js, with the javascript re-direct in there, you could then remove the line I gave you altogether and keep view related code where it belongs, in the views.

To do that, you would create a file 'update.js.erb' in app/views/{controllername}/update.js.erb with this:

<% if @interview_round.errors.present?%>
  $('#error-div').html('<%= j(render 'shared/error_messages', :target => @interview_round) %>');
<% else %>
  window.location.href = '<%= interview_path(@interview_round.interview_id) %>';
<% end %>

Then revert the controller action back to: 

format.html{ redirect_to interview_path(@interview_round.interview_id), notice: I18n.t('round_created')}
format.js {}

The JS file will be rendered automatically, cleaning up the controller.

Upvotes: 2

Arslan Ali
Arslan Ali

Reputation: 17802

In the else part in update.js.erb, you are not redirecting the user to a different location, so whenever there are no errors in your form, your url will remain same, and you will not be redirected.

Upvotes: 0

Related Questions