DEV Community: D.S.

Solving Turbo Frame Replacement Issues in Rails

D.S. — Fri, 17 Nov 2023 05:15:31 +0000

When working with Turbo Frames in a Ruby on Rails application, a common challenge is ensuring that interactive elements continue to work correctly after an update. In this article, we explore a specific issue where a Turbo Frame, once replaced, does not function as expected on subsequent interactions. We'll look at a practical solution by switching from a replace method to an update method in the Turbo Stream response.

The Problem

In a Rails application featuring user interactions such as blocking and unblocking users, Turbo Frames can be used to update parts of the page dynamically. However, a problem arises when the Turbo Frame itself is replaced as part of the update. Once replaced, any subsequent attempts to interact with the newly loaded frame fail because the original frame element, which was bound to the Turbo Drive listeners, no longer exists in the DOM.

Initial Setup

Consider a Rails view where we have a Turbo Frame for a block/unblock button:

<%= turbo_frame_tag "block_unblock_button" do %>
  <% if @is_blocked_by_current_user %>
    <%= link_to unblock_profile_path(@user), data: { turbo_method: :delete, turbo_frame: "block_unblock_button" }, remote: true, class: "btn ..." do %>
      <!-- Unblock button -->
    <% end %>
  <% else %>
    <%= link_to block_profile_path(@user), data: { turbo_method: :post, turbo_frame: "block_unblock_button" }, remote: true, class: "btn ..." do %>
      <!-- Block button -->
    <% end %>
  <% end %>
<% end %>

The issue here is that when the block/unblock action is performed, the entire frame, including its bindings, gets replaced.

Solution: Switching from Replace to Update

The solution is to change the behavior of the Turbo Stream response from replacing the frame to updating its content. This preserves the frame itself and its bindings, allowing subsequent interactions to be handled correctly.

Controller Actions

In the Rails controller, we have the block and unblock actions set up to respond with appropriate Turbo Stream actions:

def block
  # ...
  respond_to do |format|
    format.turbo_stream
    format.html { redirect_to profile_path(params[:id]) }
  end
end

def unblock
  # ...
  respond_to do |format|
    format.turbo_stream
    format.html { redirect_to profile_path(params[:id]) }
  end
end

Updating Turbo Stream Responses

The key change is in the Turbo Stream templates:

<%= turbo_stream.update "block_unblock_button" do %>
  <%= link_to unblock_profile_path(@user), data: { turbo_method: :delete, turbo_frame: "block_unblock_button" }, remote: true, class: "btn ..." do %>
    <!-- Unblock button -->
  <% end %>
<% end %>

<%= turbo_stream.update "block_unblock_button" do %>
  <%= link_to block_profile_path(@user), data: { turbo_method: :post, turbo_frame: "block_unblock_button" }, remote: true, class: "btn ..." do %>
    <!-- Block button -->
  <% end %>
<% end %>

By using turbo_stream.update instead of turbo_stream.replace, we ensure that only the content within the frame is updated, not the frame itself. This approach maintains the Turbo Frame's presence in the DOM, along with its event listeners, ensuring that the block/unblock functionality works correctly even after multiple interactions.

Conclusion

In this case, switching from replace to update in the Turbo Stream response was the key to maintaining the functionality of the Turbo Frame across multiple interactions. This solution highlights the importance of understanding the nuances of Turbo Frames and Streams in Rails applications, especially when dealing with dynamic content updates.

Remember, the choice between update and replace in Turbo Streams can significantly impact the behavior of your application, and understanding their differences is crucial for building interactive and responsive Rails applications.

Creating Searchable Scopes by Age in Rails When You Only Have Date of Birth

D.S. — Wed, 08 Nov 2023 01:25:43 +0000

When working with user databases in Ruby on Rails, it's common to store a user's date of birth (DOB) rather than their age, since the latter changes over time and would require constant updates. However, there are scenarios where we need to filter users based on their age, such as in search forms. How do we accomplish this when we only have the dob column in our database? Let's explore a practical way to create searchable scopes by age.

Understanding Scopes in Rails

Scopes in Rails are custom queries that you define inside your model to encapsulate commonly used queries. They allow you to keep your code DRY (Don't Repeat Yourself) and your model logic clean. A scope takes in a condition and returns an ActiveRecord::Relation, which can be further chained with more query methods.

The Age Calculation Challenge

The challenge is to calculate the age based on the stored dob and create scopes that allow searching for users above or below a certain age. We can achieve this with two scopes: age_gt (age greater than) and age_lt (age less than).

Here's how to define these scopes in your Rails model:

class User < ApplicationRecord
  # Scope to find users older than a given age
  scope :age_gt, ->(age) { where("dob <= ?", age.to_i.years.ago.to_date) }

  # Scope to find users younger than a given age
  scope :age_lt, ->(age) { where("dob >= ?", age.to_i.years.ago.to_date) }

  # Make scopes available for search (for Ransack, etc.)
  def self.ransackable_scopes(auth_object = nil)
    %w[age_gt age_lt]
  end
end

How Do These Scopes Work?

age_gt: Takes an integer as age and returns users whose DOB is on or before the date age years ago from today. For instance, User.age_gt(18) returns users who are 18 or older.
age_lt: Similarly, it takes an age and returns users whose DOB is on or after the date age years ago. For example, User.age_lt(30)returns users who are younger than 30.

Integrating Scopes with Forms

To use these scopes in a form, you'd typically have a slider or input field that allows the user to set a minimum and maximum age range. Here's an example using form helpers in Rails:

<%= form_with model: User, url: search_path, method: :get do |f| %>
  <label for="age_min">Age min</label>
  <%= f.range_field :age_gt, in: 18..60, step: 1, value: @age_gt, class: "form-range", id: "age_min", oninput: "updateSlider()" %>
  <span id="age">18</span><br>

  <label for="age_max">Age max</label>
  <%= f.range_field :age_lt, in: 18..60, step: 1, value: @age_lt, class: "form-range", id: "age_max", oninput: "updateSlider2()" %>
  <span id="age2">60</span>
<% end %>

Why Use Scopes?

Using scopes for such queries provides several benefits:

Reusability: Once defined, scopes can be used throughout your application without rewriting the query.
Chainability: Scopes return ActiveRecord::Relation objects, which means you can chain them with other query methods or scopes.
Readability: Scopes make your model methods and your search implementations more readable and intent-expressive.

Conclusion

When you don't have a direct column to search by in your Rails application, like age, you can creatively use scopes to define the desired search logic. By leveraging Ruby's powerful date handling and ActiveRecord's where clause, we can easily search by computed values like age, even when we only have a date of birth in our database. This approach maintains the integrity of your database and the flexibility of your search capabilities.

In this blog post, the Rails application is assumed to be using Ransack gem for handling advanced search forms. Ransack utilizes named scopes and allows for easy integration of complex search functionality in Rails applications.

What I have learned at Codecademy HTML/CSS course

D.S. — Sun, 23 Jul 2023 15:11:54 +0000

As a not complete beginner, I embarked on an exciting adventure with Codecademy's HTML/CSS course, eager to unlock the secrets of web development. The course offered a user-friendly experience, breaking down complex concepts into simple terms, perfect for even not newcomers like me.

Step by step, I learned to create and structure web pages using HTML, the backbone of any site. I grasped the art of styling through CSS, adding colors, fonts, and layouts with ease. Practical exercises and interactive quizzes boosted my understanding, making the learning process engaging and enjoyable.

Today, I proudly call myself a confident coder(even though HTML and CSS is not really coding), ready to take on new challenges in the vast world of web development. Codecademy has been an invaluable companion on my coding journey!