-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (93 loc) · 3.14 KB
/
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
116
117
118
<html>
<head>
<title>RolePoint exercise by Marcos Edo Atienza ....</title>
<link rel="stylesheet" href="resources/css/rolepoint.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="mainLayer">
<div id="pagetitle">
<img src="resources/images/topete.jpg"/>
<h1 class="mainTitle">RolePoint exercise</h1>
<div id=form_div>
<form id="searchForm" action="search.py">
<br>
<b>Search regexp:</b>
<input type="text" id="search_string" value="" hint="Type something ..." autofocus/>
<button id="search_button" type="submit" class="button">Search</button>
<br>
</form>
</div>
</div>
<div id=targetLayer>
<p id = nresults></p>
<table id=results_table></table>
</div>
<script>
// this is the id of the form
$("#searchForm").submit(function(e) {
// avoid to execute the actual submit of the form
e.preventDefault();
var formData = new FormData();
var search_string = $('#search_string').val();
var form = $(this);
var url = form.attr('action');
formData.append('search_string', search_string);
var xhr = $.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
return xhr;
},
type: 'POST',
url: url,
data: formData,
processData:false,
contentType: false,
error:function(response){
alert("Something went wrong ...");
},
complete:function(response) {
displayResults(response.responseText);
}
});
});
function displayResults(json) {
columns = ['Name','City','Email','Company','Country','Job History']
results = JSON.parse(json);
// Select table
var table = $('#results_table');
// Make sure table is empty before adding anything
table.empty();
// Add bumber of results
$('#nresults').html(results.length + " result(s) found");
// We don't wwant to do anything if there are no results
if (results.length == 0) {
return
}
// Add table column titles
var row = $("<tr>");
for (var i=0; i< columns.length; i++) {
row.append($("<th>").addClass('titleRow').text(columns[i]))
}
table.append(row)
for (var i = 0; i < results.length; i++) {
result = results[i]
// Add classes for even and odd rows
if (i % 2 == 0) {
row = $("<tr>").addClass('evenRow')
} else {
row = $("<tr>").addClass('oddRow')
}
// Add a result row
row.append($("<td>").addClass('tText').attr('id', 'row_'+i.toString()).text(result['name']));
row.append($("<td>").addClass('tText').attr('id', 'row_'+i.toString()).text(result['city']));
row.append($("<td>").addClass('tText').attr('id', 'row_'+i.toString()).text(result['email']));
row.append($("<td>").addClass('tText').attr('id', 'row_'+i.toString()).text(result['company']));
row.append($("<td>").addClass('tText').attr('id', 'row_'+i.toString()).text(result['country']));
row.append($("<td>").addClass('tText').attr('id', 'row_'+i.toString()).text(result['job_history']));
table.append(row)
}
}
</script>
</body>
</html>