About Build Status Dependency Status Code Climate Coverage Status

The project defines a collection of widgets to be used inside views. It also contains some js files to provide additional behavior for html elemets, created by those widgets. Both helpers and js are compatible with Twitter Bootstrap framework.


Add this line to your application's Gemfile: Ruby gem 'rails-bootstrap-widgets' And then execute: $ bundle Or install it yourself as: Ruby $ gem install rails-bootstrap-widgets

Available widgets

List widgets

This group consists of two widgets to be used in views that contain items lists.

pagination_widget (helper method)

pagination_widget(items, options = {})

The widget simply wraps pager (from the will-paginate gem) into the <aside> tag.


pagination_widget @items, class: 'span4'

This will create Html <aside class="span4"> <!-- Standard result of 'will_paginate(@items, inner_window: 0, outer_window: 0)' call --> </aside>

filters_widget (helper method)

filters_widget(items, options = {})

The widgets create html for filtering, ordering and paging a list of items. Provided html will include:

  1. Input field to select filter from those are available
  2. Input field to select order from those are available
  3. (Hidden) button to reset filter values
  4. Button to reload the page with new filter values
  5. Items pager

This html code should provide basic functionality without js support.

If js support is turned on in a client's browser, jQuery method will show reset button (js required) and hide reload button. It also makes current page to be updated authomatically after new filter or ordering is selected, or reset button clicked.


filters_widget (
  filters: { published: :Published, unpublished: :Unpublished}, # list of filters to select from in a format { key: :name }
  filter: 'published',                                          # key of the current filter to apply to items
  orders: { tree: :Tree, feed: :Feed },                         # list of types of items ordering to select from
  order: 'tree'                                                 # key of the current order type

This will provide html: ```HTML


Filters js support

The module adds file filters.js.coffee to app/assets/js/ to authomatically reload current page after new filter or ordering selected by a user.

When current page is reloaded:

  1. Filters reload button is removed (reloading became authomatic instead)
  2. Filters reset button is added (it clears both filter and order field and reload the page with no filter|order set. They can be set by default within a controller)
  3. Adds reloading the page on selecting new input field value (filter or order)

Modal widgets and js

modal_form_widget (helper method)

modal_form_widget(options = {}, &block)

The widget puts a list of fields (inputs, selectors etc.) into a modal form window (presented by <form id='modal' class='modal fade'...>)


modal_form_widget (
  title: 'modal window title',              # required
  action: 'path to corresponding route',    # required
  method: 'request method for the form',    # "post" by default, "post", "get", "put" or "delete" extected
  button: 'text on the submit button',      # I18n.t("buttons.submit") by default
  cancel: 'text on the cancel form button'  # I18n.t("buttons.cancel") by default
) do
  "" # html code of form fields


modal_form_widget(title: 'Title', button: 'Button', method: :put, action: '/some_addr', cancel: "Cancel") { "content" }

This will create ```Html

### modal_view_widget (helper method)
modal_view_widget(options = {}, &block)

The widget puts html code into a modal window (presented by <div id='modal' class='modal fade'>)


modal_view_widget (
  title: 'modal window title',              # required
  href: 'path for redirection to details',  # required
  redirect: true|false,                     # whether redirect button should be shown in the modal window footer (true by default),
  button: 'text on the redirect button',    # I18n.t("buttons.details") by default
  cancel: 'text on the cancel form button'  # I18n.t("buttons.cancel") by default
) do
  "" # modal window's html content


modal_view_widget(title: 'Title', button: 'Button', href: '/some_addr', cancel: "Cancel") { "content" }

This will create ```Html


showModal (js function)

showModal(href, template, width = nil)

Provides jQuery method "show_modal" to download and open modal window via ajax.


href - path to corresponding ajax request (required).

When modal window is loaded, any link with selected href and data-remote='true' attribute is converted to modal window call. Direct links (without data-remote) remain unchanged.

Before another modal window is loaded, the calls are reverted back to ajax links. Next time the modal should be downloaded by ajax again. To prevent excess downloading, use http request caching (see RailsCast episode #321 for example).

template - path to modal window template (required).

This template will be rendered and incerted by ajax to html - before the closing </body> tag.

Before another modal window is loaded, previous modal window is removed. Therefore at any given time the page will contain no more than one modal window

width - width in pixels for the modal link. If not set, the default bootstrap modal window is rendered.


In the app/views/posts/show.js.coffee you could call: jQuery showModal('<%= post_path(@item) %>', "<%= j render 'modal/show' %>")


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request


This project rocks and uses MIT-LICENSE.