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