Mercurial > hg > NetworkVis

comparison query_builder/ismi.html @ 26:22be4ea663a7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Trying to work out having json request from neo4j display properly in drop down selectize box
author arussell
date Tue, 01 Dec 2015 02:07:13 -0500
parents
children ed8b4e3f2a73
comparison
equal deleted inserted replaced
25:f82512502b31 26:22be4ea663a7
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
5 <title>Query Builder</title>
6 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7 <link rel="stylesheet" href="bootstrap/bootstrap-slider/css/bootstrap-slider.css">
8 <link rel="stylesheet" href="selectize/dist/css/selectize.default.css">
9 <link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap-select.min.css">
10 <link rel="stylesheet" href="selectize/dist/css/selectize.bootstrap3.css">
11 <link rel="stylesheet" href="css/query-builder.default.min.css">
12
13
14 </head>
15 <body style="background:none;">
16 <div role="navigation" class="navbar navbar-default navbar-static-top">
17 <div class="container">
18 <div class="row">
19 <div class="col-sm-6 col-md-6">
20 <ul class="nav navbar-nav">
21 </ul>
22 </div>
23 <div class="navbar-header col-sm-6 col-md-6">
24 <div class="logo-well">
25 <a href="//neo4j.com/developer-resources">
26 <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
27 </a>
28 </div>
29 <div class="navbar-brand">
30 <div class="brand">ISMI Query Builder</div>
31 </div>
32 </div>
33 </div>
34 </div>
35 </div>
36 <div class="container">
37 <div class="row" style="width: 95%">
38 <div class="col-md-12">
39 <div class="panel panel-default">
40 <div class="panel-heading" id="title">Query Builder</div>
41
42
43
44
45 <div class="sandbox">
46 <label for="select-codex">Codex:</label>
47 <select id="select-codex" class="codices selectized" placeholder="Choose a codex" tabindex="-1" style="display: none;"></select>
48 </div>
49
50
51
52
53
54
55
56 </div>
57 </div>
58 </div>
59 </div>
60
61
62
63 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
64 <script type="text/javascript" src="js/d3.min.js"></script>
65 <script type="text/javascript" src="moment/min/moment.min.js"></script>
66 <script type="text/javascript" src="bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
67 <script type="text/javascript" src="bootstrap/bootstrap-slider/js/bootstrap-slider.js"></script>
68 <script type="text/javascript" src="selectize/dist/js/standalone/selectize.min.js"></script>
69 <script type="text/javascript" src="bootstrap-select/dist/js/bootstrap-select.min.js"></script>
70 <script type="text/javascript" src="js/query-builder.standalone.min.js"></script>
71
72 <script>
73 var refreshDropdown = function(query, callback) {
74 $.getJSON('url/suppliers', function (results) {
75 if (results) {
76 var selectOptions = [];
77 for (var index = 0, length = results.length; index < length; index++) {
78 var item = results[index];
79 selectOptions.push({
80 text: item.Option,
81 value: item.Id.toString()
82 });
83 }
84
85 var selectize = $("#Supplier")[0].selectize;
86 selectize.clear();
87 selectize.clearOptions();
88 selectize.load(function (callback) {
89 callback(selectOptions);
90 });
91 }
92 })
93 };
94
95 $('#select-codex').selectize({
96 valueField: 'title',
97 labelField: 'title',
98 searchField: 'title',
99 options: [],
100 create: false,
101 render: {
102 option: function(item, escape) {
103 console.log(item[0].data.label);
104 return '<div>' +
105 '<span class="codex">' + escape(item.label) + '</span>' +
106 '</div>';
107 }
108 },
109 load: function(query, callback) {
110 //if (!query.length) return callback();
111 $.ajax({
112 type: "POST",
113 url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher",
114 accepts: "application/json",
115 dataType: "json",
116 data: {
117 "query": "match (codex:CODEX) return codex limit 25",
118 "params": {}
119 },
120 beforeSend: function (xhr) {
121 xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j'));
122 },
123 success: function (res, textStatus, jqXHR) {
124 console.log("success");
125 optionArray=[];
126 res.data.forEach(function(arr) {
127 optionArray.push(arr[0].data);
128 });
129 console.log(optionArray);
130 callback(optionArray);
131 },
132 error: function (jqXHR, textStatus, errorThrown) {
133 console.log("error");
134 callback();
135 }
136 });
137
138 }
139 });
140
141
142
143
144 </script>
145
146 </body>
147 </html>