Masquer une Div en fonction d’un champ sur votre Rails app

Récemment dans un projet j’ai eu besoin de masquer un champ et son label en fonction d’une valeur d’un autre champ. Pour y parvenir de manière dynamique, j’ai utilisé la bibliothèque Jquery de Javascript .

Voila ce que nous allons obtenir !

masquer une div en fonction d'un autre champ

J’en profite pour introduire et utiliser un outil nommé Webpacker pour la gestion de dépendances Javascript accompagné du gestionnaire de paquet yarn. Webpack est un module bundler qui prend les modules avec leurs dépendances et génère des assets statiques pouvant être utilisés sur le navigateur depuis la version 5.1 de Rails. Le module bundler permet de regrouper dans un plusieurs modules tous nos fichiers javascript, css et html.

Masquer une Div en fonction d’un champ: C’est parti !

Créez un nouveau projet avec le nom de votre choix, ici “masquer_une_div_jquery” en précisant l’utilisation d’une base de données PostgreSQL

$ rails new masquer_une_div_jquery --webpack -d postgresql --skip-sprockets
$ cd masquer_une_div_dynamiquement
$ spring stop
$ rails generate controller properties
$ rails generate model Property properties_type:string floor:integer $ git add .
$ git commit -m "First commit"
$ hub create
$ git push origin master

Créez la table et migrez vos données.

$ rails db:create && rails db:migrate

Ajoutez la gems, ‘simple_form‘ à votre Gemfile

Simple_form servira à construire notre formulaire

# Gemfile 
# [...] 
gem 'simple_form' gem "turbolinks", "~> 5.0.0", require: false
# [...]

Installez les gems et finaliser l’installation de ‘simple_form

$ bundle install
$ rails generate simple_form:install --bootstrap

Éditez le fichier routes.rb depuis /config/

# config/routes.rb
Rails.application.routes.draw do
 root 'properties#new'
 resources :properties, only: [:new, :create, :show]
end

Remplacez les tags javascript et stylesheet à votre application.html.erb

# app/views/layouts/application.html.erb
# [...]
<head>     
 <%= javascript_pack_tag 'application' %>
 <%= stylesheet_pack_tag 'application' %>
</head>
# [...]

Ajoutez le code pour notre contrôleur dans app/controllers/properties_controller.rb

# app/controllers/properties_controller.rb 
class PropertiesController < ApplicationController   
def new     
 @property = Property.new   
end   

def create
 @property = Property.new(property_params)
 if @property.save
  redirect_to property_url(@property)
 else
  redirect_to root
 end
end

def show
 @property = Property.find(params[:id])
end   

private
def property_params
 params.require(:property).permit(:properties_type, :floor)
 end
end

Continuons à préparer notre environnement via webpacker

Bootstrap V4 et ses dépendances

Installez la dernière version de Bootstrapv4, au moment de ce tutoriel c’était la 4.1.1 avec ses dépendances jquery et popper.js

Vous pouvez vérifier la dernière version grâce à la commande “yarn info bootstrap”

$ yarn add [email protected] jquery popper.js

Créez le dossier css dans app/javascript/packs/ et ajoutez le fichier application.scss

/* app/javascript/packs/application.scss */
@import "~bootstrap/scss/bootstrap";
@import "index.scss";

Ajoutez bootstrap au fichier application.js depuis le dossier app/javascript/packs/

// app/javascript/packs/application.js 
 // bootstrap
 import 'bootstrap';
 import 'css/application.scss';
 // jquery
 global.$ = jQuery;

Jquery-ui

Installez la dernière version de Jquery-ui

$ yarn add jquery-ui

Ajoutez Jquery-ui à notre fichier application.js

// app/javascript/packs/application.js 
// #[...] 
// jquery-ui
import 'jquery-ui/themes/base/all.css';
require( "jquery-ui/ui/widgets/autocomplete" );

Turbolinks

Ajoutez la dernière version de Turbolinks

$ yarn add turbolinks

Ajoutez Turbolinks à notre fichier application.js

// app/javascript/packs/application.js 
// #[...]
// Turbolinks
var Turbolinks = require("turbolinks")
Turbolinks.start()

Pour finir avec nos outils via webpack, ajoutez le code ci-dessous dans environment.js

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin environment.plugins.prepend(
 'Provide',
  new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   jquery: 'jquery',
   'window.Tether': 'tether',
    Popper: ['popper.js', 'default'],
  }) 
)

module.exports = environment

Ajoutons un peu de style !

masquer une div : ajouter du style

Créez un fichier index.scss dans app/javascript/packs/ pour centrer nos éléments à l’aide de Flexbox

Pour connaître le fonctionnement du système de Flexbox, cliquez ICI

/* app/javascript/css/index.scss */ 
.box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}

Éditez le fichier new.html.erb depuis app/views/properties/ et ajoutez le code pour notre formulaire

<!-- app/views/properties/new.html.erb  -->
<div class="box">
<h1>Masquer une Div en fonction d’un champ en Javascript et CSS</h1>
<%= simple_form_for @property, method: :post do |f| %>
<%= f.input :properties_type, placeholder: "Entrez votre type d'habitation", label: 'Appartement ou maison' %>
<div id="hide_floor">
<%= f.input :floor, collection: 0..10, selected: 0, placeholder: "N° étage", label: "Si c'est un appartement, Quel étage ?" %>
</div>
<%= f.button :submit, 'Ajouter', class: "btn btn-primary" %>
<% end %>
</div>

Masquer une Div en fonction d’un champ: le Jquery et le CSS

Retournez dans le fichier index.scss dans app/javascript/packs/ et ajoutez le display: none pour que le champ ne soit pas affiché sur la page à son chargement

/* app/javascript/css/index.scss */
/* [...] */
#hide_floor {
display: none;
}

Créez nouveau fichier dans app/assets/javascripts/packs/ nommé immo_type_autocomplete.js

Ce code va fournir une liste déroulante à l’utilisateur. Au moment de taper sur le champ , il aura le choix de saisir un appartement ou une maison

// app/assets/javascript/packs/immo_type_autocomplete.js 
$( document ).on('turbolinks:load', function() {
 return $("#property_properties_type").autocomplete({
  source: ["appartement", "maison"]
 });
});

Toujours dans le même répertoire créez le fichier floor_hide.js

Le display = “none” va nous permettre de masquer une div, celle avec l’id hide_floor

$( document ).on('turbolinks:load', function() {
$('#property_properties_type').change(function() {
if ($( this ).val() == 'appartement') {
document.getElementById("hide_floor").style.display = "initial";
}
else {
document.getElementById("hide_floor").style.display = "none";
}
});
});

Vous n’avez plus qu’à lancer votre serveur depuis l’invite de commande : rails s et vérifier le résultat depuis votre navigateur

$ rails s

Pour voir le résultat, cliquez ICI

Pour voir les sources, cliquez ICI

Sources

https://github.com/rails/webpacker

https://getbootstrap.com/docs/4.0/getting-started/webpack/

https://github.com/plataformatec/simple_form

https://github.com/turbolinks/turbolinks

https://github.com/twbs/bootstrap

https://github.com/jquery/jquery

https://github.com/jquery/jquery-ui

signature Pierre-Christophe

Aucun commentaires

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.