JSON Fundamentals – Turing

Learning Goals

• Learn about how the browser displays elements
• Differentiate between different position properties and when to use them
• How to use google chrome to debug and fix your css weirdness.
• Exercise:
  • Place the ball inside the ring with the least movement (absolute positioning)
• Stick to a framework to make it easier for you to handle things
• Where to go from here:
  • http://learnlayout.com/no-layout.html

Structure

• 10 - Displays
• 10 - Positions
• 10 - Let's play around with both
• 20 - Exercise

A world with no Ajax

• In order for use to change one portion of our page, we have to reload the whole page.
• If there's any area in our page that takes time to load, the user has to wait before the page is rendered.

Solution?

• AJAX

JQuery and AJAX

• JQuery provides an easy way to make AJAX Calls
• AJAX essentially is a request made to an API and the response doesn't interrupt our page loading.
• A response comes in the form of: JSON, AJAX or even HTML
• We will deal with JSON in this class, XML is similar.
• Once a response comes back, we should handle displaying the data ourselves.

JQuery AJAX methods

• $.ajax is the main method, all the other methods are just shortcuts.

• http://api.jquery.com/jquery.ajax/

• Shortcuts are:

  • $.get(): https://api.jquery.com/jquery.get/
  • $.getJSON(): http://api.jquery.com/jquery.getjson/
  • $.post: http://api.jquery.com/jquery.post/

Connecting Rails

• Let's Generate a Rails app.
• Clone https://github.com/JumpstartLab/blogger_advanced
• Go to See All Articles or /articles route.
• Try to delete an article
• Notice how the page has to be reloaded to display the new results.
• Let's add AJAX functionality here

Steps to adding AJAX to rails

• you have two main areas you want to deal with:

  • Rails controller: make sure you rails controller returns back JSON result to be displayed. (respond with)
  • Javascript Side: call your controller route and display the result in the callback

• Rails Side, in our controller, we would do: