Rails Ajax jQuery

Question

I'm working on an dynamic edit of an article using rails. On each articles can be added paragraphs. I wanted to use Ajax with Jquery following the 136-jquery-ajax-revised tutorial from railscast. I created the template for the form and the new.js.erb response but I keep geting same error:

ParagraphsController#new is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []

This is the link that request the new form from view/article/show

<%= link_to 'New Paragraph', new_article_paragraph_path(@article), remote: true, class: 'uk-button uk-button-primary' %>

view/paragraph/_form

<div class="article-form-container">
  <%= form_with scope: :paragraph, url: article_paragraphs, remote: true do |f| %>
    <%= f.text_field :title, class: 'uk-input', placeholder: 'Title of paragraph (optional, can be a subtitle of the article)' %>
    <%= f.text_area :text, class: 'uk-textarea', placeholder: 'Content of paragraph' %>
    <%= f.hidden_field :position, :value => 3 %>
    <div class="submit-button">
    <%= f.submit class: 'uk-button uk-button-primary' %>
    </div>
  <% end %>
</div>

routes

resources :articles, only: %i[show update destroy create]

resources :articles do
  resources :paragraphs, only: %i[new create update destroy]
end

view/paragraphs/new.js.erb

$('div#article-control-panel').hide("fast", function () {
    $('div#article-control-panel').after('<%= j render 'form' %>')
})

controllers/paragraphs_controller

class ParagraphsController < ApplicationController
  def new
    @paragraph = Paragraph.new
  end

  def create
    @paragraph = Paragraph.new(paragraph_params)
    @article = Article.find(params[:article_id])

    if @article.user == current_user
      @paragraph.article = @article
      @paragraph.save
    end

    respond_to do |format|
      format.html { redirect_to @article }
      format.js
    end
  end

  def paragraph_params
    params.require(:paragraph).permit(:title, :text, :position)
  end
end

Can't figure out what the problem is. The error happens in the article page, after I press the link button.

Edit Strange thing is that if i try to change the url of orm in something like article_path it will work...

Answer 1

Your controller is missing a respond_to. Your new function should look like this:

def new
  @paragraph = Paragraph.new
  respond_to { |format| format.js }
end

This respond_to allows rails to call the relevant .js.erb file, in this instance your new.js.erb file.

Just keep in mind that when you want to perform an ajax call, you require these few elements:

• A respond_to { |format| format.js } in your controller action

• Your js.erb file needs to be the same name as your controller action (foo.js.erb)

• A partial to render through your js.erb file, typically named the same as your js file. (_foo.js.erb)

• If it is a link, you need remote: true. If it is a form and you're using rails 5, you could use form_with or simply include remote: true too.