Skip to content

Instantly share code, notes, and snippets.

@kshoufer

kshoufer/Ajax-Store-w-edit.markdown

Last active November 9, 2015 23:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kshoufer/2d37d1fe870df169617f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kshoufer/2d37d1fe870df169617f to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ken Shoufer.
Raw
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.

Raw
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>
Raw
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>
Raw
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
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment