Ajax request not returning erb file

Question

My rails app has lots of client-side javascript callbacks following ajax requests, but I have been unable to get the proper flow through route > controller > erb files to work.

Here is one example, starting with the ajax request:

    $(initElement).on("click", function(){
        event.preventDefault();
        var url = "http://localhost:3000/login";

        $.ajax({
            url: url,
            method: "GET",
            dataType: "html"
        }).done(function(){
            console.log("*** ajax success T ***");
            displayObject.toggleSelectionLabels("show");
        }).fail(function(){
            console.log("*** ajax fail T ***");
        });
    });

The route in routes.rb

get "/login" => "sessions#login"

The sessions controller login action:

def login
    puts "******* login " + "*" * 21
end

The login.html.erb file I am expecting from the server:

<% @page_title = "UserAuth | Login" %>

<div class="form-column login">
    <h1>Log in</h1>
    <div class="tag-edits photo-form">
        <%= form_tag(:action => 'login_attempt') do %>
        ... edited out...
        <% end %>
    </div>
</div>

The ajax request fuinds the route, returns as a "success" and the toggleSelectionLabels callback runs, but no erb content appears. Does ajax prevent the normal processing within rails?

score 0 · Accepted Answer · answered Oct 18 '15 at 20:45

0

What do you mean by normal processing? If you want to display the returned html you might want to do something like

$(initElement).on("click", function(){
    event.preventDefault();
    var url = "http://localhost:3000/login";

    $.ajax({
        url: url,
        method: "GET",
        dataType: "html"
    }).success(function(response) {
      // response is your html, use it to inject it into the html
      // for Example
      $('.main-div').html(response);
    }).done(function(){
        console.log("*** ajax success T ***");
        displayObject.toggleSelectionLabels("show");
    }).fail(function(){
        console.log("*** ajax fail T ***");
    });
});

Note the success callback. It is called when the response of the server have a httpStatus = 200 (OK)

answered Oct 18 '15 at 20:45

nbermudezs

2,814
1
20
20

Thanks for the help. I now get the erb content, but it comes with the entire layout file surrounding it (rather than erb content only, which I expected to fill the <% yield %> by itself.) In other words, the entire page reloads and fills yield. This warning too: "Synchronous XMLHttpRequest on the main thread is deprecated..." as though I am sending 2 requests. Any thoughts? – tomBeach Oct 19 '15 at 11:16
To remove the layout you just need to add `render layout: false` as the last line in the `login` method of your controller. As for the warning, take a look at this other SO [post](http://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr). Don't forget to mark the answer as accepted once you feel ready to. – nbermudezs Oct 19 '15 at 16:14

Ajax request not returning erb file

1 Answers1