Skip to content

itkrt2y/render_async

master
Switch branches/tags
Code
This branch is 5 commits ahead, 310 commits behind renderedtext:master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
bin
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Build Status Gem Version

render_async

render_async

Renders partials to your views asynchronously. This is done through adding Javascript code that does AJAX request to your controller which then renders your partial.

Workflow:

  1. user visits a page =>
  2. AJAX request on the controller action =>
  3. controller renders a partial =>
  4. partials renders in the place where you put render_async helper

Javascript is injected into <%= content_for :render_async %> so you choose where to put it.

Installation

Add this line to your application's Gemfile:

gem 'render_async'

And then execute:

$ bundle install

Usage

  1. Include render_async view helper somewhere in your views:

    # app/views/comments/show.html.erb
    
    <%= render_async comment_stats_path %>
  2. Then create a route that will config/routes.rb

    # config/routes.rb
    
    get :comment_stats, controller: :comments
  3. Fill in the logic in your controller

    # app/controllers/comments_controller.rb
    
    def comment_stats
      @stats = Comment.get_stats
    
      render partial: "comment_stats"
    end
  4. Create a partial that will render

    # app/views/comments/_comment_stats.html.erb
    
    <div class="col-md-6">
      <%= @stats %>
    </div>
  5. Add content_for in your base view file

    # application.html.erb
    
    <%= content_for :render_async %>
  6. Add styles in your application.css

    /* application.css */
    
    /*
    *= require render_async
    */
  7. (optional) Pass event_name: <event name> to hook events

    # application.html.erb
    
    <%= content_for :render_async, event_name: 'foo' %>
    // application.js
    
    document.addEventListener('success-foo', function () {
      console.log('success')
    });
    
    document.addEventListener('error-foo', function () {
      console.log('fail')
    });
    
    // Call `complete-<event_name>` whether success or error
    document.addEventListener('complete-foo', function () {
      console.log('complete')
    });

Advanced usage

render_async takes two arguments, path and html_options.

  • path is the ajax-capable controller action you're looking to call via get. e.g. comments_stats_path, posts_path, etc.
  • html_options is an optional hash that gets passed to a rails javascript_tag, to drop html tags into the script element.

Example utilizing html_options with a nonce:

<%= render_async users_path, nonce: 'lWaaV6eYicpt+oyOfcShYINsz0b70iR+Q1mohZqNaag=' %>

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/renderedtext/render_async.

License

The gem is available as open source under the terms of the MIT License.

About

render_async lets you include pages asynchronously with Fetch

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 43.6%
  • Ruby 33.4%
  • HTML 21.3%
  • Shell 1.7%