Developer Tools #3 - Update the DOM with an AJAX Response

[robotcars]

Developer Tools for the Canvas User > Tutorial #3

For this tutorial we are going to combine what we learned in tutorial's 1 and 2. The goal will be to make an AJAX request with JavaScript to the Canvas API, and then when the request is successful update the DOM with an updated value. The Document Object Model or DOM, is the webpage as your browser sees it. I'll get you through this tutorial without any more details, but if you're curious here are some resources:

W3 Schools - JavaScript DOM Methods

MDN - Document Object Model (DOM) - Web APIs

As part of this rapidly escalating tutorial I am no longer going to use pictures. Anything you need should be referenced from the previous tutorials.

1. Grab the snippet from the last tutorial and add the following code (lines 10-14) to the end.
   

   var payload = {
        "nickname":"My W○RKR∞M ⸚ Test"     // what we are changing the nickname to
   }
   
   $.ajax({
        url : '/api/v1/users/self/course_nicknames/1214595',
        type: 'PUT',
        data: payload
   })
   // when the request is resolved
   .done(function(response, status) {
        console.log(response) 
   })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

   • The jQuery done() method allows us to do something when the AJAX request is complete. For now, copy or type this code into your Console tab, and press Enter
   • The console.log() method allows us to display messages to the console. This is generally used for debugging or displaying other messages while developing. The user will never see these messages unless they have the Console tab open.
   • The response should look just like the one you saw in the Preview pane of the Network tab from Tutorial #2
2. Now, you will update the name of the Course Card...
   Note: We could have done this with the payload value, but this is a better example of making an AJAX request and doing something when the request is finished and successful.
3. First we have to find a Selector we can use to identify the element we want to change. 
   Right click on the Course Card where you see the course nickname (the text with color), and Inspect Element
   Hopefully, you will land on a element that looks something like this
   

   <span style="color:#FDC010;" data-reactid=".1.$1266609.0.2.0.0.0">W○RKR∞M⸚CARROLL</span>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

   Note the style="" attribute with value color:#FDC010;
   We will use this as our selector for this tutorial.[1][2]
   
   
4. Let's update our code and use jQuery to update the element after the AJAX request completes, see line 12
   We will use the response.nickname value
   

   var payload = {
        "nickname":"My W○RKR∞M ⸚ Test"     // what we are changing the nickname to
   }
   
   $.ajax({
        url : '/api/v1/users/self/course_nicknames/1214595',
        type: 'PUT',
        data: payload
   }).done(function(response, status) {
        $('span[style*="color:#FDC010;"]').html(response.nickname)
   })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

   Press Enter, after updating the code in the Console tab
5. You should see the nickname of your course card update
   If not, try refreshing the page and reset or adjust some of the values you are passing with the code.

Congrats, AGAIN! 

This is the basic workflow of a Canvas end-user modification. These are some of the fundamental practices used in making interactive web pages all across the web. You can expand these skills to make your own custom Canvas modifications. Remember to review the Canvas API Documentation and thoroughly plan out the objective and goals your script is trying to achieve.

[1] There a plenty of resources on the web for CSS and HTML selectors for interacting with DOM elements via JavaScript, check with Google.

[2] This is because Canvas uses React - A JavaScript library for building user interfaces, which allows elements to load or update after the Primary DOM loads. This is noticeable via the attribute data-reactid="". Usually unique elements will have an id="" attribute if the element is unique and a class="" attribute if there are similar elements. This creates problems when jQuery tries to interact with these elements, because they are not part of the page when jQuery loads. We would prefer to use predictable Selectors whenever possible. This is a more advanced topic and may be covered in a later tutorial.

:smileydevil: Rapid Escalation

Repeat Tutorial 3 and update the color of the Course Card, after sending a new color to the Canvas API.