redirect_to not working with ajax

Question

I have created an ajax form in bootstrap modal which creates a new post into my database. The form is:

<%= form_for @post, remote:true, :html => {:id => "share-needs-form"} do |f| %>
    <div class="modal-body">
        <div id="shareNeedsModalFirstStep">
        <div class="row" style="margin-bottom: 10px">
            <ul class="error-alert hidden share-needs-form-errors col-lg-10 col-centered" id="share-needs-error-alerts"></ul>
    </div>
    <div class="row"style="margin-bottom: 10px;">
        <div class="col-lg-10 col-centered">
            <%= f.text_field(:title, :class => "form-control", :placeholder => "Add a title for e.g I need a designer, in return I can code for you", :id => "title") %>
        </div>
    </div>
    <div class="row" style="margin-bottom: 10px;">
        <div class="col-lg-10 col-centered">
            <%= f.text_area(:description, :rows => "5", :class => "form-control", :id => "description", :placeholder => "Write some description about your idea, so that people who can offer an exchange know what you want to accomplish") %>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10 col-centered">
            <%= f.text_field(:keywords, :class => "form-control", :id => "keywords", :placeholder => "Add some keywords (not more than 5 and comma(,) separated)") %>
        </div>
    </div>
    </div>
    <div class="row hidden" id="shareNeedsModalSecondStep" >
        <div class="well" style="max-height: 250px; overflow-y: scroll;">
            <div>
            <a href="#" style="font-size: 17px;">I need a designer, in return I can code for you</a>
            <p>I need a designer for a game project, I am working on a small 2D game, I can provide my coding skills for you. I am good at making web applications, and...</p>
            </div>
            <hr />
            <a href="#" style="font-size: 17px;">I need a designer, in return I can code for you</a>
            <p>I need a designer for a game project, I am working on a small 2D game, I can provide my coding skills for you. I am good at making web applications, and...</p>
            <hr />
            <a href="#" style="font-size: 17px;">I need a designer, in return I can code for you</a>
            <p>I need a designer for a game project, I am working on a small 2D game, I can provide my coding skills for you. I am good at making web applications, and...</p>
        </div>
    </div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-warning hidden" id="shareNeedsModalBackButton">Back</button>
    <button type="button" class="btn btn-warning" id="shareNeedsModalContinueButton">Continue</button>
    <%= submit_tag "Share", :class => "btn hidden btn-warning", :id => "shareNeedsModalFormSubmitButton" %>
    </div>
<% end %>

And here is the corresponding controller:

def create
    @post = Post.new(post_params)
    if @post.save
        redirect_to post_path(@post.id)
    else
        @errors = @post.errors.full_messages
        render :json => @errors.to_json
    end
end

As you can see, the create method creates new post by the form fields it received from post_params . The else block works fine which means that the errors are returned and displayed in my view using the following javascript:

$("#share-needs-form").bind("ajax:complete", function(evt, data, status, xhr) {
    console.log(data.responseText);
    if(typeof data == "object") { //errors were returned as a json "object"
        $("#shareNeedsModalBackButton").click();
        var form_errors_holder = $("#share-needs-error-alerts");
        form_errors_holder.removeClass("hidden");
        form_errors_holder.html("");
        var errors = data;
        for(var i = 0; i < errors.length; i++) {
            form_errors_holder.append("<li>" + errors[i] + "</li>");
        }
    }
});

But in the controller when the post is successfully saved it does not redirect to my post_path instead it returns back the whole html of my post_path page. Why is the redirect not working and how could I fix this? Please help.

Answer 1

Actually, you are sending js request. Therefore, server sent you response in js format. For this, you have to write format of response in create method, as following.

def create
  @post = Post.new(post_params)
  respond_to do |format|
    if @post.save
      format.html { redirect_to @post }
      format.js
    else
      format.html { render :new }
      format.js
    end
  end
end

And, make file app/views/posts/create.js.erb and write following code.

<% if @post.errors.empty? %>
   window.location = "<%= post_path(@post) %>";
<% end %>