-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinClass3.html
202 lines (180 loc) · 8.77 KB
/
inClass3.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-metro.css">
<script>
//change on the drop down
function drpJSON() {
var data_file = "https://spandan22.github.io/TheCatCoder.AdvancedJavascript.github.io/BookJson.json";
var http_request = new XMLHttpRequest();
try {
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function () {
if (http_request.readyState == 4) {
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj variable now contains the data structure and can
// be accessed as jsonObj.name and jsonObj.country.
var Title = "";
var Author = "";
// Runs when a dropdown is selected
for (var i = 0; i < jsonObj.book.length; i++) {
if (jsonObj.book[i].authorid == document.getElementById("BookSel").value
&& document.getElementById("BookSel").value != 0) {
Title = Title + jsonObj.book[i].Title + "<br>";
Author = Author + jsonObj.book[i].Author + "<br>"
var selection = i;
console.log(i);
}
}
document.getElementById("Title").innerHTML = Title;
document.getElementById("Author").innerHTML = Author;
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
//for the write in element
function wrtJSON() {
var data_file = "https://spandan22.github.io/TheCatCoder.AdvancedJavascript.github.io/BookJson.json";
var http_request = new XMLHttpRequest();
try {
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function () {
if (http_request.readyState == 4) {
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj variable now contains the data structure and can
// be accessed as jsonObj.name and jsonObj.country.
var Title = "";
var Author = "";
for (var i = 0; i < jsonObj.book.length; i++) {
//WRITE JSON AKA the Text Box code
if (jsonObj.book[i].Author.indexOf(document.getElementById("AuthorName").value) > -1
&& document.getElementById("AuthorName").value != "") {
// console.log(jsonObj.book[i].Author.indexOf(document.getElementById("AuthorName").value) +
// " is the value of of the first compared element and can't be -1");
// console.log(document.getElementById("AuthorName").value + " is the second element and can't be empty string");
// console.log(Title + " is what's in the Title variable");
// console.log(Author + " is what's in the Author variable");
Title = Title + jsonObj.book[i].Title + "<br>";
Author = Author + jsonObj.book[i].Author + "<br>";
var selection = i;
// console.log("Write funtion is on index " + i);
}
}
document.getElementById("booklist").innerHTML = "";
document.getElementById("Title").innerHTML = Title;
document.getElementById("Author").innerHTML = Author;
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
<title>The Booklist AJAX Exercise</title>
</head>
<body class="w3-metro-teal"><center>
<div class="w3-bar w3-light-grey"><h1>Book Lookup - Musser</h1></div>
<div class="w3-container">
<div class="w3-panel">
<br><br>
<h3>Use the dropdown and text field below to search the book list</h3>
<div class="central">Select a Book Number:
<select id='BookSel' onchange ="drpJSON()">
</select>
<br><br>
Or Enter a Author: <input type="text" name="AuthorName" id="AuthorName" onkeyup="wrtJSON()">
<input type="button" onclick="wrtJSON()" value="Pick">
</div>
<br>
<div class="w3-container">
<div class="w3-panel">
<table class="w3-table w3-bordered">
<!-- <table class="src"> -->
<tr>
<th>Title</th>
<th>Author</th>
</tr>
<tr class="w3-hover-blue">
<td><div id="Title">None Selected</div></td>
<td><div id="Author">None Selected</div></td>
</tr>
<tr>
<td><div id="booklist"></div></td>
<!-- booklist doesn't need to exist... -->
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var data_file = "https://spandan22.github.io/TheCatCoder.AdvancedJavascript.github.io/BookJson.json";
var http_request = new XMLHttpRequest();
try {
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
}
}
}
http_request.onreadystatechange = function () {
if (http_request.readyState == 4) {
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
var text = "<option value='0'>--</option>";
for (var i = 0; i < jsonObj.book.length; i++) {
text = text + "<option value= '" + jsonObj.book[i].authorid
+ "'> " + jsonObj.book[i].Title + "</option>";
}
document.getElementById("BookSel").innerHTML = text;
}
}
http_request.open("GET", data_file, true);
http_request.send();
</script>
</body>
</html>