Rails Тонкое диалоговое окно подтверждения перед отправкой сервера

Question

У меня есть этот код Rails Slim, который я пытаюсь использовать для создания диалогового окна подтверждения перед отправкой на сервер, но я не уверен, как сделать модальное всплывающее окно для этого.

Вот мой код:

https://gist.github.com/anonymous/2a6451b6714981667d2d4e349e3d7d32

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

= link_to 'Management Approve', approve_visitor_management_visitors_path, class: "btn btn-success btn-block", data: { :confirm => 'Are you sure?' } 
= link_to 'Management Reject', reject_visitor_management_visitors_path, class: "btn btn-danger btn-block", data: { :confirm => 'Are you sure?' } 

Answer 1

К сожалению, модалы не являются чем-то, что приходит из коробки с рельсами.

Модалы - это просто стилизованный способ отображения и скрытия блоков html без выдачи другого запроса сервера (перезагрузка страницы). Чтобы изменить содержимое html без перезагрузки страницы, вам нужно будет использовать javascript.

Передних концевых каркасов, как bootstrap, semantic-ui и foundation, не включают в себя из собственных коробок модальных реализаций, которые укутаются в HTML, CSS и JavaScript требуется. Если ваш проект еще не использует один из них, я бы предложил использовать учебник по реализации одного из них. Bootstrap очень распространен.

Answer 2

Похоже, что у вас есть bootstrap, включенный в качестве рамки CSS для вашего проекта, поэтому вам нужен модальный макет, вот тот, который у меня есть в моем рабочем проекте, это erb, но не очень важно переключить его на тонкий. Как Дэвид упомянул, вы лучше посмотрите на бутстрап или так. Я действительно вижу, что в вашем коде есть несколько стандартных имен классов, что означает, что вы уже включили фреймворк css (bootstrap). Так вот и мы с моим рабочим примером:

<div id="fullCalModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button> 
       <h4 id="modalTitle" class="modal-title"></h4> 
      </div> 
      <div id="modalBody" class="modal-body"></div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <a id="eventUrl" class="btn btn-success" target="_blank">More details</a> 
      </div> 
     </div> 
    </div> 
</div> 

Для переключения это тонкое использование

.classname для всего класса сНа = BlaBla.

Во-вторых вы должны связать свою кнопку, чтобы модальный показано и здесь, как вы хотите сделать это

Ваш JS просто

$("Button").click -> 
    $('#fullCalModal').modal() 

Если вам нужна помощь, дайте мне знать!

Answer 3

Вам необходимо удалить confirm из хеша data. Это должно быть передано непосредственно link_to. Это даст вам стандартное окно с поддержкой браузера (т. Е. Модальное всплывающее окно).

= link_to 'Management Approve', approve_visitor_management_visitors_path, method: :post, class:"btn btn-success btn-block", confirm: 'Are you sure?' 

= link_to 'Management Reject', reject_visitor_management_visitors_path, method: :post, class:"btn btn-danger btn-block", confirm: 'Are you sure?' 

Уведомление Я также добавил method к аргументам. Я предполагаю, что это оба запроса POST. Если нет, просто измените их на то, что точно.