<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/VersatilityWerks/pen/yNXLNB?limit=all&page=45&q=json" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://versatilitywerks.github.io/jAlert/dist/jAlert.css'><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<style class="cp-pen-styles">#products
{
width: 100%;
}
#centerBtn
{
text-align: center;
margin-bottom: 10px;
}
.addProduct
{
margin-top: 20px !important;
}
.products
{
list-style: none;
border-top: 2px solid #555;
padding-top: 20px;
}
.editProduct
{
padding: 3px 10px;
background: rgb(26, 85, 213);
border: 2px solid rgb(18, 61, 155);
color: white;
}
.editProduct:hover
{
text-decoration: none;
color: white;
}
.removeProduct
{
padding: 3px 10px;
background: rgb(226, 0, 0);
border: 2px solid rgb(142, 0, 0);
color: white;
}
.removeProduct:hover
{
text-decoration: none;
color: white;
}</style></head><body>
<div id='centerBtn'>
<a href='#' class='addProduct ja_btn ja_btn_green'>Add Product</a>
</div>
<table id='products'>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th></th>
</thead>
<tbody>
</tbody>
</table>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://versatilitywerks.github.io/jAlert/dist/jAlert.min.js'></script>
<script >$(function(){
var $prodList = $('#products tbody'); //cache it
/* Attach editProduct handler so dynamically added will be caught */
$('body').on('click', '.editProduct', function(e){
e.preventDefault();
var btn = $(this),
tr = btn.parents('tr'),
name = tr.find('td').eq(0).text(),
price = tr.find('td').eq(1).text();
/* Popup an alert with the form */
$.jAlert({
'title': 'Edit product',
'content': '<form>Name:<br><input type="text" name="product_name" value="'+name+'">Price:<br><input type="text" value="'+price+'" name="price"></form>',
'onOpen': function(alert){
$('input[name="price"]').mask('$99.99');
alert.find('form').on('submit', function(e){
e.preventDefault();
});
},
'autofocus': 'input[name="product_name"]',
'btns': [
/* Add a save button */
{ 'text': 'Save', 'theme': 'green', 'closeAlert': false, 'onClick': function(e){
e.preventDefault();
var btn = $('#'+this.id),
alert = btn.parents('.jAlert'),
form = alert.find('form'),
name = form.find('input[name="product_name"]').val(),
price = form.find('input[name="price"]').val();
/* Verify required fields, validate data */
if( typeof name == 'undefined' || name == '' )
{
$.jAlert({
'title':'Error',
'theme':'reg',
'content': 'Please enter a name!'
});
return;
}
if( typeof price == 'undefined' || price == '' )
{
$.jAlert({
'title':'Error',
'theme':'reg',
'content': 'Please enter a price!'
});
return;
}
//make call to server with form.serialize() and store the product in your database, then return a json encoded object with success and msg.
//var response = { success: false, msg: 'Error saving' };
var response = { success: true, msg: 'Successfully saved!' };
/* If the response wasn't a success, show an error alert */
if( !response )
{
$.jAlert({
'title':'Error',
'theme':'red',
'content': response.msg
});
return;
}
/* If it was successful, show a success alert */
$.jAlert({
'title':'Success',
'theme':'green',
'content':response.msg
});
/* Add the product to the list with a remove button */
tr.replaceWith('<tr><td>'+name+'</td><td>'+price+'</td><td><a href="#" class="editProduct">Edit </a> <a href="#" class="removeProduct">Remove</a></td></tr>');
/* Close the alert */
alert.closeAlert();
return false;
}
}
]
});
});
/* Attach removeProduct handler so dynamically added will be caught */
$('body').on('click', '.removeProduct', function(e){
e.preventDefault();
var btn = $(this),
tr = btn.parents('tr');
/* Prompt to make sure the person means to actually remove the product */
$.jAlert({
'type':'confirm',
'onConfirm': function(e, btn){
//make a call to the server to remove it and if it fails, show an error
/* Remove the product from the list */
tr.remove();
return false;
}
});
return false;
});
/* Attach addProduct handler */
$('.addProduct').on('click', function(e){
e.preventDefault();
/* Popup an alert with the form */
$.jAlert({
'title': 'Add a product',
'content': '<form>Name:<br><input type="text" name="product_name">Price:<br><input type="text" name="price"></form>',
'onOpen': function(alert){
$('input[name="price"]').mask('$99.99');
alert.find('form').on('submit', function(e){
e.preventDefault();
});
},
'autofocus': 'input[name="product_name"]',
'btns': [
/* Add a save button */
{ 'text': 'Save', 'theme': 'green', 'closeAlert': false, 'onClick': function(e){
e.preventDefault();
var btn = $('#'+this.id),
alert = btn.parents('.jAlert'),
form = alert.find('form'),
name = form.find('input[name="product_name"]').val(),
price = form.find('input[name="price"]').val();
/* Verify required fields, validate data */
if( typeof name == 'undefined' || name == '' )
{
$.jAlert({
'title':'Error',
'theme':'reg',
'content': 'Please enter a name!'
});
return;
}
if( typeof price == 'undefined' || price == '' )
{
$.jAlert({
'title':'Error',
'theme':'reg',
'content': 'Please enter a price!'
});
return;
}
//make call to server with form.serialize() and store the product in your database, then return a json encoded object with success and msg.
//var response = { success: false, msg: 'Error saving' };
var response = { success: true, msg: 'Successfully saved!' };
/* If the response wasn't a success, show an error alert */
if( !response )
{
$.jAlert({
'title':'Error',
'theme':'red',
'content': response.msg
});
return;
}
/* If it was successful, show a success alert */
$.jAlert({
'title':'Success',
'theme':'green',
'content': response.msg
});
/* Add the product to the list with a remove button */
$prodList.append('<tr><td>'+name+'</td><td>'+price+'</td><td><a href="#" class="editProduct">Edit </a> <a href="#" class="removeProduct">Remove</a></td></tr>');
/* Close the alert */
alert.closeAlert();
return false;
}}
]
});
});
});
/*
jQuery Masked Input Plugin
Copyright (c) 2007 - 2014 Josh Bush (digitalbush.com)
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
Version: 1.4.0
*/
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){var b,c=navigator.userAgent,d=/iphone/i.test(c),e=/chrome/i.test(c),f=/android/i.test(c);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(c,g){var h,i,j,k,l,m,n,o;if(!c&&this.length>0){h=a(this[0]);var p=h.data(a.mask.dataName);return p?p():void 0}return g=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},g),i=a.mask.definitions,j=[],k=n=c.length,l=null,a.each(c.split(""),function(a,b){"?"==b?(n--,k=a):i[b]?(j.push(new RegExp(i[b])),null===l&&(l=j.length-1),k>a&&(m=j.length-1)):j.push(null)}),this.trigger("unmask").each(function(){function h(){if(g.completed){for(var a=l;m>=a;a++){if (window.CP.shouldStopExecution(1)){break;}if(j[a]&&C[a]===p(a))return;
window.CP.exitedLoop(1);
}g.completed.call(B)}}function p(a){return g.placeholder.charAt(a<g.placeholder.length?a:0)}function q(a){for(;++a<n&&!j[a];){if (window.CP.shouldStopExecution(2)){break;};}
window.CP.exitedLoop(2);
return a}function r(a){for(;--a>=0&&!j[a];){if (window.CP.shouldStopExecution(3)){break;};}
window.CP.exitedLoop(3);
return a}function s(a,b){var c,d;if(!(0>a)){for(c=a,d=q(b);n>c;c++){if (window.CP.shouldStopExecution(4)){break;}if(j[c]){if(!(n>d&&j[c].test(C[d])))break;C[c]=C[d],C[d]=p(d),d=q(d)}}
window.CP.exitedLoop(4);
z(),B.caret(Math.max(l,a))}}function t(a){var b,c,d,e;for(b=a,c=p(a);n>b;b++){if (window.CP.shouldStopExecution(5)){break;}if(j[b]){if(d=q(b),e=C[b],C[b]=c,!(n>d&&j[d].test(e)))break;c=e}
window.CP.exitedLoop(5);
}}function u(){var a=B.val(),b=B.caret();if(a.length<o.length){for(A(!0);b.begin>0&&!j[b.begin-1];){if (window.CP.shouldStopExecution(6)){break;}b.begin--;
window.CP.exitedLoop(6);
}if(0===b.begin)for(;b.begin<l&&!j[b.begin];){if (window.CP.shouldStopExecution(7)){break;}b.begin++;}
window.CP.exitedLoop(7);
B.caret(b.begin,b.begin)}else{for(A(!0);b.begin<n&&!j[b.begin];){if (window.CP.shouldStopExecution(8)){break;}b.begin++;}
window.CP.exitedLoop(8);
B.caret(b.begin,b.begin)}h()}function v(){A(),B.val()!=E&&B.change()}function w(a){if(!B.prop("readonly")){var b,c,e,f=a.which||a.keyCode;o=B.val(),8===f||46===f||d&&127===f?(b=B.caret(),c=b.begin,e=b.end,e-c===0&&(c=46!==f?r(c):e=q(c-1),e=46===f?q(e):e),y(c,e),s(c,e-1),a.preventDefault()):13===f?v.call(this,a):27===f&&(B.val(E),B.caret(0,A()),a.preventDefault())}}function x(b){if(!B.prop("readonly")){var c,d,e,g=b.which||b.keyCode,i=B.caret();if(!(b.ctrlKey||b.altKey||b.metaKey||32>g)&&g&&13!==g){if(i.end-i.begin!==0&&(y(i.begin,i.end),s(i.begin,i.end-1)),c=q(i.begin-1),n>c&&(d=String.fromCharCode(g),j[c].test(d))){if(t(c),C[c]=d,z(),e=q(c),f){var k=function(){a.proxy(a.fn.caret,B,e)()};setTimeout(k,0)}else B.caret(e);i.begin<=m&&h()}b.preventDefault()}}}function y(a,b){var c;for(c=a;b>c&&n>c;c++){if (window.CP.shouldStopExecution(9)){break;}j[c]&&(C[c]=p(c))}
window.CP.exitedLoop(9);
}function z(){B.val(C.join(""))}function A(a){var b,c,d,e=B.val(),f=-1;for(b=0,d=0;n>b;b++){if (window.CP.shouldStopExecution(11)){break;}if(j[b]){for(C[b]=p(b);d++<e.length;){if (window.CP.shouldStopExecution(10)){break;}if(c=e.charAt(d-1),j[b].test(c)){C[b]=c,f=b;break}}
window.CP.exitedLoop(10);
if(d>e.length){y(b+1,n);break}}else C[b]===e.charAt(d)&&d++,k>b&&(f=b);}
window.CP.exitedLoop(11);
return a?z():k>f+1?g.autoclear||C.join("")===D?(B.val()&&B.val(""),y(0,n)):z():(z(),B.val(B.val().substring(0,f+1))),k?b:l}var B=a(this),C=a.map(c.split(""),function(a,b){return"?"!=a?i[a]?p(b):a:void 0}),D=C.join(""),E=B.val();B.data(a.mask.dataName,function(){return a.map(C,function(a,b){return j[b]&&a!=p(b)?a:null}).join("")}),B.one("unmask",function(){B.off(".mask").removeData(a.mask.dataName)}).on("focus.mask",function(){if(!B.prop("readonly")){clearTimeout(b);var a;E=B.val(),a=A(),b=setTimeout(function(){z(),a==c.replace("?","").length?B.caret(0,a):B.caret(a)},10)}}).on("blur.mask",v).on("keydown.mask",w).on("keypress.mask",x).on("input.mask paste.mask",function(){B.prop("readonly")||setTimeout(function(){var a=A(!0);B.caret(a),h()},0)}),e&&f&&B.off("input.mask").on("input.mask",u),A()})}})});
//# sourceURL=pen.js
</script>
</body></html>
