[Ruby on Rails] Cookie is used and displayed only once at the first access (using jquery.cookie.js)

Target

表示.gif

Development environment

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

flow

Introduction of 1 gem 2 Load jquery.cookie.js 3 Edit view

Introduction of gem

Enables jquery to be used in Rails.

Gemfile


gem 'jquery-rails'

Terminal


$ bundle insatll

app/assets/javascripts/application.js


//=require jquery ← added
//= require jquery_ujs ← added
//= require activestorage
//= require turbolinks
//= require_tree .

Loading jquery.cookie.js

Add the following to the head part and load jquery.cookie.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>




#### **`erb:app/views/layouts/application.html.erb`**
<%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> ← Add ``` # Edit view This time it is completed with html.

erb:app/views/homes/top.html.erb


<div class="indication">
  <div class="box">
    <p>When you press the display end button below,<br>You cannot see it even if you update it.<br>
It will be displayed when you launch a new browser.
    </p>
    <button>End of display</button>
  </div>
</div>

<style>
.indication{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);  
  z-index: 1;
}
.box{
  position:absolute;
  top:40%;
  left:35%;
  width:400px;
  height:150px; 
  background-color: #ffffff;
  z-index:2;
}
.box p{
    padding:15px;
}
.box button{
  display:block;
  margin:0 auto;
}
</style>

<script>
  $(function(){
    $(".indication").show();
    if($.cookie('Flg') == 'on'){
      $(".indication").hide();
    }else{  
      $(".indication").show();
    }
    $(".box button").click(function(){
      $(".indication").fadeOut();
      $.cookie('Flg', 'on', { expires: 1,path: '/' });
    });
  });
</script>

Way of thinking

if($.cookie('Flg') == 'on')At


```on```If there is no description of, the indication class is displayed.

 Also, when the button is clicked, the indication class is not displayed,

#### **`$.cookie('Flg', 'on'In the description of`**
```cookie('Flg', 'on'In the description of

 Put the value of ‘on’ in the cookie and


#### **`{ expires: 1,path: '/' });In the description of`**

The cookie retention period is one day, and the target range is "/" to specify the entire site.

Summary

It may not be used that often, I think that it is effective for sites that you have to be careful about and sites that you want to register.

Also, on twitter, technologies and ideas that are not uploaded to Qiita are also uploaded, so I would be grateful if you could follow me. Click here for details https://twitter.com/japwork

Recommended Posts

[Ruby on Rails] Cookie is used and displayed only once at the first access (using jquery.cookie.js)
[Ruby on Rails] How to log in with only your name and password using the gem devise
[Ruby on rails] When executing the heroku command, bash: heroku: command not found is displayed. [Rails tutorial]
Try using the query attribute of Ruby on Rails
[Ruby on Rails] Only the user who posted can edit
[Ruby on Rails] Infinite scrolling using gem kaminari and jscroll
When using Slim in Ruby on Rails, "undefined local variable or method` f'for "is displayed in form_with
Things to remember and concepts in the Ruby on Rails tutorial
[Ruby On Rails] In the create action and destroy action, emergency measures when redirect_to action:: show cannot be (cannot be used)
[Ruby on Rails] What is Bcrypt?
[Ruby on Rails] When logging in for the first time ・ How to split the screen in half using jQuery
"" Application.js "is not present in the asset pipeline" error in Ruby on Rails
How to debug the processing in the Ruby on Rails model only on the console
[Cloud9] Yay! You ’re on Rails! Is not displayed in the rails tutorial
[Ruby On Rails] How to search the contents of params using include?
[Ruby on Rails] Code check using Rubocop-airbnb
part of the syntax of ruby ​​on rails
Notes on using FCM with Ruby on Rails
[Ruby on Rails] Image slideshow using Skippr
How the website is displayed on the screen
[Ruby on Rails] Change the update date and creation date to your favorite notation
[Ruby on Rails] Add and delete tags and display (success / error) messages using ajax.
[Ruby On Rails] Error in test using RSpec MySQL client is not connected
[Ruby On Rails] How to retrieve and display column information of multiple records linked to a specific id at once