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

Я пытаюсь создать некоторые модальные windows, чтобы появляться всякий раз, когда пользователь хочет отредактировать объект. Я не делал этого раньше, и я искал учебники, но вместо того, чтобы получить прямые ответы, все, что я получил, больше смущает! Кажется, есть так много библиотек, которые можно использовать.

Поэтому я думаю, что этот вопрос состоит из двух частей. Если бы я хотел это сделать, есть ли какие-то особые причины, по которым я бы хотел выбрать JQuery над прототипом? Есть ли еще варианты?

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

У меня есть следующие, стандартные действия crud, edit и update. Теперь мне хотелось бы, когда пользователь нажимает на редактирование, а не на страницу, появляется окно, где он может редактировать имя билета (сейчас это единственный атрибут).

в controllerе у меня это:

def edit @ticket = Ticket.find(params[:id]) end def update @ticket = Ticket.find(params[:id]) if @ticket.update_attributes(params[:ticket]) redirect_to tickets_url, :notice => "Successfully updated ticket." else render :action => 'edit' end end 

Может ли кто-нибудь помочь мне в этом? Также, конечно, советы и ссылки более чем приветствуются!

ОБНОВЛЕНИЕ: вот 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).   

Вот некоторые стили (стиль 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 отлично справился с этим решением. Я делаю что-то подобное, но сам взял несколько советов.

  • Как иметь выпадающее поле в форме рельсов?
  • Net :: SMTPAuthenticationError при отправке электронной почты из приложения Rails (в промежуточной среде)
  • «Кто в сети» с помощью «Разработка в рельсах»
  • Rails 3 - выберите с помощью Include?
  • link_to и remote => true + jquery: Как? Помогите?
  • ошибка рельсов, не удалось разобрать YAML
  • Библиотека Rails 3 не загружается, пока не потребуется
  • ссылка для скачивания файла в рельсах
  • Установка переменных среды в Rails 3 (Devise + Omniauth)
  • Как добавить bootstrap modal с link_to, чтобы содержимое ссылки открылось в модальном?
  • Разделить сервер и клиент API REST JSON?
  • Interesting Posts

    Настройка переключателей компилятора GCC в Qt, QtCreator и QMake

    Уточнение о Lucid Virtu

    Сумма vlookup с использованием формулы массива

    Как частично спроектировать дочерний объект со многими полями в nHibernate

    Количество символов в текстовом поле

    Быстрое создание объектов вместо Activator.CreateInstance (type)

    как назначить сразу несколько значений в структуру?

    Как вызвать getResources () из classа, который не имеет контекста?

    Диалоговое окно JQuery UI с обратной записью на ASP.NET

    Будет ли включение проприетарных драйверов на установку 17.04 повлиять на разделы secureboot и bitlocker?

    андроидный fragment. Как сохранить состояния представлений в fragmentе, когда другой fragment нажат поверх него

    Как суммировать все значения в столбце в Jaspersoft iReport Designer?

    Как установить текущий рабочий каталог в каталог скрипта?

    Первая попытка воспроизвести любой звук после загрузки приводит к 30-секундной задержке

    Различия между действием и действиемListener

    Давайте будем гением компьютера.