https://github.com/stevepolitodesign/rails-ajax-examples

Examples of how to use AJAX in a Rails Application
https://github.com/stevepolitodesign/rails-ajax-examples

Last synced: about 17 hours ago
JSON representation

Examples of how to use AJAX in a Rails Application

• Host: GitHub
• URL: https://github.com/stevepolitodesign/rails-ajax-examples
• Owner: stevepolitodesign
• Created: 2019-10-08T01:00:01.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-19T15:13:24.000Z (over 1 year ago)
• Last Synced: 2023-03-06T00:21:56.720Z (over 1 year ago)
• Language: Ruby
• Homepage: https://stevepolito.design/blog/rails-ajax-examples/
• Size: 1.76 MB
• Stars: 8
• Watchers: 0
• Forks: 8
• Open Issues: 34
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rails AJAX Examples

Rails ships with [turbolinks](https://github.com/turbolinks/turbolinks) which:

> automatically fetches the page, swaps in its ``, and merges its ``, all without incurring the cost of a full page load.

This creates a reactive, fast application. However, there are times when `turbolinks` is not enough, and you'll want to roll your own AJAX solutions.

## Blueprint

Below is a generic blueprint to follow when implementing AJAX on the `create` action of a model in a Rails application.

### 1: Controller

Create a `respond_to` block and make sure to pass `format.js` in the block. This will automatically render a corresponding `create.js.erb` file. This file needs to be manually created in the corresponding `views` directory.

```

  def create

    @your_model = YourModel.create(your_model_params)

      respond_to do |format|

          if  @your_model.save

              # This will run the code in `app/views/your_model/create.js.erb`.

              format.js

          else

              # This will run the code in `app/views/your_model/create.js.erb`.

              format.js

          end

      end

  end

```

### 2: Form

Make sure your form does not use `local: true`. Otherwise, the form will not submit remotely.

```

<%= form_with model:@your_model do |f| %>

  ...

<% end  %>

```

### 3: Create View

Handle errors and successful model creations with Javascript in your corresponding `app/views/your_model/create.js.erb` file.

```

# app/views/your_model/create.js.erb

<% if @your_model.errors.any? %>

  # Handle errors

<% else %>

  # Handle save

<% end %>

```

## Example 1: Adding Comments Asynchronously

![Adding a comment via AJAX in Rails](./app/assets/images/adding_a_comment_via_ajax.gif)

## Example 2: Adding Authors Asynchronously 

![Adding an author via AJAX in Rails](./app/assets/images/adding_an_author_via_ajax.gif)

---

# Set Up

1. `bundle install`

2. `rails db:setup`

3. `rails s`

# Notes

To see notes that specifically pertain to the examples, run the following commands.

1. `rails notes -a="NOTE COMMENT"` or `rails notes -a="NOTE AUTHOR"`

To see all notes, run the following command.

1. `rails notes -a="NOTE"`

# Tests

Because the application is testing AJAX, you'll need to have [Selenium Driver](https://github.com/teamcapybara/capybara#selenium) installed.

1. `rspec`

# Specs

1. `rspec -f d`