Как создать всплывающее окно для создания новой записи в рельсах 3 - PullRequest
6 голосов
/ 21 июля 2011

У нас есть требование, чтобы на веб-странице отображались все записи из нескольких таблиц.У нас есть «Добавить кнопку» - после нажатия на кнопку мне нужно отобразить всплывающее окно, где пользователь введет необходимые данные.Во всплывающем окне будут две кнопки «Сохранить» и «Отмена».

Нажатие кнопки «Сохранить» должно подтвердить поля и, если все проверки пройдены, сохраните запись в базе данных, в противном случае сообщения об ошибках отобразятся в окнах предупреждений.1004 * Нажатие кнопки Отмена закроет всплывающее окно.

Как создать всплывающее окно при нажатии кнопки добавления?

Ответы [ 2 ]

10 голосов
/ 22 июля 2011

Вам нужно разделить вещи, которые относятся к стороне сервера (Rails, контроллеры, действия) и стороне клиента (всплывающие окна, JavaScript, отправка запросов).

Ваши действия на стороне клиента (код JavaScript) должныПредставьте, что ваше Rails-приложение относится к некоторому серверу, который возвращает несколько ответов для некоторых запросов.С точки зрения JavaScript не важно, работает ли сервер на Rails или Smalltalk.

Основной рабочий процесс для вашего всплывающего окна может быть:

1) открыть новое окно - Для этого требуется клиентская активность JavaScript.Используйте функцию window.open или (я скромно считаю этот метод лучшим) создайте новый <div> и стилизуйте его с помощью CSS, чтобы он покрывал (хороший эффект - этополупрозрачный фон: background: #ddf; opacity: 0.5;, через который вы все еще видите содержимое страницы).

2) заполните окно формой редактирования - Здесь ваш клиент-Сценарий side должен выполнить AJAX-подобный вызов (не обязательно реальный AJAX, поскольку в этом случае может потребоваться синхронный запрос) , чтобы получить форму редактирования из вашего приложения Rails.См. Этот упрощенный пример:

function fillPopupBody(popup) {
  var req = new XMLHttpRequest();
  req.open("GET","/something/partial_new_form.html",false); // Synchronic request!
  req.send(null);
  if( req.status == 200 ) {
    popup.innerHTML = req.responseText;
    return true;
  } else {
    popup.innerHTML = "<p class='error'>"+req.status+" ("+req.statusText+")</p>";
    return false;
  }
}

3) Подготовьте действие возврата формы в приложении Rails - (на стороне сервера) Обычно это может быть ваш new действие данного контроллера ресурсов, но отображаемое без макета.

Альтернативным подходом было бы создание формы с помощью JavaScript (без извлечения ее отдельно) или включение ее всегда на странице - просто скрытопо умолчанию, поэтому JavaScript должен только установить свое свойство display.

4) Обрабатывать отправку формы - вы, вероятно, хотите, чтобы пользователь оставался на той же странице, поэтому вам следует перехватитьФорма отправки.Просто добавьте обработчик в событие «submit» созданной формы, создайте запрос, опубликуйте его, проверьте ответ сервера.

Ответ будет возвращен Rails вашим действием: create action .Возможно, вы уже готовы, потому что код, созданный ./script/rails generate scaffold, обычно в порядке.

Если ответ 201 (создан), вы можете закрыть всплывающее окно (display: none) и обновить страницу для отображения.новый объект - либо обновить всю страницу, либо извлечь только измененные части.

Если действие create не может создать объект, по умолчанию код ответа - 422 (необработанный объект), а содержимое - этообъект ошибки модели, представленный как JSON или XML.Просто отобразите ошибки в форме (пусть ваш JavaScript установит innerHTML некоторого предопределенного элемента).


Это был «ручной» способ выполнения задачи.У меня есть некоторое отвращение (трудно объяснимое ;-) к библиотекам JavaScript, и я предпочитаю работать напрямую с DOM.Вы можете найти множество помощников Rails, которые избавят вас от написания кода JavaScript.Я полагаю, что хорошей отправной точкой будет поиск параметра :remote => true в form_for.

Также неплохо было бы почитать документацию jQuery (http://docs.jquery.com/Main_Page).

Заканчивая эту длинную историю, вот короткие ответы на ваши вопросы из комментария:

Как связать действия контроллера из всплывающего окна?

: отправив HTTP-запрос на правильный URL-адрес: «GET / users / 1 / notes / new», «POST / user / 1 / notes»

Как закрытьpopup?

: установив display: none, если всплывающее окно является элементом страницы, или вызвав window.close(), если ваше всплывающее окно - отдельное окно.

1 голос
/ 14 мая 2012

Я сделал это следующим образом:

Чтобы открыть окно:

<%= link_to "Agregar Modelos", {:controller => "educationals", :action => "index4", :id => params[:id]}, :popup => ['Modelo Educacional', 'height=300,width=600'] %>

Чтобы закрыть окно после отправки:

<%= submit_tag "Aceptar", :onclick => "window.close()" %>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...