Rails - рендер: действие для целевого тега привязки?

Question

Я хочу использовать рендер так:

render :action => 'page#form'

Я тоже пробовал это:

render :template => 'site/page#form'

Это тоже не сработало. Форма на этой конкретной странице находится в самом низу, и если при отправке произойдут какие-либо ошибки, я бы не хотел, чтобы пользователь по умолчанию был в верхней части страницы. Мне также нужно использовать рендер (не перенаправление), потому что мне нужно сохранить объекты и их ошибки.

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

Answer 1

Поверьте, я нашел решение. Для тех, у кого возникла эта проблема, укажите форму следующим образом:

<%= form_tag '/page#form' do %>

Кажется, что решил проблему.

Answer 2

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

Прежде всего, абстрагируясь от Rails, каждый базовый HTML <form> имеет возможность добавить привязку к целевой странице, и чтобы это работало, вы в основном оставляете привязку в атрибуте 'action', например:

<form action="/contact#form" method="post">
  ...
</form>

Таким образом, после отправки ваш браузер будет использовать запрос /contact#form, который приведет вас прямо к указанной привязке.

Теперь нам нужно просто заставить rails генерировать наш тег формы правильным образом, как в примере выше. Это потребует от нас изменения нашего представления двумя возможными способами.

1. Если вы используете form_tag в своем представлении, используйте его так, как предложил bobthabuilda:

   <%= form_tag '/contact#form' do %>
   

   Все просто, вы просто указываете rails установить действие нашей формы на /contact#form

2. Если вы используете form_for, есть параметр :anchor, который входит в указанный :url, например:

   <%= form_for @message, 
        :url => contact_path(@message, :anchor => 'form') do |form| %>
   

   или как это (если вы полагаетесь на :action):

   <%= form_for(@message, 
        :url => { :action => "create" , :anchor => "form" }) do |form| %>
   

   Таким образом, rails создаст правильное действие для формы HTML и добавит наш якорь в конце этого.

Answer 3

Используйте JavaScript, чтобы переместить представление в нужное место. Я не знаю, как поступить иначе.

<script>
  window.location = window.location.href + "#form";
</script>

Не проверено, но я думаю, что это должно работать.

Answer 4

Используйте redirect_to, чтобы браузер получил заголовок для прокрутки до якоря:

redirect_to: action => 'page',: anchor => 'form'

Answer 5

Вы можете использовать ненавязчивый jQuery и атрибут данных.

Например, в моем приложении у меня есть большая форма с набором полей «адрес», в котором пользователь должен:

• напиши свой адрес и затем
• нажмите кнопку "проверить", чтобы отобразить небольшую карту Google, чтобы увидеть, является ли введенный адрес правильным.

Конечно, после того, как он нажал кнопку "Проверить", я хочу снова визуализировать форму, но с привязкой к этому набору полей адреса, где отображается карта.

Это мой .erb шаблон:

<fieldset id="address" data-preview="<%= params[:preview] ? true : false -%>">    
<legend>Write you address here, then check it</legend> 
  <div class="field"> 
    <%= f.text_field :address %>
    <input id="preview-button" type="submit" name="preview" value="check">
  </div>
 </fieldset>

Когда нажата кнопка проверки, она установит params[:preview]. В моем контроллере действие create выглядит так:

def create   
  @obj = current_user.objs.new(params[:obj]) 
  if params[:preview] 
    # geocoding code, and then:
    render action: "edit" 
  else
    #...
  end
end                           

Таким образом, редактирование действия будет выполнено с params[:preview], все еще определенным, и это установит для #address fieldset data-preview значение true. А именно, эта строка HTML будет отображаться:

<fieldset id="address" data-preview="true">

Теперь все, что мне нужно сделать, это извлечь эту информацию через javascript и, если data-preview равен true, переместить местоположение окна на якорь #address. Вот мой ненавязчивый код jQuery:

$(function() {
  var preview = $("#address").data('preview');
  if (preview == true){
    window.location = window.location.href + "#address";
  }; 
}); 

И это все!

Answer 6

Если вы используете JQuery, попробуйте создать условие if, которое применяется только после рендера, и сделайте следующее:

$('#anchor').get(0).scrollIntoView();

Answer 7

Я бы предложил использовать плагин проверки jQuerys. Вы даже можете реализовать свои собственные помощники форм, которые используют плагин проверки jquery, в зависимости от того, какие атрибуты объекта вам нужно проверить.

Конечно, это больше работы, но я верю, что это окупится в будущем.

Кроме этого - используйте ajaxified-представление и обрабатывайте сообщения об ошибках после получения ответа.