1

Buenas tardes, necesito de vuestra ayuda.

Necesito mostrar un mensaje de éxito o rechazo, una vez insertado un objeto en BD. Hasta el momento solo lo he logrado actualizando la ventana del navegador, no automáticamente (como debiera ser), una vez gatillado el evento submit.

cotizacions_controller.rb

def create
  @cotizacion = Cotizacion.new(cotizacion_params)

  if @cotizacion.save
    flash[:success] = "Su tasación esta siendo procesada"
  else
    respond_to do |format|
      format.html { render :new }
      format.json { render json: @cotizacion.errors, status: :unprocessable_entity }
    end
  end
end

_header.html.erb

<header>
  <div class="header-content">
    <div class="header-content-inner">
      <h1>Negocia tu Auto</h1>
      <% flash.each do |key, value| %>
        <div class="alert alert-success" role="alert">
          <%= value %>
        </div>
      <% end %>

      <%= render :partial =>'cotizacions/form' , locals: { cotizacion: @cotizacion } %>
    </div>
  </div>  
</header>

_form.html.erb

<%= form_with(model: cotizacion, scope: :cotizacion) do |form| %>
  <div class="container">
    <div class="row">
      <div class="col-md-2">
        <div class="field">
          <%= form.text_field :patente, 
                              placeholder: "Patente", 
                              id: :car_patente, 
                              class: "form-control" %>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-inline">
          <%= form.select :marca, 
                          options_for_select([["SUBARU", "t"], ["KIA", "s"]], id: :car_marca), 
                          prompt: "Marca", 
                          class: "combobox form-control",
                          name: "inline"%>
        </div> 
      </div>
      <div class="col-md-2">
        <div class="field">
          <%= form.text_field :modelo, 
                              id: :car_modelo, 
                              placeholder: "Modelo Ej: Yaris, i10",
                              class: "form-control" %>
        </div>
      </div>
    </div>

    <!-- ... -->

    <div class="row">
      <div class="col-md-12 col-md-offset">
        <div class="actions">
          <%= form.submit  class: 'btn btn-success btn-lg', value: 'Tasar su Vehículo' %>
        </div>
      </div>
    </div>
  </div>
<% end %>

Lo esperado como imagen:

introducir la descripción de la imagen aquí

La idea una vez mostrado el mensaje, es volver a mostrar la página de inicio, después de 1 segundo, sin el mensaje y el formulario limpio.

Estructura de proyecto es la siguiente.

Estructura Proyecto

creatives/index.html.erb

       <%= render 'navbar' %>
       <%= render 'header' %>
       <%= render 'services' %>
       <%= render 'portfolio' %>
       <%= render 'call_to_action' %>
       <%= render 'contact' %>

Archivo cotizacions/new.html.erb

               <h1>New Cotizacion</h1>

              <%= render 'form', cotizacion: @cotizacion %>

              <%= link_to 'Back', cotizacions_path %>

Archivo routes.rb

           Rails.application.routes.draw do
              get 'creatives/index'
              root :to => 'creatives#index'
              resources :cotizacions
              post 'creatives/index', to: 'cotizacions#create' 
            end

Nuevo comportamiento introducir la descripción de la imagen aquí

Archivo log

Started POST "/creatives/index" for 127.0.0.1 at 2017-08-01 10:00:45 -0400 Processing by CotizacionsController#create as JS Parameters: {"utf8"=>"✓", "authenticity_token"=>"6Y0r+8y7M5DJUeF7Gt2CziIEpMef4nLN8s6bvRA9jr+CHN2gRMGFaEzVgX/UnVc2YsCtNCH1DEs6cfi71r3PrA==", "cotizacion"=>{"patente"=>"congetenriutes", "marca"=>"", "modelo"=>"", "kilometraje"=>"", "correo"=>"", "telefono"=>"", "abs"=>"0", "aire_acondicionado"=>"0", "airbag"=>"0", "velocidad_crucero"=>"0"}, "commit"=>"Tasar su Vehículo"} [1m[35m (0.1ms)[0m [1m[36mbegin transaction[0m [1m[35mSQL (0.4ms)[0m [1m[32mINSERT INTO "cotizacions" ("patente", "marca", "modelo", "kilometraje", "correo", "telefono", "abs", "aire_acondicionado", "airbag", "velocidad_crucero", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)[0m [["patente", "congetenriutes"], ["marca", ""], ["modelo", ""], ["kilometraje", ""], ["correo", ""], ["telefono", ""], ["abs", "f"], ["aire_acondicionado", "f"], ["airbag", "f"], ["velocidad_crucero", "f"], ["created_at", "2017-08-01 14:00:45.399154"], ["updated_at", "2017-08-01 14:00:45.399154"]] [1m[35m (1.7ms)[0m [1m[36mcommit transaction[0m Redirected to http://localhost:3000/creatives/index Completed 200 OK in 29ms (ActiveRecord: 3.1ms)

