2016-10-18 4 views
0

Я пытаюсь отобразить модальный вид с помощью частичного jQuery.Rails jquery render bootstrap modal

У меня есть контроллер letters_controller.rb с таким кодом:

def new 
    @letter = Letter.new 
    respond_to do |format| 
    format.html 
    format.js 
    end 
end 

В views/letters.slim У меня есть два файла: _new.slim:

 .modal-header 
     button.close type="button" data-dismiss="modal" 
      i.fa.fa-times 
     .modal-title 
     h4 style='display: inline; margin-right: 15px' Write a letter 
     .modal-body 
     p lalallala 

     .modal-footer 
     button type="button" class="btn btn-default" data-dismiss="modal" Сlose 
      .modal-dialog style='width: 700px' 
      .modal-content 

и new.js.erb

$("#email-modal").html("<%= escape_javascript(render 'letters/new') %>"); 

В представлении вызова I имеет кнопку = link_to new_letter_path, {:id => 'contact-us', :remote => true }

Кроме того, в целях вызова я есть div где модальный должны быть оказаны: .modal.fade#email-modal role="dialog" tabindex="-1"

Проблема заключается в том, что при нажатии на кнопку, все-х неактивна, как это sould быть, но не появляется окно. Я проверил код и выяснил, что jquery не вставляет код _new.slim в подготовленный div. О чем это может быть? Thanx!

================== Журналы для нажатия кнопки (я оставил только те, которые связаны с этим материалом):

I, [2016-10-18T22:31:11.380703 #1] INFO -- : Started GET "/letters/new" for 172.18.0.4 at 2016-10-18 22:31:11 +0000 
I, [2016-10-18T22:31:11.404587 #1] INFO -- : Processing by LettersController#new as JS 
D, [2016-10-18T22:31:11.411518 #1] DEBUG -- : User Load (1.1ms) SELECT "users".* FROM "users" WHERE "users"... 
.... 
I, [2016-10-18T22:31:11.454585 #1] INFO -- : Rendered letters/_new.slim (0.1ms) 
I, [2016-10-18T22:31:11.459100 #1] INFO -- : Rendered letters/new.coffee within layouts/application (6.7ms) 
I, [2016-10-18T22:31:11.546124 #1] INFO -- : Rendered application/_support_email.slim (0.1ms) 
+0

Можете ли вы добавить журналы своего сервера для этого вызова? – Zero

+0

вы можете попробовать с определенными 'render partial:" letters/new "' возможно, это просто своего рода конфликт имен. – Sajan

+0

Журналы @prakashS обновлены. – Ngoral

ответ

0

Ваш _new .slim должен быть

#edit-modal.modal.fade aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" 
    .modal-header 
    button.close type="button" data-dismiss="modal" 
     i.fa.fa-times 
    .modal-title 
    h4 style='display: inline; margin-right: 15px' Write a letter 
    .modal-body 
    p lalallala 

    .modal-footer 
    button type="button" class="btn btn-default" data-dismiss="modal" Сlose 
     .modal-dialog style='width: 700px' 
     .modal-content 

и вам нужно иметь DIV в letters.slim для размещения модального содержания

<div id="modalDiv"> </div> 

Тогда ваш new.j s должны оказывать частичное и вызвать модальный, чтобы показать

$("#modalDiv").html("<%= escape_javascript(render partial: 'letters/new') %>"); 
$("#edit-modal").modal("show"); 
+0

У меня уже был аналог 'modalDiv'. Это называется '# email-modal'. И проблема заключается в том, что содержимое букв/новых не добавляется к нему. – Ngoral

+0

Я только что решил немного протестировать. Итак, насколько это написано в моем коде выше, кнопка имеет идентификатор 'contact-us'. Я добавил строку '$ (« # contact-us »). Html (« lalala »);' в мой файл 'new.js', и он также не работает. Содержимое кнопки остается неизменным. Это о JS обрабатывается неправильно? – Ngoral

+0

Я думаю, что вы добавили строку в конец, если предыдущие строки вызывают ошибку, она не будет следующей следующей. – Zero

0

На самом деле, проблема была не в модальных, но в format.js и выполнения JQuery в js.erb файле. Я спросил one more question, и решение должно было быть добавлено { render layout: false, content_type: 'text/javascript' } после format.js