WorkingWithAjax.markdown

Working with AJAX

Repository

[fundimental ajax](git clone https://github.com/turingschool-examples/birdeck.git fundamental_ajax)

Procedure

What is AJAX Asyncronous Javascript and ajax How does it work with JavaScript How does it work with jQuery Overall structure of the app Add GET example (console table)

$(document).ready(function() {
  $.ajax({
   type: "GET",
   url: "https://turing-birdie.herokuapp.com/api/v1/posts.json",
   success: function(posts) {
     console.table(posts);
   }
  })
})

Appending 'posts' data to a div (iterating over 'posts' and building each div with string interpolation.

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "https://turing-birdie.herokuapp.com/api/v1/posts.json",
    success: function(posts) {
      // console.table(posts);
      $.each(posts, function(index, post) {
        $("#latest-posts").append(
            "<div class='post' data-id='"
            + post.id
            + "'><h6>Published on "
            + post.created_at
            + "</h6><p>"
            + post.description
            + "</p></div>"
         )
      })
    }
  })
})

Add create post action

 $(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "https://turing-birdie.herokuapp.com/api/v1/posts.json",
    success: function(posts) {
      // console.table(posts);
      $.each(posts, function(index, post) {
        $("#latest-posts").append(
            "<div class='post' data-id='"
            + post.id
            + "'><h6>Published on "
            + post.created_at
            + "</h6><p>"
            + post.description
            + "</p></div>"
          )
      })
    }
  })

  $("#create-post").on("click", function() {
    var postParams = {
      post: {
        description: $("#post-description").val()
      }
    }
    // console.log(postParams)
    $.ajax({
      type: "POST",
      url: "https://turing-birdie.herokuapp.com/api/v1/posts.json",
      data: postParams,
      success: function(post) {
        $("#latest-posts").append(
            "<div class='post' data-id='"
            + post.id
            + "'><h6>Published on "
            + post.created_at
            + "</h6><p>"
            + post.description
            + "</p></div>"
        )
      }
    })
  })

})

Add POST example Workshop 1 Add DELETE example Workshop 2

Workshop

Workshop 1: Refresh

Right now, you have to reload the page to get the new posts. Can you modify your app so that the posts are reloaded when you click a button? Right now, there is some duplication when we render the template, can you refactor?

Workshop 2: Polling & PUT

Right now, you have to click on a button to refresh the feed. Can you check the server every 5 seconds to see if there are any new posts? Can you implement a PUT option to modify the data via AJAX?

Implementation

birdeck/assets/javascripts/birdeck.rb

$(document).ready(function() {
  fetchPosts()
  fetchPostsButton()
  pollData()
  createPost()
  deletePost()
})

function renderPost(post) {
  $("#latest-posts").append(
    "<div class='post' data-id='"
    + post.id
    + "'><h6>Published on "
    + post.created_at
    + "</h6><p>"
    + post.description
    + "</p>"
    + "<button id='delete-post' name='button-fetch' class='btn btn-default btn-xs'>Delete</button>"
    + "</div>"
    )
}

function fetchPostsButton() {
  $("#fetch-button-posts").on("click", function(){
    fetchPosts()
    })
}

function fetchPosts() {
  var newestItemID = parseInt($(".post").last().attr("data-id"))

  $.ajax({
    type:    "GET",
    url:     "https://turing-birdie.herokuapp.com/api/v1/posts.json",
    success: function(posts) {
      $.each(posts, function(index, post) {
        if (isNaN(newestItemID) || post.id > newestItemID) {
          renderPost(post)
        }
      })
    },
    error: function(xhr) {
      console.log(xhr.responseText)
    }
  })
}

function pollData() {
  setInterval(fetchPosts, 5000)
}

function createPost() {
  $("#create-post").on("click", function() {
    var postParams = {
      post: {
        description: $("#post-description").val()
      }
    }

    $.ajax({

      type:    "POST",
      url:     "https://turing-birdie.herokuapp.com/api/v1/posts.json",
      data:    postParams,
      success: function(newPost) {
        renderPost(newPost)
      },
      error: function(xhr) {
        console.log(xhr.responseText)
      }
    })
  })
}

function deletePost() {
  $('#latest-posts').delegate('#delete-post', 'click', function() {
    var $post = $(this).closest(“.post")

    $.ajax({
      type: 'DELETE',
      url: 'https://turing-birdie.herokuapp.com/api/v1/posts/' + $post.attr('data-id') + ".json",
      success: function() {
        $post.remove()
      },
      error: function(xhr) {
        console.log(xhr.responseText)
      }
    })
  })
}