2009-02-25 14 views
12

¿Cuál es la forma más fácil y elegante de enviar automáticamente un formulario AJAX cuando se selecciona la opción de un cuadro desplegable? Estoy creando una página de administración donde el administrador puede modificar permisos de usuario (donde los "permisos" se almacenan como un entero), y me gustaría que el campo "permisos" sea un cuadro desplegable que se envíe y actualice automáticamente cuando el administrador hace clic en la opción que quiere que el usuario tenga.Rieles: enviar (a través de AJAX) cuando la opción desplegable hizo clic en

Aquí está la versión simplificada de lo que estoy viendo actualmente. Necesito saber la mejor manera de convertir esto a un formulario remoto que se envía automáticamente cuando se hace clic en una opción.

Siéntase libre de señalar cualquier sugerencia tangencial o cualquier otra cosa ... Soy relativamente nuevo en Rails, y solo estoy llegando al punto en el que puedo escribir código sin hacer referencia constante al trabajo de los demás.

<!-- This is the "index" view, by the way. --> 
<% for membership in @story.memberships %> 
    <% form_for membership do |f| %> 
    <%= f.select :permissions, [['none', 0], ['admin', 9]] %> 
    <% end %> 
<% end %> 

Respuesta

15

Hay un par de maneras de manejar esto. Ciertamente, el observar enfoque de campo es uno, pero también se puede utilizar un javascript simple o un remote_function hacerlo:

Aquí es el simple enfoque JS:

<% remote_form_for membership do |f| %> 
    <%= f.select :permissions, [['none', 0], ['admin', 9]], {}, :onchange => 'this.form.submit()' %> 
<% end %> 

La otra forma sería algo como esto, y evitarían el constructor de la forma (y esto puede tener un par de errores de sintaxis):

<%= select_tag(:permissions, [['none', 0], ['admin', 9]], {:onchange => "#{remote_function(:url => permissions_path(:story_id => story, 
      :with => "'permission='+value")}"}) 

personalmente prefiero la primera.

+0

Después de probar ambas soluciones, éste terminó trabajando mejor y más bonito que mira . ¡Gracias! –

+4

¿cuál es el primero o el segundo? – Angela

+1

@ takua108 ¿con cuál terminaste? –

4

Tres pasos!

  1. Haga su form_for a remote_form_for; agregar una identificación!
  2. Añadir un observe_field después de su Configurar select
  3. su observe_field a enviar su formulario

El último bit se ve algo como:

<%= observe_field "id_of_select", :function => "$('form_id').submit();" %> 
3

Aprenda a hacerlo sin los rieles con el marco de su elección. El uso de las etiquetas Rails para realizar AJAX puede realizar una tarea rápidamente, pero puede ser muy limitante cuando necesite cambiar aspectos específicos sobre cómo funciona la etiqueta.

Lee sobre estándares de la web y la forma de escribir Javascript discreta en los siguientes sitios: http://ajaxian.com/ http://www.alistapart.com/

Usted será capaz de crear interfaces de usuario, sorprendentes más flexibles al aprender cómo realizar AJAX sin rieles.

+0

Bienvenido a Stack. Debes esforzarte por proporcionar respuestas específicas a las preguntas, o puedes ser rechazado. Aunque estoy de acuerdo con usted, y también creo que mi solución this.form.onsubmit() anterior fue mejor que la que eligió el usuario, es mejor dar respuestas específicas. –

+0

Gracias Scott. Lo tendré en mente. Probablemente debería editar mi publicación para incluir muestras del estilo discreto. –

4

En Rails 3:

<%= form_for(membership, :remote => true) do |f| %>` 
    <%= f.select :permissions, [['none', 0], ['admin', 9]], {}, :onchange => 'this.form.submit();' %> 
<% end %> 

Nota que this.form.submit(); No es onsubmit. Y no olvides el punto y coma de Javascript.

1

estoy usando los carriles 5 & También estaba frente a la situación similar, pero en mi caso la respuesta dada por @ Scott no estaba presentando el formulario utilizando AJAX como se esperaba, aunque he añadido la opción remote: true a la forma (no lo hago tener el botón submit en el formulario).

Si alguien también se enfrenta al problema similar tratar de cambiar el código JS así-

<% form_for membership remote: true, id: '#member_form' do |f| %> 
    <%= f.select :permissions, [['none', 0], ['admin', 9]], onchange: '$("#member_form").trigger("submit");' %> 
<% end %> 

Espero que esto ayude ..

Cuestiones relacionadas