Блог

Я пытаюсь переписать форму, чтобы она отображалась как модальная форма. Для этого я использую библиотеки popper и bootstrap, обе они включены в проект и работают. Но у меня ничего не получается, всегда появляется одна и та же ошибка:

 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)
 

Мои библиотеки js:

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

В контроллере я использую respons_to для возврата моего js-файла:

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

Добавьте в index.slim модальные классы и измените ссылку на 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
 

Переименовал new.slim в _new.slim и добавил к ним модальные классы:

 # ArticlesController

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

Создайте новый файл .js.erb с помощью js, который добавляет и вызывает модальное окно:

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

В результате я все равно получаю часть какого-то непонятного html с кучей тегов scripts <script src="/assets/jquery-ui/ , как я понимаю, это просто часть всей страницы приложения, в которой есть код с new.js.erb просто в виде кода.

В чем может быть проблема?

Спасибо за ответы!

Возможно, следует большему соглашению rails в контроллере:

 def new
  @article = Article.new
end

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

  respond_to do |format|
    format.js
  end
end
 

Проблема решается путем добавления render layout: false внутри format.js или перед методом response_to:

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