ruby on rails - how - Rails-render: action to target anchor tag?
render json rails (6)
Breve resumen de la respuesta de bobthabuilda, para aquellas personas no tan brillantes como yo, que recientemente buscaron en Google y no parecen entender el problema.
En primer lugar, al abstraer de Rails, cada <form>
HTML básico tiene una opción para agregar un ancla a la página de destino, y para que esto funcione, básicamente dejas el ancla en el atributo ''action''
, como esto:
<form action="/contact#form" method="post">
...
</form>
De esa manera, al enviar, su navegador usará una solicitud de /contact#form
, que lo lanzará directamente al ancla especificada.
Lo que debemos hacer ahora es simplemente hacer que los rieles generen nuestra etiqueta de formulario de la manera correcta, como en el ejemplo anterior. Esto requerirá que modifiquemos nuestra visión de dos maneras posibles.
Si usa
form_tag
en su vista, utilícelo de la manera que bobthabuilda sugirió:<%= form_tag ''/contact#form'' do %>
Tan simple como eso, simplemente le dice a Rails que establezca la acción de nuestro formulario en
/contact#form
Si usa
form_for
, hay un parámetro:anchor
, que se especifica en:url
así:<%= form_for @message, :url => contact_path(@message, :anchor => ''form'') do |form| %>
o así (si confías en
:action
):<%= form_for(@message, :url => { :action => "create" , :anchor => "form" }) do |form| %>
De esta manera, Rails creará la acción correcta para el formulario HTML y agregará nuestro ancla al final de la misma.
Estoy buscando usar el render como tal:
render :action => ''page#form''
También probé esto:
render :template => ''site/page#form''
Eso tampoco funcionó. El formulario en esta página en particular se encuentra en la parte inferior, y si ocurre algún error en el envío, odiaría que el usuario esté predeterminado en la parte superior de la página. También necesito usar render (no redireccionar) porque necesito conservar los objetos y sus errores.
¿Cómo puedo renderizar para apuntar a una etiqueta de anclaje específica?
Creo que encontré una solución. Para cualquier persona que tenga este problema, señale el formulario así:
<%= form_tag ''/page#form'' do %>
Parece haber resuelto el problema.
Puede utilizar jQuery discreta y un atributo de datos.
Por ejemplo, en mi aplicación tengo un formulario grande con, entre otros, un campo de "dirección" en el que el usuario debe:
- escribe su dirección y luego
- presione el botón "marcar" para mostrar un pequeño mapa de Google para ver si la dirección que ingresó es correcta.
Por supuesto, después de él, está el botón "verificar". Quiero volver a mostrar el formulario, pero con el ancor de este campo de campo de dirección, donde se muestra el mapa.
Esta es mi plantilla .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>
Cuando se pulsa el botón de verificación, se configurarán los params[:preview]
. En mi controlador, la acción create
ve así:
def create @obj = current_user.objs.new(params[:obj]) if params[:preview] # geocoding code, and then: render action: "edit" else #... end end
Por lo tanto, la edición de la acción se representará con los params[:preview]
aún definidos, y esto establecerá la vista previa de datos del conjunto de campos de dirección en verdadero. A saber, esta línea de HTML será renderizada:
<fieldset id="address" data-preview="true">
Ahora todo lo que tengo que hacer es recuperar esa información a través de javascript y si data-preview
es true
mueva la ubicación de la ventana al #address
anclaje de dirección. Aquí está mi código jQuery discreto:
$(function() { var preview = $("#address").data(''preview''); if (preview == true){ window.location = window.location.href + "#address"; }; });
¡Y eso es!
Usa JavaScript para mover la vista al lugar correcto. No hay manera de que sepa hacer lo contrario.
<script>
window.location = window.location.href + "#form";
</script>
Sin probar, pero creo que esto debería funcionar.
Use redirect_to para que el navegador obtenga los heads-up para desplazarse hasta el ancla:
redirect_to: action => ''page'',: anchor => ''form''
Yo sugeriría usar el complemento de validación de jQuerys. Incluso podría implementar sus propios ayudantes de formularios que usan el complemento de validación de jquery, dependiendo de los atributos de objeto que necesite validar.
Por supuesto que es más trabajo, pero creo que valdría la pena en el futuro.
Aparte de eso, use el envío ajaxified y procese los mensajes de error después de recibir la respuesta.