Ajax bootstrap modal windows in Rails

В одному із Rails проектів інтернет магазину з продажу книг, була задача організувати попередній перегляд (скороченої версії) книги в pdf форматі. Для цього, було прийнято рішення, при кліку на лінк, відкривати модальне вікно із відображенням цього файлу (хоча amazon робить трохи по іншому – слайдер сторінок, які у вигляді зображень )

Давайте розглянемо верстку boostrap modal'ьного вікна

bootstrap_modal

і подумаємо яким чином ми будемо реалізовувати динамічну підгрузку(ajax) даних в наше модальне вікно.

Для цього, наша view'ха методу show повина мати перший <div> модального вікна, у нас він буде з id='myModal'. Уся інша верстка (починаючи із div класу modal-dialog) + сам контент ми будемо підвантажувати динамічно.

Виносимо відображення url'а на preview книги в окремий partial – _look_inside.html.haml. Звертаємо увагу на remote: true – цим ми пояснюємо Rails, що url не буде безпосередньо відпрацьовувати в текучому вікні, а буде задіяний Ajax:

Метод в контролері, для відображення модального вікна, в якому ми забезпечуємо генерування в'юхи при ajax-запросі (тобто коли спрацьовує js – format.js{}, format.html я залишив на випадок, коли js буде відключений, то в'юха згенерується просто в текучому вікні браузера, що правда я не перевірив це на практиці, але приблизно якось так)

Створюємо в'юху pdfpreview.js.erb контролера pdfpreview для js-випадку

В якому ми рендеремо partial pdfpreview та повертаєму у відповідь у вікно браузера клієнта

Сам _pdfpreview.html.haml