AuditWiki

Edit the page and hit Save. See syntax for Wiki syntax. Please edit the page only if you can improve it. If you want to test some things, learn to make your first steps on the playground.

====== Ajaxification App - Rails ======

==== ajaxify-rails Gem ====

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.

=== Usage ===

Add this to gem file

<code>
gem 'ajaxify_rails'
</code>

Run bundle install

Call <code> Ajaxify.init() </code>  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.

=== Events ===

**before_load**

Any updates to be done before sending the request can be done in “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.

For example:

<code>
jQuery(document).on('ajaxify:content_loaded', function(event, data, status, jqXHR, url){
      //Highlights the respective tab.
      highLightSelectedMainNavLink(gon.controller_name);
      
      //Highlight the respective sub page and display sub page title.
      if(gon.sub_page_title != undefined){
        jQuery('#pages_titles').html(gon.sub_page_title.toUpperCase());
        highlightSelectedPage('label_container', gon.selected_page_label);
      }

//Remove search from header for unwanted pages.
      if(gon.show_header_search != true){
        jQuery("#header_search_container").html("");
      }
      
      //Updates the activity count for ajaxified requests.
      updateActivityCount(gon.activity_count);
    });
</code>

**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.

For example:

<code>
jQuery(document).on('ajaxify:flash_displayed', function(event, flash_type){
      if(flash_type != undefined){
        flash_timer = setTimeout("Effect.SlideUp('flash_"+flash_type+"_content')", 5000);
      }
    });
</code>

**Other events**

There are other events such as content_inserted and load_error which we dont use in our app currently.

=== Other Features ===

**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”

=== Turn off and turn on ajaxification ===

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.

=== Internal customization to suit our requirement. ===

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.

=== Asset Expiry ===

Configured the ajaxify rails gem to reload the page when ever any assets or layout part changes.

This is done by setting a meta tag with the assets digest and layouts digest on page refresh and for every ajaxified request we send these digests as request headers. These digest in the meta tag and the headers are compared against each other and if it doesn't match we refresh the page.

===== Gom gem ====

==== Usage ====

Include this in gem file

Run bundle install

In Layout add

<code>
include_gon(:init => true)
</code>

In controller

<code>
gon.variable_name = value
</code>

In js use it

<code>
gon.variable_name
</code>

==== Where we need this in Performance? ====

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 <code> include_gon(:init => true) </code> in ajaxify_application layout.

===== Horizontal Progress Bar (Youtube style progress bar) =====

==== Pace gem ====

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

=== Usage ===

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

<code>

javascript_tag("window.paceOptions = { restartOnRequestAfter: false, startOnPageLoad: false, restartOnPushState: false }")

</code>

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 <code> Pace.restart(); </code> 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 <code> Pace.restart(); </code>

Other places, if we need to display this kind of progress bar call <code> Pace.restart(); </code>

Edit summary

Note: By editing this page you agree to license your content under the following license: CC Attribution-Share Alike 4.0 International

AuditWiki

User Tools

Site Tools

Page Tools