Используйте jQuery вместе с js.erb
представлениями и respond_to
блоками.
Каким бы ни было это действие (для примера мы скажем FoosController#update
):
render :update do |page|
page.remove "financial_tran_offset_#{params[:ftof_id]}"
page.replace_html 'details', :partial => 'details', :locals => {:obj => @fire}
end
станет:
respond_to do |format|
format.html
format.js # <- this is what we're after
end
с файлом просмотра update.js.erb
:
$('#financial_tran_offset_<%= params[:ftof_id] %>').remove();
$('#details').replaceWith('<%= escape_javascript(render(:partial => 'details', :locals => {:obj => @fire})) %>');
update.js.erb
будет проанализирован ERb, обработан как JS, отправлен обратно клиенту через Ajax и eval'd.
Вы можете передавать все, что хотите, в эти шаблоны JS. В конце концов, это файлы ERb. Используйте <%= %>
и переменные экземпляра, как если бы вы использовали представления HTML / ERb. Если вы вызываете render
в ваших представлениях JS / ERb, оберните его escape_javascript
, чтобы HTML отображался правильно.
render :update
вызывает старые JavaScriptGenerator
вспомогательные методы для Prototype. Преобразование в jQuery довольно простое, поскольку они оба делают одно и то же: выбирают элемент DOM и манипулируют им.
Вот хорошая маленькая таблица перевода с типичными манипуляциями. Удалите вспомогательные методы Prototype из контроллера и поместите их аналог JQuery или JS в соответствующее представление JS / ERb:
Prototype jQuery/Javascript
in controller in JS/ERb view (xxxxxx.js.erb)
--------- -----------------
page.alert "message" alert('message');
page.hide "id" $('#id').hide();
page.insert_html \
:top, "id", "content" $('#id').prepend('content');
:bottom, "id", "content" $('#id').append('content');
:before, "id", "content" $('#id').before('content');
:after, "id", "content" $('#id').after('content');
page.redirect_to "url" window.location.href = 'url';
page.reload window.location.reload();
page.remove "id" $('#id').remove();
page.replace "id", "content" $('#id').replaceWith('content');
page.replace_html "id", "content" $('#id').html('content');
page.show "id" $('#id').show();
page.toggle "id" $('#id').toggle();
Не забывайте свои точки с запятой в каждой строке!