Week 3: JavaScript basics

Some scattered and poorly formed notes from week 3, introducing JavaScript and AJAX.

First, some basic differences between Ruby and JavaScript, first: introducing variables.

Ruby:

var_name = "1"

JavaScript:

let varName = "1"

Second, jQuery, super powerful, much wow.

Some reminder steps on transitioning to using AJAX with links (instead of full page refresh)

1. First, insert remote: true in the link helper (breaks the link)
2. Make sure item has unique identifier
3. in controller, add format.js to render a .js file (name conventionally and that's all you need)
4. in the .js, call a method (e.g., slideUp()) on the unique identifier) for example...

$("#<%= dom_id(@comment) %>").slideUp(2500, function() {
$(this).remove();
});

1. dom_id() is a Rails function that fills in the object ID to make it easier to call the specific object for the action.

Using AJAX with forms is similar...

1. update form to local: false in form_with
2. same steps as above...

Troubleshooting and where to look for errors (given Ruby exceptions are no longer present):

1. Server log - make sure request processes
2. Devtools > JavaScript console (shows command line log) > Network tab (shows response from running .js)