Skip to content

Instantly share code, notes, and snippets.

@krisrice

krisrice/jsbin.uBOKogiV.html

Created December 31, 2013 21:36
Show Gist options
  • Save krisrice/8202451 to your computer and use it in GitHub Desktop.
Save krisrice/8202451 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.uBOKogiV.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<title>JS Bin</title>
<style type="text/css">
.demo {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}.demo table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.demo tr:last-child td:last-child {
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
}
.demo table tr:first-child td:first-child {
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}
.demo tr:last-child td:first-child{
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
}.demo tr:hover td{
}
.demo tr:nth-child(odd){ background-color:#e5e5e5; }
.demo tr:nth-child(even) { background-color:#ffffff; }.demo td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:3px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.demo tr:last-child td{
border-width:0px 1px 0px 0px;
}.demo tr td:last-child{
border-width:0px 0px 1px 0px;
}.demo tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="accordion">
<!-- CREATE -->
<h3>Create Collection</h3>
<div>
<form id="createForm" action="javascript:void(0);">
<button id="create">Create</button>
<input type="text" id="name" name="name"/>
</form>
</div>
<!-- PUTS -->
<h3>Put Items into the Collection</h3>
<div>
<form id="putForm" action="javascript:void(0);">
<button id="puts">Put</button>
<select id="putdbname" name="putdbname" style="width:200px;">
</select>
<select id="num" name="num" style="width:200px;">
<option>1</option>
<option>10</option>
<option>100</option>
<option>1000</option>
<option>10000</option>
</select>
</form>
</div>
<!-- QUERY -->
<h3>Query a Collection</h3>
<div>
<form id="queryForm" action="javascript:void(0);">
<button id="query">Query</button>
<select id="querydbname" name="querydbname" style="width:200px;">
</select>
<input type="text" id="search" name="search"/>
</form>
</div>
<!-- DELETE -->
<h3>Delete a Collection</h3>
<div>
<form id="deleteForm" action="javascript:void(0);">
<button id="delete">Delete</button>
<select id="deldbname" name="deldbname" style="width:200px;">
</select>
</form>
</div>
</div>
<div id="log">Log:</div>
</body>
</html>
Raw
jsbin.uBOKogiV.js
$(document).ready(function() {
$(function() {
$( "#accordion" ).accordion();
});
// setup buttons
$("#create").click(function(){createCollection();});
$("#puts").click(function(){
createItems($("#putdbname").val(),$("#num").val());
});
$("#query").click(function(){
queryItems($("#querydbname").val(),$("#search").val());
});
$("#delete").click(function(){
deleteCollection( $("#deldbname").val() );
});
// load names
loadCollectionNames();
});
//
// Filter all AJAX calls and time them
//
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.start = new Date().getTime();
if ( options.success ) {
options.realsuccess = options.success;
}
options.success = function( data ) {
var end = new Date().getTime();
$("#log").prepend("<div>Elapsed:"+ (end - options.start)+ "ms</div>");
if ( options.realsuccess ) options.realsuccess( data );
};
});
//
//
// Grabs forms and formats them to json
//
$.fn.serializeObject = function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
//
// Create a collection and reload the list of collections
//
function createCollection(){
var sendInfo = JSON.stringify($('#createForm').serializeObject());
console.log(sendInfo);
$.ajax({
url: "https://apex.oracle.com/pls/apex/dbtools/db/creates",
contentType: "application/json",
data : sendInfo,
type: "POST",
success: function (data) {
$("#log").prepend("<div>Added: NAME="+sendInfo+"</div>");
console.log(data);
loadCollectionNames();
}
});
}
//
// Delete a collection and reload the list of collections
//
function deleteCollection(name){
$.ajax({
url: "https://apex.oracle.com/pls/apex/dbtools/db/" + name,
type: "DELETE",
success: function (data) {
$("#log").prepend("<div>Deleted: NAME="+ name +"</div>");
console.log(data);
loadCollectionNames();
}
});
}
//
// Add items to a collections
//
function createItems(name,num){
$.ajax({
url: "https://apex.oracle.com/pls/apex/dbtools/names/random?num=" + num,
contentType: "application/json",
type: "GET",
success: function (data) {
$("#log").append("<div>Got:"+ data.items.length+ "</div>");
$.each(data.items, function(key,value) {
console.log(JSON.stringify(value));
var uri = "https://apex.oracle.com/pls/apex/dbtools/db/" + name + "/" + value.guid;
$.ajax({
url: uri,
type: "PUT",
data : JSON.stringify(value),
success: function (data) {
console.log("Added:");
$("#log").prepend("<div>Added:<a href='"+uri+"' target='_new'>"+ uri+ "</a></div>");
}
});
});
}
});
}
// load names
function loadCollectionNames(){
$.ajax({
url: "http://apex.oracle.com/pls/apex/dbtools/db/list",
contentType: "application/json",
type: "GET",
success: function (data) {
$("#log").prepend("<div>Got:"+ data.items.length+ "</div>");
// clear old select list
$('#putdbname').find('option').remove();
$('#querydbname').find('option').remove();
$('#deldbname').find('option').remove();
// add in new select list
$.each(data.items, function(key,value) {
var cname = value.collection_name;
$('#putdbname').append($("<option></option>").attr("value",cname).text(cname));
$('#querydbname').append($("<option></option>").attr("value",cname).text(cname));
$('#deldbname').append($("<option></option>").attr("value",cname).text(cname));
});
console.log(data);
}
});
}
//
// Query a collection
//
function queryItems(name,path){
var uri = "https://apex.oracle.com/pls/apex/dbtools/db/" + name;
console.log("Query:"+uri);
$.ajax({
url: uri,
type: "GET",
success: function (data) {
var d=jQuery.parseJSON( data );
console.log(d);
$("#log").prepend("<div class='demo'><table id='results'></table></div>");
$.each(d.items, function(key,value) {
var row="<tr>";
jQuery.each(value, function(i, val) {
row = row +"<td>" + val+"</td>";
});
$("#results").append(row + "</tr>");
});
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment