Rails 3.2 javascript partial is not manipulating the html page

Question

On a page there is a form which submit link sends an ajax request to my controller. I want the controller to update the resource and then update the resource on the page. The controller responds in the following way:

def update
  @article = Article.find(params[:id])
  respond_to do |f| 
    f.js {}
  end 
end

which then uses the following partial: (article/update.js.erb)

<%= Rails.logger.info "in the partial"%>
<%= Rails.logger.info @article.title%>
$("#test").append("<h1> Header</h1>")
$("#json-app").append(" hello <%= @article.title %>");
$("#json-app").append("<p> hello</p>");
$("#comments").append("<%= @article.title %>:");
alert("something")
$("#btn").attr('disabled','disabled') 

The ids i am referencing there are present in the calling view within the form

form_for @article ,remote: true, html: {:'data-type' => 'json'}, id: "update_article_form" do |f|
.... 
<div id="comments"> comments </div>
<div id="json-app"> a response would be nice
   <div id="test"> comments</div>
</div> 
.....
<%= f.submit 'Update!', id: "btn", style: 'float: inline-end'%>

But clicking the button has no effect. In the html-inspector i see the payload and the status 200 response. The logs show:

Started PUT "/article/2223355" for 127.0.0.1 at 2019-02-18 18:04:29 +0100
Processing by v1::ArticleController#update as JSON
...
in the partial
big pott
Rendered v1/article/update.js.erb (2.9ms)
Completed 200 OK in 41.7ms (Views: 8.2ms | ActiveRecord: 2.4ms)

But inside the view the jquery calls dont have an effect.

The response payload is:

true
true
$("#test").append("<h1> Header</h1>")   
$("#json-app").append(" hello big pott");
$("#json-app").append("<p> hello</p>");
$("#comments").append("big pott ");
alert("something")
$("#btn").attr('disabled','disabled') 
$("input[type=submit]").attr('disabled','disabled') 

• The request header "accept" is set to "text/javascript application/json"
• The response header "content-type" is set to "text/javascript"

I do not understand why nothing is happening on the page? Which part am i missing? Any suggestions welcome

Answer 1

Change those

<%= Rails.logger.info "in the partial"%>

to

<%- Rails.logger.info "in the partial" %>

So it does not render that "true" line, I'm guessing it's messing with your sintax. And make sure to properly end the lines with ";".

Also, you can add a "debugger;" line before de code so the browser will stop the execution right there and you can debug the response.