jQuery Ajax (get,post,delete)

by ndw5015

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<div class="container">
      <h1>Ajax</h1>
      <ul id="orders">
        <!-- <li>name: Mike, drink: Bai</li>
        <li>name: Sarah, drink: milk</li> -->
      </ul>

      <h4>Add a Coffee Order</h4>
      <p>name: <input type="text" name="name" id="name"></p>
      <p>drink: <input type="text" name="drink" id="drink"></p>
      <button id="add-order">Add Order !</button>
    </div>

JavaScript

// Place JS here.
$(function(){

	var $orders = $('#orders');
	var $body = $('body');
	var name = $('#name');
	var drink = $('#drink');

    var ordersTemplate = "" +
     "<li data-id='{{id}}'>" +
     "<p><strong>name:</strong> <span class='noedit name'>{{name}}</span><input class='edit name'/></p>" +
     "<p><strong>drink:</strong> <span class='noedit drink'>{{drink}}</span><input class='edit drink'/></p>" +
     "<button data-id='{{id}}' class='remove'>X</button> <button class='editOrder noedit'>Edit</button> <button class='saveEdit edit'>Save</button> <button class='cancelEdit edit'>Cancel</button>"
     "</li>";

	function addOrder(value){
		$orders.append(Mustache.render(ordersTemplate, value));
	}

	//get JSON data
	$.ajax({
        type:'GET',
		url: 'http://rest.learncode.academy/api/learncode/friends/',
		success: function(data){
			//console.log('success', data);
			$.each(data, function(key, value){
				addOrder(value);
			})
		},
		error: function(){
			$body.empty();
			$body.append('<h1>ERROR LOADING CONTENT</h1>');
		}		
	});

	//Post JSON data
	$('#add-order').on('click',function(){

		var order = {
			name: name.val(),
			drink: drink.val(),
		};

		console.log(name.val() + ' ' + drink.val());

		$.ajax({
            type:'POST',
			url: 'http://rest.learncode.academy/api/learncode/friends',
			data: order,
			success: function(newValue){
				addOrder(newValue);
			},
			error: function(){
				console.log('post error');
			}
		});

	});

    //delete post
    $orders.delegate('.remove','click', function(){

        var $li = $(this).closest('li');

        console.log('http://rest.learncode.academy/api/learncode/friends/' + $(this).attr('data-id'));

        $.ajax({
            type: 'DELETE',
            url: 'http://rest.learncode.academy/api/learncode/friends/' + $(this).attr('data-id'),
            success: function(){
                $li.remove();
            },
        });
    });

    //edit post
   ...