Нужен совет по использованию Grails и Ajax для добавления в div, как в Rails

Question

Я только начинаю в Grails, и мне нужен совет по использованию Ajax. Я хочу добавить html в конец div внутри формы. Это в основном то, что у меня есть:

-form-
  -div id="listOfchildren"-
   childrow 1 input fields 
   childrow 2 input fields 
   childrow 3 input fields
  -/div-
-form-
-a-Add Child 4-/a-

Когда я нажимаю «Добавить ребенка», я хочу сделать ajax-вызов, который приводит к вставке нового потомка в div «listOfchildren». Таким образом, документ будет выглядеть так:

-form-
  -div id="listOfchildren"-
   childrow 1 input fields
   childrow 2 input fields
   childrow 3 input fields
   childrow 4 input fields
  -/div-
-form-
-a-Add Child 5-/a-

В Rails я бы сделал что-то простое:

  render :update do |page|
     page.insert_html :bottom, "list_of_children", :partial => child_partial
     page.replace "add_link", :partial => 'add_link'
   end

Предыдущий код отправляет JavaScript назад в браузер с двумя командами. Первая команда сообщает браузеру добавить html в конец div. Вторая команда обновляет счетчик «Добавить ссылку».

В grails я могу видеть только как заменить весь div (который уничтожил бы существующий ввод пользователя) и не вижу, как я могу вызвать несколько функций из ответа ajax. Я мог бы сделать это, если бы мне пришлось писать некоторые функции javascript в прототипе или что-то еще, но я бы хотел этого избежать, если есть более простой способ.

Спасибо!

Nate

Answer 1

Во-первых, вам нужно добавить prototype.js в заголовок страницы или, если применимо, к заголовку в шаблоне макета:

<g:javascript library="prototype" />

Тогда вместо ссылки используйте тег remoteLink, который идет с Grails:

<g:remoteLink action="ajaxyAddChild" update="listOfChildren">
    Add Child 4
</g:remoteLink>

По умолчанию тег remoteLink возвращается к контроллеру, который вызвал рендеринг страницы. Так что вам просто нужно добавить метод с именем ajaxyAddChild, или как вы хотите его вызывать, и заставить его выполнять бизнес-логику (лучше поместить в службу) и выводить HTML-код, который вы хотите отобразить в этом div - или визуализировать файл GSP для этого div. Update = часть remoteLink - это идентификатор элемента на странице для обновления.

Answer 2

Существует плагин для Grails, который позволяет вам выполнять рельсовый рендеринг: обновление вызовов. Этот плагин позволит вам делать именно то, что ваш код Rails сделал выше. Плагин называется «динамический JavaScript» и может быть найден в http://grails.org/Dynamic+Javascript+Plugin. Похоже, что плагин не имеет встроенного метода insert_html, поэтому при использовании этого плагина ваш блок рендеринга: update станет (Я не проверял это, поэтому скажите мне, если это не работает):

renderJavascript{
  callFunction "$('list_of_children').insert", g.render(template: 'child_template')
  replace 'add_link', [text:g.render(template:"add_link")]
}

Однако я согласен с mattS, что кажется странным сделать вызов серверу, чтобы сделать это. Разве это не может быть сделано на стороне клиента с помощью JavaScript?