From https://github.com/ncri/ajaxify_rails
Automatically makes your app load content in the background via ajax.
It works by turning all internal links into Ajax links that trigger an update of the page’s content area.
Form submissions are also turned into ajax requests.
Add this to gem file
gem 'ajaxify_rails'
Run bundle install
Call
Ajaxify.init()
in dom:loaded.
By default, the content is updated inside a element with id “main”. This can be customizable by setting “content_container” to the id of the element which is to be updated on ajaxified request.
In our app “ajaxify_div” is the content_container.
Page title is supported by default.
Loader can be customizable with our own css to the element “ajaxify_loader”.
Also loader is optional and it can be disabled by setting “display_loader” to false while initializing or by setting classes “display_loader” or “no_display_loader”
Flash messages are supported by default. If flash message of types other than ‘notice’ is used then it should be specified as “flash_types” while initializing.
before_load
Any updates to be done before sending the request can be done in “before_load” event.
In our case we load controller specific assets for ajaxified requests on “before_load” event.
content_loaded
Any updates to be made after the content is loaded can be done in “content_loaded” event.
In our app we update the notification count and set the navigation links color in “content_loaded” event.
flash_displayed
This event is triggered after a flash message is displayed.
This accepts flash_type as parameter.
In our app we slide up the flash message for ajaxified requests inside “flash_displayed” event.
Other events
There are other events such as content_inserted and load_error which we dont use in our app currently.
Scrolling
Ajaxify scrolls to the top on every request.
This can be turned off by setting “scroll_to_top” to false while initializing.
Scrolling of individual links can also be turned off or on by setting class “scroll_to_top” or “no_scroll_to_top”
Ajaxification can be temporarily turned off for some pages using Ajaxify.activate(false) and can be turned on using Ajaxify.activate() (This needs to be called before dom ready.
Also you can set the “active” option to false while initializing.
Since we don’t need all the links to be ajaxified, we have customized the gem to ajaxify only the links with class “ajaxify”
The gem by default requires, flash type to be the id of the element which holds the flash message. We have customized it to have our own id.
Include this in gem file
gem 'gon'
Run bundle install
In Layout add
include_gon(:init => true)
In controller
gon.variable_name = value
In js use it
gon.variable_name
1. We store the controller name for loading controller specific assets.
2. We store the activity count to update the notifications count on every ajaxified request.
3. Page title and sub page title to highlight the selected page/subpage link.
Note This needs to be initialized for every request so adding
include_gon(:init => true)
in ajaxify_application layout.
http://github.hubspot.com/pace/
By default pace gem displays the progress bar for page load requests, ajax requests, ajaxified requests as well as for the elements which we can specify (default element is ‘body’ tag).
Api’s: start, restart, stop, track, ignore
Events: start, restart, stop, done, hide
In our app we show this kind of a loader only for ajaxified requests and for requests where we navigate through review cycles and for navigation inside review’s page.
So we disable pace loader for page load, ajax requests.
In layout
javascript_tag("window.paceOptions = { restartOnRequestAfter: false, startOnPageLoad: false, restartOnPushState: false }")
Pace for ajaxified requests begins on push state and since ajaxify rails takes some time to insert url using push state there exists a lag. To avoid this lag we disable pace for ajaxified requests as well and manually call
Pace.restart()
in necessary places.
We do this generically for ajaxified requests by observing click on link’s and form’s with class “ajaxify”, inside which we call
Pace.restart();
Other places, if we need to display this kind of progress bar call
Pace.restart();