Your Teacher
Chris Oliver
Hi, I'm Chris. I'm the creator of GoRails, Hatchbox.io and Jumpstart. I spend my time creating tutorials and tools to help Ruby on Rails developers build apps better and faster.
About This Episode
Without jQuery in Rails 5.1, we explore what it takes to convert your traditional jQuery code into vanilla Javascript methods
Notes
Selecting elements
// jQuery version
$("#notifications")
// Javascript version
document.querySelector("#notifications") // returns the first matching element
document.querySelectorAll("#notifications a") // returns an array of elements
document.getElementById("notifications") // returns a single element
document.getElementsByTagName("a") // returns an array of elements
document.querySelector("#notifications").querySelectorAll("a") // returns an array of sub-elements from the first query
Adding Event Listeners
// jQuery version
$("a").on("click", function(event) {
event.preventDefault()
console.log("clicked")
})
// Javascript version
document.querySelectorAll.forEach(function(item) {
item.addEventListener("click", function(event) {
event.preventDefault()
console.log("clicked")
})
})
Hiding Elements
// jQuery version
$("#notifications").hide()
$("#notifications").show()
// Javascript version
document.querySelector("#notifications").style.display = 'none'
document.querySelector("#notifications").style.display = ''
Appending an element
// jQuery version
$("#notifications").append("<p>New notification</p>")
// Javascript version
node = document.createRange().createContextualFragment("<p>New notification</p>")
document.querySelector("#notifications").appendChild(node)
Retrieving Attributes and Data Attributes
// jQuery version
$("element").attr("attribute")
$("element").data("id")
// Javascript version
document.querySelector("element").getAttribute("attribute")
JSON.parse(document.querySelector("element").getAttribute("data-id"))
// or
JSON.parse(document.querySelector("element").dataset.id)
AJAX requests
// jQuery version
$.ajax({
url: "/notifications.json",
type: "GET",
success: function(data) {
console.log(data)
}
})
// Javascript version (with Rails UJS)
// This automatically includes your CSRF token for non-GET requests as well
Rails.ajax({
url: "/notifications.json",
type: "GET",
success: function(data) {
console.log(data)
}
})
Document Event Handlers
// jQuery version
$(document).on("turbolinks:load", function() {
// initialize code
})
// Javascript version
document.addEventListener("turbolinks:load", function() {
// initialize code
})
Javascript and CSS in Rails
0% Complete
1
Including Javascript and CSS Libraries With Rails
6m
2
Clean Javascript Code Using Data-Behavior On The Frontend
11m
3
How To Create A Gem For Frontend Javascript And CSS Libraries
6m
4
Manage Assets With Rails Assets
10m
5
Using Purchased Themes with Rails
23m
6
Using Bootstrap 4 Rubygem with Rails
3m
7
Sharing Data With Javascript
14m
8
Primer on Rails 5.1's new UJS library
17m
9
How To Use Turbolinks clearCache()
5m
Migrating From jQuery to Vanilla Javascript
17m
11
Stimulus JS Framework Introduction
18m
12
How to install Tailwind CSS using Webpacker with Rails
12m
13
How to use Webpack require.context
18m
14
Webpack Bundle Analyzer
5m
15
How to use Google Analytics gtag.js with Turbolinks & Webpacker
7m
16
How to use Rails Request.js
12m
17
How to create Custom Elements with Web Components
15m
18
How to use ESBuild in Rails with JSBundling
15m
19
How to use Bootstrap with CSS bundling in Rails
9m
20
How to use jQuery & jQueryUI with Esbuild
12m
21
Refactoring Javascript with Stimulus Values API & Defaults
20m
22
Live Reload with Esbuild in Rails using an EventSource
20m
23
How to use CSS Variables with Ruby on Rails
7m
24
How to use CodeMirror 6 with Ruby on Rails
19m
25
jQuery UJS Callbacks
4m
26
jQuery UJS and AJAX
12m
27
Button Loading Animations with jQuery UJS
5m