Started GET "/" for 127.0.0.1 at 2017-08-01 10:00:47 -0400 Processing by CreativesController#index as HTML Rendering creatives/index.html.erb within layouts/creative Rendered creatives/_navbar.html.erb (0.3ms) Rendered cotizacions/_form.html.erb (2.6ms) Rendered creatives/_header.html.erb (4.3ms) Rendered creatives/_services.html.erb (0.4ms) Rendered creatives/_portfolio.html.erb (4.8ms) Rendered creatives/_call_to_action.html.erb (0.3ms) Rendered creatives/_contact.html.erb (0.4ms) Rendered creatives/index.html.erb within layouts/creative (18.2ms) Completed 200 OK in 50ms (Views: 48.8ms | ActiveRecord: 0.0ms)

1 respuesta 1

1

Hasta el momento solo lo he logrado actualizando la ventana del navegador, ...

Al utilizar form_with, estás enviando la forma con ajax, sin embargo la acción create del controlador no está respondiendo al formato indicado después de guardar exitosamente una cotización (i.e. if @cotizacion.save).

Esto genera un error en tu página (el cual debes poder ver en el log del servidor) y no se genera ninguna acción que pueda llamar al mensaje flash (i.e. no hay render ni respond_to, solo un error), por lo que no se muestra el mensaje flash (incluso después de utilizar flash.now).

Si tu interés es seguir utilizando ajax entonces debes cambiar como muestras los mensajes flash, pues con ajax solo actualizas una parte de la página (i.e. deberías hacerlo manualmente).

Sin embargo no creo que estés buscando utilizar ajax, así que te recomiendo utilizar el atributo local en tu forma para evitarlo:

<%= form_with(model: cotizacion, scope: :cotizacion, local: true) do |form| %>

Y la acción create del controlador utiliza redirect_to1:

def create
  @cotizacion = Cotizacion.new(cotizacion_params)

  if @cotizacion.save
    flash[:success] = "Su tasación esta siendo procesada"
    redirect_to cotizacions_path
  else
    respond_to do |format|
      format.html { render :new }
      format.json { render json: @cotizacion.errors, status: :unprocessable_entity }
    end
  end
end

Donde cotizacions_path debe coincidir con la ruta de la acción index.

1 Se mantiene el uso de flash debido a que se incorporó un redirect_to en lugar de render.

La idea una vez mostrado el mensaje, es volver a mostrar la página de inicio, después de 1 segundo, sin el mensaje y el formulario limpio.

Para esto puedes utilizar JavaScript/JQuery, que te permitirán esconder el mensaje de error después de un tiempo determinado; por ejemplo, podrías hacer lo siguiente para que esto suceda con cualquier mensaje (o mensajes) que recibas por medio de flash:

_header.html.erb

<header>
  <div class="header-content">
    <div class="header-content-inner">
      <h1>Negocia tu Auto</h1>
      <div id="error">
        <% flash.each do |key, value| %>
          <div class="alert alert-success" role="alert">
            <%= value %>
          </div>
        <% end %>
      </div>

      <%= render :partial =>'cotizacions/form' , locals: { cotizacion: @cotizacion } %>
    </div>
  </div>  
</header>

<script type="text/javascript">
  $(document).ready(function() {
    setTimeout(function() {
      $('#error').animate({ height: 0, opacity: 0 }, 'slow');
    }, 1000);
   });
</script>

Se agregó un div adicional para encapsular el mensaje (o mensajes) de flash, al cual haces referencia en el script (i.e. $('#error')) para ocultarlo después del tiempo definido (i.e. 1000).


flash vs flash.now

Con flash se mantiene el valor asignado hasta la siguiente petición, por lo tanto se recomienda su uso previo a un redirect_to; por ejemplo:

flash[:success] = "Su tasación esta siendo procesada"
redirect_to cotizacions_path

En cambio, flash.now solo muestra el valor en la petición actual (después de un render), eliminándolo de la siguiente petición, por lo tanto funciona únicamente tras utilizar render, por ejemplo:

flash.now[:success] = "Su tasación esta siendo procesada"
render :index

Es importante destacar que con flash también se tiene el valor disponible en la petición actual (e.g. después de hacer render) pero el mensaje no desaparecerá en la siguiente petición.

13
  • realice lo indicado, pero no tuve éxito, de echo al actualizar la pagina ahora, el msje ("Su tasación esta siendo procesada" no se muestra. Commented el 31 jul. 2017 a las 23:14
  • @SebastianCamposDavila ¿Podrías mostrar el código de create.html.erb?
    – Gerry
    Commented el 1 ago. 2017 a las 0:06
  • Hola @Gerry, no tengo un archivo create.html.erb, te adjunto la estructura del proyecto, además del código que pienso solicitas. Gracias! Commented el 1 ago. 2017 a las 13:06
  • @SebastianCamposDavila Ya vi el problema, en tu caso particular no es debido al uso de flash, se debe al uso de form_with. Revisa la pregunta actualizada para más detalle.
    – Gerry
    Commented el 1 ago. 2017 a las 13:18
  • @SebastianCamposDavila También he agregado una solución para ocultar el mensaje después de 1 segundo; mira la respuesta actualizada.
    – Gerry
    Commented el 1 ago. 2017 a las 13:42

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.