Рельсов дистанционной связи модальной для создания и редактирование записей

Question

Я последовал за учебник найденной here

То, что я пытаюсь добиться, чтобы позволить пользователям редактировать записи из индексной страницы, используя модальность.

На мой взгляд index.haml у меня есть это:

- @bars.each do |bar| 
    = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default" 

#bar-modal.modal.fade 

В _edit.haml:

.modal-header 
    %h3= "Editing #{@bar.foo}" 
= render "form" 

В edit.js.erb

$("#bar-modal").html("<%= escape_javascript(render 'edit') %>") 
$("#bar-modal").modal("show") 

В _form.haml

= bootstrap_form_for @bar, remote: true do |f| 
    = f.text_field :foo 
    = f.button "Save" 

Мой контроллер является стандартным рельсовым контроллером CRUD.

По какой-то причине это не показывает модальность, если я нажимаю на ссылку. Я работал с ним по-другому, но потом он открыл форму «создать», а не редактировал ее.

Я использую бутстрап и haml. Я убедился, что ошибок в firebug нет.

Что мне не хватает?

Answer 1

Помогли ли вы контроллеру визуализации js ответа?

В edit действия контроллера, добавить

def edit 
    #find the record 
    respond_to |format| 
    format.js # this will render edit.js.haml 
    # other formats 
    end 
end 

И вы перепутали erb с haml в вашем edit.js.haml. Заменить, что с

$('#modal-container').html('#{ j(render 'edit') }'); 
$('#bar-modal').modal("show"); 

Когда первая строка кода выполняется, #bar-modal существует в нашем документе. А затем вы можете вызвать метод modal на нем, чтобы отобразить модальный.

Отметьте, что j является псевдонимом для escape_javascript. (Меньше нажатий клавиш)

Убедитесь, что у вас есть div с идентификатором modal-container в index.html.haml. И ваш модальный (в _edit.html.haml) должен иметь идентификатор bar-modal.

И ваш модальной в _form.html.haml должен выглядеть примерно так:

.modal.fade.in#bar-modal 
    .modal-dialog 
    .modal-content 
     .modal-header 
     %h3= "Editing #{@bar.foo}" 
     .modal-body 
     = render "form" 

Обратите внимание, что у нас есть режимные с идентификатором bar-modal и это будет вынесено в заполнитель DIV #modal-container, который должен быть в index.html.haml. Это должно быть что-то вроде этого.

%div{id: "modal-container"} 
    <!-- this is where the modal will go in --> 

- @bars.each do |bar| 
    = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default" 

Добавьте modal-container в верхней части документа.Из документации Bootstrap в,

Модальные размещения разметки

Всегда старайтесь размещать HTML код модальный в позиции верхнего уровня в документе, чтобы избежать других компонентов, влияющих на внешний вид и/или функциональность модальной в.

Надеюсь, это поможет!