2010-01-15 24 views
23

Estoy mirando para utilizar render de este modo:Rieles - render: ¿acción para apuntar a la etiqueta de anclaje?

render :action => 'page#form' 

También probé esto:

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

eso no funcionó bien. El formulario en esta página en particular está en la parte inferior, y si ocurre algún error en el envío, detestaría que el usuario esté predeterminado en la parte superior de la página. También necesito usar render (no redirigir) porque necesito retener los objetos y sus errores.

¿Cómo puedo renderizar para dirigirme a una etiqueta de ancla específica?

Respuesta

27

Creo que he encontrado una solución. Para cualquier otra persona que tenga este problema, señale el formulario como sigue:

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

Parece que se ha resuelto el problema.

+0

Busqué en Google esto, funcionó muy bien, ¡gracias! –

+0

¡Muchas gracias! ¿Cómo lo encontraste? – makaroni4

+0

Bien, gracias. No es muy elegante, ¡pero funciona genial! – mdrozdziel

4

Uso redirect_to por lo que el navegador recibe el heads-up para desplazarse hasta el ancla:

redirect_to: action => 'Página',: ancla => 'forma'

+3

Leer de nuevo ... No puedo usar la redirección. Necesito variables para persistir. – ground5hark

+0

Hay una pregunta anterior que incluye una implementación de clon para persistir el objeto (s), incluidos los errores, a través de una redirección: http://stackoverflow.com/questions/1536428/rails-validation-over-redirect – Eric

+0

Esto fue una buena redirigir para anchor_tag pero no muestra las validaciones de error. Lo que funciona para mí fue poner '' url => {: action => "create",: anchor => "form"} 'en el formulario. En mi caso estaba usando la forma_ simple y puse esto: '<% = simple_form_for @object,: url => {: acción =>" crear ",: anchor =>" contacto "},: html => {: clase = > 'forma-horizontal'} do | f | %> ' – rld

6

Uso JavaScript para mover el ver hacia el lugar correcto. No hay manera de que sepa hacer otra cosa.

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

No probado, pero creo que esto debería funcionar.

0

Sugeriría utilizar jQuerys validate plugin. Incluso podría implementar sus propios ayudantes de formularios que usan el complemento jquery validate dependiendo de qué atributos de objeto necesita validar.

Por supuesto que es más trabajo, pero creo que valdría la pena en el futuro.

Aparte de eso, utilice un mensaje de envío y mensajes de error ajaxified después de recibir la respuesta.

2

Puede usar jQuery discreto y un atributo de datos.

Por ejemplo en mi aplicación tengo una forma grande con, entre otros, una "dirección" de campos en los que el usuario debe:

  • escribir su dirección y luego
  • conectó un "cheque" para mostrar un pequeño mapa de google para ver si la dirección que ingresó es correcta.

Después de que él es el botón "verificar" quiero volver a presentar el formulario pero con el ancor a este campo de dirección, donde se muestra el mapa.

Ésta 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 golpea el botón de verificación, se establecerá params[:preview].En mi controlador, la acción create se ve así:

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

Así que la acción de edición se debe reproducir con params[:preview] todavía definido, y esto va a establecer el #address de campos de datos de vista previa a la verdadera. A saber, se representará esta línea de HTML:

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

Ahora todo lo que tiene que hacer es obtener esa información a través de javascript y si es data-previewtrue ventana de movimiento a la ubicación #address ancla. 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 todo!

20

Breve resumen de la respuesta de bobthabuilda, para aquellos que no son tan brillantes como yo, que recientemente buscaron en Google esa pregunta y parece que no pueden entender el truco.

En primer lugar, haciendo abstracción de los carriles, cada HTML básico <form> tiene la opción de agregar el ancla a la página de destino, y para que esto funcione es básicamente dejar el ancla en el atributo 'action', así:

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

De esta forma, al enviarlo, su navegador utilizará una solicitud /contact#form, que lo llevará directamente al anclaje especificado.

Lo que tenemos que 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 vista de dos maneras posibles.

  1. Si utiliza form_tag en su opinión, usarlo de la manera bobthabuilda sugirió:

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

    Tan simple como eso, sólo cuentan los carriles para establecer la acción de nuestra forma de /contact#form

  2. Si usa form_for, existe un parámetro :anchor, que se especifica en :url de esta manera:

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

    o así (si se basan en :action):

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

    De esta manera crearán carriles de la acción correcta para el formulario HTML, y se sumará el ancla al final de ella después.

+0

gracias de contrabandistaFlynn! – rld

Cuestiones relacionadas