How to trigger a JS code once when a new model is created in rails?

I’m trying to have an ‘Achievement Unlocked’ JS animation play on my show page when someone creates a new cocktail model. So it should only play once and never again on that particular page. I’m kinda stuck on how to do that without creating a separate table for ‘Achievements’ in my DB. Does anyone have a simple solution? Here’s my controller (the NUM, @num, and @num2 are variables I created to figure out a solution, feel free to disregurad):

class CocktailsController < ApplicationController
  NUM = Cocktail.count
  def index
    @cocktails = Cocktail.all
  end

  def show
    @cocktail = Cocktail.find(params[:id])
    # @dose = Dose.new
    @num = NUM
  end

  def new
    @cocktail = Cocktail.new
  end

  def create
    @cocktail = Cocktail.new(cocktail_params)
    @num = NUM
    if @cocktail.photo.attached?
      @num2 = @num + 2
      @cocktail.save
      redirect_to cocktail_path(@cocktail)
    else
      redirect_to new_cocktail_path,
                  warning: "Sorry, you can't create a cocktail without
                  uploading an image"
    end
  end

  def edit
    @cocktail = Cocktail.find(params[:id])
  end

  def update
    @cocktail = Cocktail.find(params[:id])
    @cocktail.update(cocktail_params)
    redirect_to root_path
  end

  def destroy
    @cocktail = Cocktail.find(params[:id])
    @cocktail.destroy

    # redirect_to root_path
  end

  private

  def cocktail_params
    params.require(:cocktail).permit(:name, :photo)
  end
end

My HTML (The first div is the animation’s html. My current code allows the animation to play more than once in all cocktail show pages that were created after the 7th cocktail) :

<% if @num < 7 %>
  <div id="achievement" class="">
    <div class="circle"></div>
    <div class="copy">
      <h4>Achievement Unlocked!</h4>
      <p>Here are some internet points!</p>
    </div>
  </div>
<% end %>


<div class="banner" style="background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url( <% if @cocktail.photo.attached? %> <%= cl_image_path @cocktail.photo.key %> <% else %> https://raw.githubusercontent.com/lewagon/fullstack-images/master/uikit/lunch.jpg <% end %>)">
  <div class="container">
    <h1><%= @cocktail.name %></h1>
  </div>
</div>

<br>
<div class="center">
  <%= link_to "Add A New Dose", new_cocktail_dose_path(@cocktail), class: "btn btn-ghost" %>
</div>

<div class="cards">
<% @cocktail.doses.each do |dose| %>
  <div class="card" >
    <div class="card-body">
      <h5 class="card-title"><%= dose.ingredient.name %></h5>
      <p class="card-text"><%= dose.description %></p>
      <%= link_to "Delete", cocktail_dose_path(@cocktail, dose), class: "btn btn-dark", method: :delete %>
    </div>
  </div>
<% end %>
</div>


<br>
<div class="center">
  <%= link_to "Back", root_path, class: "btn btn-ghost" %>
</div>

Answer

Pass that info in params (the info that it is first or not) in params in the redirect after create and check in render view if params[:first_time].exists? and execute JS in that case. You did not need to allow it in params as it was not something being “posted” from view to controller. NameError means you did not define it and that happened because you were sending @num2 = @num2 (key-value pair in params hash) and u had not defined num2’s value. You could do num2: “I am num2” or anything and that would work 🙂

Advertisement

Answer