A Pen by Ken Shoufer.

Ajax-Store-w-edit.markdown

Ajax Store w/edit

This Ajax example communicates with an API on a remote server. The server data is in JSON format.

A Pen by Ken Shoufer on CodePen.

License.

header-libraries

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>

index.html

<h1>Ajax Tutorial1</h1>

        <h2>Coffee Orders</h2>

    <template id="order-template">
        <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>
    </template>

    <div id="ordersContainer">
        <ul id="orders"></ul>

        <h4>Add a Coffee Order</h4>
        <p> name: <input type="text" id="name"></p>
        <p> drink: <input type="text" id="drink"></p>
    </div>

        <button id="add-order">Add!</button>

script.js

$(function () {
	var $orders = $('#orders');
	var $name = $('#name');
	var $drink = $('#drink');

	var orderTemplate = $('#order-template').html();

	function addOrder (order) {
		$orders.append(Mustache.render(orderTemplate, order));
	}

	$.ajax({
	  type: 'GET',
	  url: 'http://rest.learncode.academy/api/test1API/orders',
	  //data: {name: 'Frank', drink: 'Americano'},
	  success: function(orders) {
	    $.each(orders, function(i, order) {
			addOrder(order);
	    });
	  },
	  error: function() {
	  	console.log('error loading orders');
	  }
	});

	$('#add-order').on('click', function() {

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

		$.ajax({
			type: 'POST',
			url: 'http://rest.learncode.academy/api/test1API/orders',
			data: order,
			success: function(newOrder) {
				addOrder(newOrder);
			},
			error: function() {
				console.log('error saving order');			
			}
		});
	});//end #add-order

	$orders.delegate('.remove', 'click', function() {
		
		var $li = $(this).closest('li');

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


	});//end remove on click

	$orders.delegate('.editOrder', 'click', function() {
		
		var $li = $(this).closest('li');
		$li.find('input.name').val($li.find('span.name').html());
		$li.find('input.drink').val($li.find('span.drink').html());		
		$li.addClass('edit');
	});//end editOrder on click

	$orders.delegate('.cancelEdit', 'click', function() {
		
		$(this).closest('li').removeClass('edit');
	});//end cancelEdit on click

	$orders.delegate('.saveEdit', 'click', function() {
		
		var $li = $(this).closest('li');
		var order = {
			name: $li.find('input.name').val(),
			drink: $li.find('input.drink').val()
		};

		$.ajax({
			type: 'PUT',
			url: 'http://rest.learncode.academy/api/test1API/orders/' + $li.attr('data-id'),
			data: order,
			success: function(newOrder) {
				$li.find('span.name').html(order.name);
				$li.find('span.drink').html(order.drink);
				$li.removeClass('edit');
			},
			error: function() {
				console.log('error updating order');			
			}
		});

	});//end saveEdit on click



})// the end

style.css

#orders li {
    background-color: #ccc;
    width: 400px;
    margin: 20px;
    padding: 10px;
    list-style: none;
}

#orders li .edit {
    display: none;
}   

#orders li.edit .edit {
    display: initial;
}     

#orders li.edit .noedit {
    display: none;
}