JQuery модальные windows и редактировать объект

ОБНОВЛЕНИЕ: вот Rails 5 Адаптация этого ответа с использованием CoffeeScript: https://gist.github.com/1456815

jQuery более популярен по уважительным причинам, в которые я не буду вдаваться. Многое по этому поводу в другом месте.

Предполагая, что вы хотите использовать jQuery, настройка довольно проста:

 # add the following to your Gemfile under `group :development` gem 'jquery-rails' # run the following $ bundle # then let the generator install $ rails g jquery:install 

А затем обновите свои расширения по умолчанию для javascript Application.rb:

 # JavaScript files you want as :defaults (application.js is always included). config.action_view.javascript_expansions[:defaults] = %w( jquery rails ) 

И убедитесь, что ваш файл макета (например, application.html.erb) содержит эти файлы:

 <%= javascript_include_tag :defaults %> 

Для вашего модального, есть много мнений о том, как это сделать. Лично я предпочитаю сворачивать свои собственные модальные windows, основываясь на потребностях приложения. Это всего лишь несколько строк JQuery-laced JS для создания модалов, которые отлично работают с Rails.js:

 # in a view, perhaps a _modal.html.erb partial that is included into # your layout (probably at the bottom). 
 
 close  

Вот некоторые стили (стиль scss) для модального, который я использую:

 #modal-container { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.4); } #modal { display: none; position: absolute; width: 600px; left: 50%; margin-left: (-600px - 40px) / 2; padding: 20px; background: #fff; border: 5px solid #eee; & > .close { position: absolute; right: 5px; top: 5px; color: #666; &:hover, &:active { color: #000; } } } 

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

Чтобы интегрировать его в Rails, есть 2 части. Во-первых, вам нужно, чтобы браузер отправлял запросы AJAX для контента и показывал модальный возврат. Во-вторых, вам нужны Rails для ответа с соответствующим ответом.

Отправка AJAX и обработка ответов влечет за собой использование :remote => true в ссылках / формах, которые вы хотите отправить удаленно.

 <%= link_to 'New Post', new_post_path, :remote => true %> 

Это создаст атрибут данных по ссылке, которую Rails.js будет получать, позволяя ее отправлять удаленно автоматически. Он ожидает возврата javascript, и он выполнит этот ответ, когда он его получит. Вы можете добавить быстрый format.js к каждому format.js block и создать сопровождающий файл new.js.erb , содержащий JS, необходимый для фактического заполнения и отображения модальности. Это нормально, но мы можем сушить его немного больше, возвращая шаблон без макета и перемещая модальное отображение / скрытие обязанностей в application.js:

 # in your app controller, you'll want to set the layout to nil for XHR (ajax) requests class ApplicationController < ActionController::Base layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' } end 

Javascript, чтобы все это работало:

 # in application.js $(function(){ var $modal = $('#modal'), $modal_close = $modal.find('.close'), $modal_container = $('#modal-container'); # This bit can be confusing. Since Rails.js sends an accept header asking for # javascript, but we want it to return HTML, we need to override this instead. $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){ xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html); }); # Handle modal links with the data-remote attribute $('a[data-remote]').live('ajax:success', function(xhr, data, status){ $modal .html(data) .prepend($modal_close) .css('top', $(window).scrollTop() + 40) .show(); $modal_container.show(); }); # Hide close button click $('.close', '#modal').live('click', function(){ $modal_container.hide(); $modal.hide(); return false; }); }); 

У меня есть некоторая логика, чтобы позиционировать модальное окно 40px из текущей позиции прокрутки браузера.

Со всеми этими элементами на месте, когда вы нажимаете на ссылку / форму с помощью набора удаленных атрибутов, Rails.js будет обрабатывать отправку запроса, ваше приложение будет знать, что возвращает только шаблон для действия без макета, идеально подходящий для отображения он в модальном окне, а затем наш javascript, приведенный выше, подключится к обратному вызову ajax: success от Rails.js и отобразит модальный шаблон HTML, возвращенный из нашего приложения.

Существует более одного способа кошки кошки и более десятка способов создания этой функциональности. Это определенно та область, которую команда Rails еще не установила более сильные соглашения. Это всего лишь мой способ справиться с этим, что я чувствую себя довольно СУХОЙ, требует минимальных усилий и довольно гибкий и надежный в будущем. Возможно, одна из областей, на которых кто-то, вероятно, мог бы основываться на этом, - использовать модульную / лайтбоксовую фреймворк, которая охватывает больше баз и обладает большей функциональностью. И если кто-то это сделает, я бы с удовольствием посмотрел бы!

По причинам, почему jquery над прототипом, вот несколько мыслей.

1. jquery теперь является библиотекой Js по умолчанию для rails 3+, и она заменила прототипы / скриптовые библиотеки
2. jquery спроектирован так, чтобы быть ненавязчивым, то есть он не помещает ваш JS-код в строку; вы используете надлежащую разметку в своем HTML-файле и указываете на свой код HTML соответствующие идентификаторы, classы и tags, чтобы вы могли «подключить» к нему свой код jquery в отдельном JS-файле (я не уверен, что прототип действительно ненавязчив или нет, я использовал jquery в течение нескольких лет и не коснулся прототипа, поскольку)
3. jquery очень прост в освоении и использовании. Это несколько субъективно, но я нашел синтаксис jquery чрезвычайно простым. Все, что вы хотите сделать, возможно, в jquery.
4. JQuery также имеет очень обширную базу плагинов с большим количеством участников. Делает поиск решений общих проблем намного проще, чем писать их самостоятельно.
5. JQuery также имеет JQuery UI, который представляет собой набор инструментов для графических элементов, используемых для ваших интерфейсов и интерфейсов (они, кстати, имеют модальный виджет, который вы можете использовать для своей исходной проблемы).

Всего несколько мыслей о jquery. Я настоятельно рекомендую изучить его. На сайте jquery (jquery.com) есть несколько отличных базовых обучающих программ, которые помогут вам вникать в него. И Coreyward отлично справился с этим решением. Я делаю что-то подобное, но сам взял несколько советов.