Respond_to js returns a part of the html page along with the JavaScript instead of js.erb file

Question

I am trying to rewrite a form to appear as a modal form. To do this I use popper and bootstrap lib, both of them included in project and worked. But I don't succeed, the same error always appears:

VM44399:1 Uncaught SyntaxError: Unexpected token '<'
    at DOMEval (jquery3.self-74ad.js?body=1:112)
    at Function.globalEval (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:346)
    at text script (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9641)
    at ajaxConvert (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:8788)
    at done (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9256)
    at XMLHttpRequest.<anonymous> (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9549)

My js libraries:

// app/assets/javascripts/application.js 
 
/* External libraries */
//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap

In controller I use respond_to for return my js file:

 
def new
   respond_to do |f|
      f.js
   end
end

Add to the index.slim modal classes and change link to remote=true:

= link_to new_article_path, { remote: true,
                              'data-toggle' =>  "modal",
                              'data-target' => '#modal-window',
                              class: 'btn btn-outline-success' }
#modal-window.modal.fade[role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"]
   .modal-dialog.text-left[role="document"]
      .modal-content

Renamed new.slim to _new.slim and add modal classes to them too:

# ArticlesController

.card.modal-header
  .card-body.w-100
    h5.card-header New Article
    = render 'form'

Create new.js.erb with js which adds and calls a modal window:

$("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
$("#modal-window").modal();

As a result, I still get a part of some incomprehensible html with a bunch of scripts tag like <script src="/assets/jquery-ui/ as I understand it, this is just part of the entire application page in which there is code with new.js.erb just in the form of code.

What could be the problem here?

Thanks for answers!

Answer 1

Possibly follow more of a rails convention in the controller:

def new
  @article = Article.new
end

def create
  @article = Article.create!(article_params)

  respond_to do |format|
    format.js
  end
end

Answer 2

The problem is solved by adding render layout: false inside the format.js or before respond_to method:

def new
   respond_to do |format|
     format.js { render layout: false }
   end
end