0

Quiero hacer un Toggle Switch en RoR

Mis versiones de ruby on rails son respectivamente:

ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [i386-mingw32]

y

rails -v
Rails 5.1.3

Creé un proyecto con scaffold

rails new comprobar
cd comprobar
rails generate scaffold Articulo nombre:string titulo:string contenido:text comprobar:boolean
rails db:migrate

Que se puede visualizar en github: https://github.com/rrg1459/comprobar


Estoy usando la gema bootstrap-switch-rails

NOTA: Si alguien tiene alguna otra gema y/o procedimiento en rails que me pueda servir, con gusto sigo su sugerencia.

Lo que he hecho hasta ahora es lo siguiente:

Siguiendo los pasos de la página: http://www.diogonunes.com/blog/bootstrap-switch-on-rails/

Copié la gema bootstrap-switch-rails a mi gemfile y otras dos más

gem 'bootstrap-switch-rails'
gem 'bootstrap3-rails', '~> 3.2'
gem 'bootstrap-sass', '~> 3.2.0'

Copié el respectivo js y style usando sass, tal y como indica la página referenciada y el código tal y como indica la página en el respectivo _form.html.erb

<% content_for :head do %>
  <script type="text/javascript">
  $(document).ready(function() {
    $('input:checkbox').bootstrapSwitch();
  });
  </script>
<% end %>

  <div class="field">
    <%= form.label :comprobar %>
    <%= form.check_box :comprobar,
    :data => { :size=>'small', 'on-color'=>'success', 'on-text'=>'YES', 'off-text'=>'NO' } %>
  </div>
0

2 respuestas 2

1

Hay dos problemas que te impiden utilizar correctamente la librería:

  1. Necesitas jQuery, por lo tanto instala jQuery en tu proyecto (recuerda que Rails 5.1 ya no tiene jQuery por defecto). Puedes hacerlo de muchas maneras, acá te muestro como hacerlo con la gema jquery-rails:

    Agrega la gema jquery-rails en tu Gemfile:

    gem 'jquery-rails'
    

    Instálala con Bundle:

    $ bundle install
    

    Agrégala en tu archivo application.js antes de bootstrap-switch"

    //= require jquery
    //= require jquery_ujs
    //= require bootstrap-switch
    
  2. Para utilizar content_for debes agregar el bloque yield para que el código sea incluido.

    Agrega el bloque yield :head en application.html.erb:

    <head>
      <title>Comprobar</title>
      <%= csrf_meta_tags %>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <%= yield :head %>
    </head>
    
9
  • @rrg1459 Te envié un pull request al repositorio que publicaste con los ajustes mencionados.
    – Gerry
    Commented el 28 ago. 2017 a las 14:51
  • Acepte el pull request, actualice la app y todavia no hace el toggle.
    – Developer
    Commented el 29 ago. 2017 a las 0:04
  • cd .. rmdir comprobar (borré la carpeta comprobar a través de windows) git clone https://github.com/rrg1459/comprobar.git (me cloné la app, para estar seguro de tener tus cambios) cd comprobar bundle install rails db:migrate rails s
    – Developer
    Commented el 29 ago. 2017 a las 6:11
  • @rrg1459 ¿Te muestra algún error en los logs del servidor o en la consola del navegador? ¿Pudiste abrir con éxito el link con el ejemplo que puse en mi comentario anterior?
    – Gerry
    Commented el 29 ago. 2017 a las 11:29
  • Articulo Load (0.0ms) SELECT "articulos".* FROM "articulos" Rendered articulos/index.html.erb within layouts/application (17.0ms) Completed 200 OK in 1605ms (Views: 1578.2ms | ActiveRecord: 0.0ms) Started GET "/articulos/new" for 127.0.0.1 at 2017-08-29 16:15:18 -0400 Processing by ArticulosController#new as HTML Rendering articulos/new.html.erb within layouts/application Rendered articulos/_form.html.erb (138.0ms) Rendered articulos/new.html.erb within layouts/application (158.0ms) Completed 200 OK in 331ms (Views: 312.2ms | ActiveRecord: 1.0ms)
    – Developer
    Commented el 29 ago. 2017 a las 20:14
0

Otra solución minimalista y sin código adicional sería agregar únicamente a app/assets/stylesheets/application.scss este código:

/*....................................................*/

$claro: #EEEED8;
$fondo: #0099E5;
$gris: #D3D3D3;
$oscuro: #8A8081;
$relleno: #000099;

input[type="checkbox"] {
  appearance: none;
  background-color: darken($claro, 2%);
  border: 1px solid $oscuro;
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px $gris;
  cursor: pointer;
  height: 14px;
  position: relative;
  transition: border .25s .15s,
              box-shadow .25s .3s,
              padding .25s;
  width: 33px;
  vertical-align: top;

  &:focus {
    outline: none;
  }

  &:after {
    background-color: $claro;
    border: 1px solid $oscuro;
    border-radius: 24px;
    box-shadow: inset 0 -3px 3px hsla(0,0%,0%,.025),
                0 1px 4px hsla(0,0%,0%,.15),
                0 4px 4px hsla(0,0%,0%,.1);
    content: '';
    display: block;
    height: 10px;
    left: 1px;
    position: absolute;
    right: 16px;
    top: 1px;
    transition: border .25s .15s,
                left .25s .1s,
                right .15s .175s;
  }
  &:checked {
    background-color: $fondo;
    border-color: $fondo;
    box-shadow: inset 0 0 0 13px $fondo;
    padding-left: 18px;
    transition: background-color .25,
                border .25s,
                box-shadow .25s,
                padding .25s .15s;

    &:after {
      border-color: $relleno;
      background-color: $relleno;
      left: 16px;
      right: 1px;
      transition: border .25s,
                  left .15s .25s,
                  right .25s .175s;
    }
  }
}

/*....................................................*/

NOTA: este cambio modifica automáticamente todos los check_box en la aplicación RoR.

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.