1

Necesito saber cómo puedo procesar los datos recogidos en un modal y luego actualizar el campo seleccionado.

Siendo más concreto: En una vista de mi app tengo un listado de trabajadores, el cual brinda la posibilidad de agregar uno nuevo, este proceso quiero hacerlo a través de un modal, una vez enviado el formulario se cargue sólo la lista de trabajadores.

Con ASP.Net MVC lo he hecho mediante microsoft.jquery.unobtrusive.ajax y me parece que con rails no debe ser complejo.

Estuve buscando en http://guides.rubyonrails.org/v5.0/working_with_javascript_in_rails.html donde aparece un ejemplo similar y he logrado que funcione en parte. Lo que necesito es lo siguiente:

  1. Que el modal se cierre al crear un trabajador satisfactoriamente, pues no lo hace
  2. Que me muestre los errores de validación en el modal que tampoco lo hace.
  3. Limpiar el formulario.

este es mi código: app/views/trabajadors/index.html.erb

 <h1>Trabajadores</h1>

<table class="ui blue table">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellidos</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody id = "trabajadores">
    <% @trabajadors.each do |trabajador| %>
      <tr>
        <td><%= trabajador.nombre %></td>
        <td><%= trabajador.apellidos %></td>
        <td>
          <a data-tooltip="Detalles del Trabajador" data-position="top right" href="<%= trabajador_path(trabajador) %>"><i class="big unhide icon"></i></a>
          <a data-tooltip="Editar Trabajador" data-position="top center" href="<%= edit_trabajador_path(trabajador) %>"><i class="big write icon"></i></a>
          <a data-tooltip="Eliminar Trabajador" data-position="top left" data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="<%= trabajador_path(trabajador) %>"><i class=" big remove icon"></i></a>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<button class="ui green button" id="nuevo">Nuevo Trabajador</button>

<div class="ui modal">
  <div class="header">Nuevo Trabajador</div>
  <div class="image content">    
    <%= form_for(@trabajador, remote: true, html: { class: "ui form" }) do |f| %>
      <% if @trabajador.errors.any? %>
      <div id="error_explanation">
      <h2><%= pluralize(@trabajador.errors.count, "error") %> prohibited this trabajador from being saved:</h2>

    <ul>
     <% @trabajador.errors.full_messages.each do |message| %>
      <li><%= message %></li>
     <% end %>
    </ul>
  </div>
  <% end %>

  <div class="field">
    <label>Nombre</label>
    <%= f.text_field :nombre %>
  </div>
  <div class="field">
    <label>Apellidos</label>
    <%= f.text_field :apellidos %>
  </div>     

</div>
  <div class="actions">
  <div class="ui black deny button">
  Cerrar
  </div>     
  <%= f.submit %>     
  <% end %>
</div>
</div>
</div>

<script>
  $('.ui.modal')
  .modal({
    closable: false,
    blurring: true
   })
  .modal('attach events', '#nuevo', 'show'
 );
</script>

app/views/trabajadors/_trabajador.html.erb

 <tr>
    <td><%= trabajador.nombre %></td>
    <td><%= trabajador.apellidos %></td>
    <td>
    <a data-tooltip="Detalles del Trabajador" data-position="top right" href="<%= trabajador_path(trabajador) %>"><i class="big unhide icon"></i></a>
    <a data-tooltip="Editar Trabajador" data-position="top center" href="<%= edit_trabajador_path(trabajador) %>"><i class="big write icon"></i></a>
    <a data-tooltip="Eliminar Trabajador" data-position="top left" data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="<%= trabajador_path(trabajador) %>"><i class=" big remove icon"></i></a>
  </tr>

app/controllers/trabajadors_controller.erb

def index
@trabajadors = Trabajador.all
@trabajador = Trabajador.new
end

def create
@trabajador = Trabajador.new(trabajador_params)

respond_to do |format|
  if @trabajador.save
    format.html { redirect_to @trabajador, notice: 'Trabajador was successfully created.' }
    format.js {}
    format.json { render :show, status: :created, location: @trabajador }
  else
    format.html { render :new }
    format.json { render json: @trabajador.errors, status: :unprocessable_entity }        
  end
end

end

app/views/trabajadors/create.js.erb

$("<%= escape_javascript(render @trabajador) %>").appendTo("#trabajadores");
4
  • 1
    no logro echarlo a andar eso es como ir a un mecánico sin el coche... habrá que llevarlo al mecánico de alguna manera, aunque sea con un grua. Por tanto ¿cuál es el código que no anda? ¿En qué falla? ¿Qué luz roja se enciende en el tablero?
    – A. Cedano
    el 24 may. 2017 a las 22:53
  • jaj tienes toda la razón amigo el 25 may. 2017 a las 3:10
  • A lo que se refiere @A.Cedano es que no podemos ayudarte si no agregas código, no hay nada concreto con lo que poder ayudarte. La idea es que pongas un ejemplo mínimo, completo y verificable el 25 may. 2017 a las 17:07
  • he editado mi pregunta y agregado el código, si pudieran revisar por favor el 5 jun. 2017 a las 20:08

1 respuesta 1

0

Te recomiendo que revises jquery. Para leer datos de un formulario, ej:

<form>
<input type="text" id="txtDato" name="txtDato" />
<button type="button">Crear</button>
</form>

Lees el valor del input asi: var dato1 = $("#txtDato").val();

Luego haces lo que necesites en javascript y para persistir los datos en el servidor usas ajax.

La pregunta es muy general por esto la respuesta también.

Espero que te guie

Revisa JQuery, Ajax en JQuery, básicamente lo resuelves con selectores y ajax.

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.