Kreiranje Rails Modala Korišćenjem Bootstrap-a

Umesto da u svojoj Rails aplikaciji napišete svoj JavaScript kod za rukovanje udaljenim modalima, mnogo je jednostavniji pristup da ga primenite pomoću Bootstrapa . U ovom uputstvu ćemo objasniti kako to efikasno uraditi.

Korak 1: Početno podešavanje

Dodajte gem 'bootstrap' i gem 'popperjs' u svoj Gemfile i pokrenite bundle install.
Nakon instaliranja gemova, ažurirajte application.js sledećim redosledom:

//= require jquery
//= require popper
//= require turbolinks
//= require bootstrap
//= require_tree.

Korak 2: Izmenite rasporede u prikazu

Uverite se da je ovaj prikaz delimičan. U njemu ćete imati sadržaj koji želite da prikažete u modalu.

_new.html.erb

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">x</button>
  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
  *Modal content comes here*
</div>
<div class="modal-footer">
  <button class="btn btn-primary">Save</button>
</div>

Moramo da definišemo mesto gde će se modalisti prikazivati:

index.html.erb

<%= link_to 'Add user', new_user_path,  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window', class: 'btn btn-primary btn-lg'}  %>
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

Remote koristi se da kaže jquery-ju da pošalje ovaj obrazac sa ajak-om, dok se data-toggle => "modal" koristi kako bi rekao našoj skripti da rukuje ovim obrascem kao modalni obrazac. <div> učitava delimično kao modalni prozor, a sa class = "modal hide fade" možete i modu dodati dodatni efekat fadea!Preostalo je samo postaviti modal kako želite.

Da bi sve ovo funkcionisalo, moramo dodati nekoliko JavaScript-a:

new.js.erb

$("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
$("#modal-window").modal();

Korak 3: Izmenite svoj kontroler

U kontroler dodajte blok response_to da biste mogli da koristite Ajax:

def new
  respond_to do |format|
    format.html
    format.js
  end
end

Korak 4: Uživajte!

Napokon smo stigli do kraja! Sada treba samo da kliknete na dugme „ Dodaj korisnika “ i pojavit će se lijep modal sa efektom blijeđenja! Jedino što bi moglo da ostane je da dodate neke testove modela i kontrolera , obavezno proverite kako započeti sa RSpec-om i FactoryGirl-om !

Ovo je naš konačni rezultat:

Hvala vam što ste ostali sa nama do kraja.

Ako želite da pročitate više o šinama, pretplatite se na naš bilten!