Are you fed up with displaying flash notifications like this?
And want to convert to display like this:
So gem toastr-rails is for you!
1. General introduction
toastr is a Javascript library developed based on Jquery and is built to serve the display of messages in a more beautiful and customizable way. In addition to the toastr-rails gem used in Rails, you can also find toast on the Bootstrap 4 library, but this gem was built to better support Rails.
The current version of gem toastr-rails is 2.0.1.
You can see the demo of this gem here: https://codeseven.github.io/toastr/demo.html
2. Usage example
1. Install Jquery on Rails
More
1 2 | gem <span class="token string">'jquery-rails'</span> |
into Gemfile.
More
1 2 3 | <span class="token comment">//= require jquery</span> <span class="token comment">//= require jquery_ujs</span> |
go to application.js. If you are using Rails 5.1+ then just add the line //= require jquery to this file.
2. Install gem toastr-rails
More
1 2 | gem <span class="token string">'toastr-rails'</span> |
into Gemfile.
More
1 2 | <span class="token comment">//= require toastr</span> |
go to application.js.
And
1 2 | *= require toastr |
go to application.css.
3. Create a helper
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token comment"># app/helpers/application_helper.rb</span> <span class="token keyword">def</span> custom_bootstrap_flash flash_messages <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> flash <span class="token punctuation">.</span> <span class="token keyword">each</span> <span class="token keyword">do</span> <span class="token operator">|</span> type <span class="token punctuation">,</span> message <span class="token operator">|</span> type <span class="token operator">=</span> <span class="token string">'success'</span> <span class="token keyword">if</span> type <span class="token operator">==</span> <span class="token string">'notice'</span> type <span class="token operator">=</span> <span class="token string">'error'</span> <span class="token keyword">if</span> type <span class="token operator">==</span> <span class="token string">'alert'</span> text <span class="token operator">=</span> <span class="token string">"<script>toastr. <span class="token interpolation"><span class="token delimiter tag">#{</span> type <span class="token delimiter tag">}</span></span> (' <span class="token interpolation"><span class="token delimiter tag">#{</span> message <span class="token delimiter tag">}</span></span> ');</script>"</span> flash_messages <span class="token operator"><</span> <span class="token operator"><</span> text <span class="token punctuation">.</span> html_safe <span class="token keyword">if</span> message <span class="token keyword">end</span> flash_messages <span class="token punctuation">.</span> <span class="token function">join</span> <span class="token punctuation">(</span> <span class="token string">"n"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> html_safe <span class="token keyword">end</span> |
And add the following line to the layout, just below the js include tag
1 2 3 | <%= javascript_include_tag "application" %> <%= custom_bootstrap_flash %> |
4. Use
After having the other helper, using toast on the controller is no different from using flash, we just need to use simple as follows:
1 2 | flash <span class="token punctuation">[</span> <span class="token symbol">:success</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"Đăng nhập thành công"</span> |
If used in a JS file, gem toastr-rails already supports the following functions:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Display an info toast with no title</span> toastr <span class="token punctuation">.</span> <span class="token function">info</span> <span class="token punctuation">(</span> <span class="token string">'Are you the 6 fingered man?'</span> <span class="token punctuation">)</span> <span class="token comment">// Display a warning toast, with no title</span> toastr <span class="token punctuation">.</span> <span class="token function">warning</span> <span class="token punctuation">(</span> <span class="token string">'My name is Inigo Montoya. You Killed my father, prepare to die!'</span> <span class="token punctuation">)</span> <span class="token comment">// Display a success toast, with a title</span> toastr <span class="token punctuation">.</span> <span class="token function">success</span> <span class="token punctuation">(</span> <span class="token string">'Have fun storming the castle!'</span> <span class="token punctuation">,</span> <span class="token string">'Miracle Max Says'</span> <span class="token punctuation">)</span> <span class="token comment">// Display an error toast, with a title</span> toastr <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> <span class="token string">'I do not think that word means what you tink it means.'</span> <span class="token punctuation">,</span> <span class="token string">'Inconceivable!'</span> <span class="token punctuation">)</span> |
5. Customize
In addition to the display, we can change a few parameters for toastr. We can change these parameters by editing the object toastr.options in the js file (in the following example is the application.js file but you can also change it as required on your application)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token comment">// application.js</span> toastr <span class="token punctuation">.</span> options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// thay đổi nội dung hiển thị trên nút close, vd như "Đóng"</span> <span class="token string">"closeButton"</span> <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token comment">// thay đổi vị trí của notification</span> <span class="token string">"positionClass"</span> <span class="token punctuation">:</span> <span class="token string">"toast-top-right"</span> <span class="token punctuation">,</span> <span class="token comment">// Các thông báo có hiển thị cùng 1 lúc hay khi cái sau xuất hiện sẽ ẩn cái trước</span> <span class="token string">"preventDuplicates"</span> <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token comment">// action khi click vào thông báo</span> <span class="token string">"onclick"</span> <span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token comment">// thời gian, hiệu ứng hiển thị và ẩn</span> <span class="token string">"showDuration"</span> <span class="token punctuation">:</span> <span class="token string">"300"</span> <span class="token punctuation">,</span> <span class="token string">"hideDuration"</span> <span class="token punctuation">:</span> <span class="token string">"1000"</span> <span class="token punctuation">,</span> <span class="token string">"timeOut"</span> <span class="token punctuation">:</span> <span class="token string">"5000"</span> <span class="token punctuation">,</span> <span class="token string">"extendedTimeOut"</span> <span class="token punctuation">:</span> <span class="token string">"1000"</span> <span class="token punctuation">,</span> <span class="token string">"showEasing"</span> <span class="token punctuation">:</span> <span class="token string">"swing"</span> <span class="token punctuation">,</span> <span class="token string">"hideEasing"</span> <span class="token punctuation">:</span> <span class="token string">"linear"</span> <span class="token punctuation">,</span> <span class="token string">"showMethod"</span> <span class="token punctuation">:</span> <span class="token string">"fadeIn"</span> <span class="token punctuation">,</span> <span class="token string">"hideMethod"</span> <span class="token punctuation">:</span> <span class="token string">"fadeOut"</span> <span class="token punctuation">}</span> |