-
Notifications
You must be signed in to change notification settings - Fork 0
/
ibdutils_index.html
115 lines (101 loc) · 4.04 KB
/
ibdutils_index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<title>Select2 AJAX Example</title>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Include Select2 CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
<!-- The select element -->
<div>
Sample 1:
<select id='sample1' class="mySelect2" style="width: 300px;">
<!-- Options will be populated by Select2 with AJAX -->
</select>
Sample 2:
<select id='sample2' class="mySelect2" style="width: 300px;">
<!-- Options will be populated by Select2 with AJAX -->
</select>
<button id="getPlot" onclick="submitPair()">Get Plot</button>
</div>
<div>
Interval (ms)
<input id='interval' type="text" value="500">
<button id='randomPlot' onclick="randomPair()">Random Pair and plot</button>
</div>
<div id="svg-container">
<!-- SVG will go here -->
</div>
<script>
// Your JavaScript code goes here
$(document).ready(function () {
// Initialize Select2
$('.mySelect2').select2({
ajax: {
type: "GET",
url: '/searchid', // The API URL
dataType: 'json', // Data type to expect from the server
delay: 250, // Rate-limiting to 250ms
data: function (params) {
return {
q: params.term, // The search term
page: params.page // The current page
};
},
processResults: function (data, params) {
// Map the API response to Select2's format
console.log(data);
return {
results: data.items,
pagination: {
more: false //(params.page * 30) < data.total_count
}
};
},
cache: true, // Enable caching
},
placeholder: 'Search for an item', // Placeholder text
minimumInputLength: 1 // Minimum number of characters required to trigger a search
});
});
let intervalId;
const randomPair = function () {
if (intervalId) {
clearInterval(intervalId);
}
let interval = document.getElementById('interval').value;
intervalId = setInterval(function () {
const url = `/plotibd?id1=0&id2=0`;
fetch(url)
.then(response => response.text())
.then(data => {
document.getElementById('svg-container').innerHTML = data;
});
}, interval);
}
randomPair(); // Initialize with default value
const submitPair = function () {
if (intervalId) {
clearInterval(intervalId);
}
const sample1 = document.getElementById('sample1').value;
const sample2 = document.getElementById('sample2').value;
// Construct the URL with query parameters
const url = `/plotibd?id1=${sample1}&id2=${sample2}`;
// Fetch data from the server
fetch(url)
.then(response => response.text()) // Assuming server responds with json
.then(text => {
// console.log(text); // Handle your server response here
document.getElementById("svg-container").innerHTML = text;
})
.catch((error) => {
console.error('Error fetching data:', error);
});
};
</script>
</body>
</html>