Job Search API
getFields
Input: null
Returns: JSON : fields
URL: /api/jobs/fields
getSingleJob
Input: string : VacancyID
Returns: JSON : Vacancy Details
URL: /api/jobs/view/{VACANCYID}
search
Input: string : queryString
Returns JSON : Search Results
URL: /api/jobs/jobs?
Examples
Return all jobs that contain a text string of test
/api/jobs/jobs?$text=test
As you can fetch the job fields, you can also search on those, in my example I have a field called V_LOC which contains the location of a vacancy
/api/jobs/jobs?V_LOC=Edinburgh&$text=Programmer
This would return all vacancies that have “Edinburgh” in their V_LOC field that matches the text string “Programmer”
To return all vacancies - don't send any query strings
/api/jobs/jobs
There is a fully working example of the APIs with source code on the “examples” tab above.
Setup Job Search Widget
Use this widget to embed a search form onto your own website.
First, copy and paste the below code where you would like the search form to be
col-md-* is used as an example for bootstrap websites, your website may use a different grid system or a different column class.
<style>
/* if debugging set this to BLOCK */
#debugBlock{
display:block;
}
#jobTable{
width:100%!important;
display:none;
}
#jobsearch, .advanced-field-element{
padding: 12px;
margin: 6px 0 4px;
border: 1px solid #ccc;
background: #fafafa;
font-family: sans-serif;
font-size: 12px;
line-height: normal;
box-sizing: border-box;
border-radius: 2px;
}
.advanced-field-element{
width:100%!important;
}
#searchButton, .applyButton{
display: inline-block;
width: auto;
height: auto;
padding: 0.3em 2.5em;
border-width: 0;
text-align: center;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.jobTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.jobTable td, .jobTable th {
border: 1px solid #ddd;
padding: 8px;
}
.jobTable tr:nth-child(even){
background-color: #f2f2f2;
}
.jobTable tr:hover {
background-color: #ddd;
}
.jobTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #6900a2;
color: white;
}
.codeBlock{
background-color: #eee;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.modal {
display: none;
position: fixed;
z-index: 9999999999999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 2% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
}
.error {
color: #D8000C;
background-color: #FFBABA;
}
.sorting_disabled{
text-align: center!important;
}
.dataTables_wrapper{
overflow-x:auto;
}
.dataTables_wrapper .odd, .dataTables_wrapper .even{
cursor:pointer;
}
#DsimpleSearch, #dadvancedSearch{
text-align: center;
}
#dadvancedSearch{
display:none;
}
.modalButtons, #modalButtons{
float:right;
}
.clearfix{
clear:both;
}
</style>
<div class="col-md-4">
<div class="row">
<div id="DsimpleSearch">
<h2>Simple Search</h2>
<form action="#" method="get" id="simpleSearch" onSubmit="doBasicSearch();return false;">
<input type="text" id="jobsearch" name="jobsearch" class="field-element field-control" placeholder="Search for Jobs">
<button name="searchButton" onClick="doBasicSearch();return false;" id="searchButton" class="btn btn-primary">Search</button>
<div>
<a href="#" onClick="showAdvancedSearch(); return false;">Advanced Search</a>
</div>
</form>
</div>
<div id="dadvancedSearch">
<h2>Advanced Search</h2>
<form action="#" method="get" id="advancedSearch" onSubmit="doAdvancedSearch();return false;" >
<label for='$text'>Keyword</label>
<br>
<input type='text' id='$text' name='$text' class='form-control' placeholder='Keyword(s)'>
<br />
<div id="advancedFields">
<!-- Fields auto generated here -->
</div>
<br>
<button name='searchButton' onClick='doAdvancedSearch();return false;' id='searchButton' class='btn btn-primary'>Advanced Search</button>
<div>
<a href="#" onClick="showSimpleSearch(); return false;">Simple Search</a>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<div id="jobsFeedback"></div>
<table id="jobTable" class="jobTable table table-responsive">
<thead>
<tr>
<th>Position</th>
<th>Job Type</th>
<th>Department</th>
<th>Start Date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="jobTableBody">
</tbody>
</table>
<div id="debugBlock">
<br>
<h1>Response from Server</h1>
<pre id="searchResults" class="codeBlock">{ }</pre>
</div>
</div>
<div id="jobModal" class="modal">
<div class="modal-content">
<span class="close" onClick="closeDialog();return false;">×</span>
<div id="modalMainContent">
Loading ...
</div>
<br><br>
<div id="modalButtons">
</div>
<div class="clearfix"> </div>
</div>
</div>
Then copy and paste the following in the footer of your website.
Replace YOURWEBSITE-HERE with the full domain (or subdomain) where IQXWeb is installed, remember to keep the prepending / / and ending /
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script>
/*
* Change this URL to point to the domain/subdomain of where IQXWeb is hosted.
*/
var searchURL="//YOURWEBSITE-HERE/";
/*
* Init the data table
*/
var table = $('#jobTable').DataTable({
"paging": true,
"ordering": true,
"info": true,
"searching": false,
"fixedHeader": false,
"order": [[ 3, "desc" ]],
"columnDefs": [{
"targets":[4],
"visible": false
},
{
"targets":[2],
"visible": false
}]
});
/* doBasicSearch
@input: null
@returns: null
@desc: This will trigger the basic search, jQuery will fetch the input
*/
function doBasicSearch() {
if ($('#jobsearch').val() == "") {
getJobsOfTheDay();
} else {
var searchTerm = "$text="+$('#jobsearch').val();
search(searchTerm);
}
}
/* doAdvancedSearch
@input: null
@returns: null
@desc: This will trigger the advanced search, jQuery will serialize the advanced search form
*/
function doAdvancedSearch(){
var q = $( "#advancedSearch :input").filter(function () {
return !!this.value;
}).serialize();
search(q);
}
/* getFields
@input: null
@returns: null
@desc: This will fetch the advanced search form fields and pass them to generateField()
*/
function getFields() {
$.getJSON( searchURL+"api/jobs/fields", function( data ) {
$.each( data.IQXResult.Row, function( index, value ){
generateField(value)
});
});
}
/* getSingleJob
@input: single job vacancyID
@returns: null
@desc: This will fetch a single job and output it to a modal
*/
function getSingleJob(vacID){
$.getJSON( searchURL+"api/jobs/view/"+vacID, function( data ) {
delete data.IQXResult.Row[0]._id
var table="<table class='jobTable'><tr><th> </th><th> </th></tr>";
$.each( data.IQXResult.Row[0], function( index, value ){
if (index.startsWith("Q_") || index.startsWith("XQ_") || index.startsWith("vacancyid")) {
// Do Nothing
} else {
table=table+"<tr><td>"+toTitleCase(index)+"</td><td>"+value.replace(/(?:\r\n|\r|\n)/g, '<br />')+"</td></tr>";
}
});
table=table+"</table>";
$('#modalMainContent').html( table );
$('#modalButtons').html("<a href='"+searchURL+"#/jobsearch/results?viewjob="+vacID+"' id='applyLink' class='button sqs-system-button sqs-editable-button'>Apply</a> <button name='closeButton' onClick='closeDialog();return false;' id='closeButton' class='button sqs-system-button sqs-editable-button'>Close</button>")
});
}
/* search
@input: query string, noscroll
@returns: null
@desc: This will send a request to the API job search and pass the results to drawTable(i) you can pass an optional noscroll=true to stop the page scrolling to the results table.
*/
function search(q, noscroll){
noscroll = noscroll || false
$('#jobTable').slideUp();
$('#jobsFeedback').html("<center><strong>Loading ...</strong></center>");
$('#jobsFeedback').slideDown();
$.getJSON( searchURL+"api/jobs/jobs?"+q, function( data ) {
$('#searchResults').html( JSON.stringify(data, null, "\t") );
if (data.IQXResult.IQXFailure) {
resetTable();
$('#jobTable').slideUp();
$('#jobsFeedback').html("<div class='error'>There was an error processing your request.<br />Please try the following:<ul><li>If you are using the simple search, ensure you have typed something into the box</li><li>If you are using the advanced search, ensure the required fields are not empty</li></ul></div>");
} else {
if (data.IQXResult.Row.length==0) {
resetTable();
$('#jobTable').slideUp();
$('#jobsFeedback').html("<div class='info'>Your search returned 0 jobs.</div>");
} else {
resetTable();
drawTable(data.IQXResult.Row);
if (noscroll == false) {
gotoResults();
}
$('#jobsFeedback').slideUp();
$('#jobTable').slideDown();
}
}
});
}
/* getJobsOfTheDay
@input: null
@returns: Jobs of the Day
@desc: This will trigger the search API with a request to return all jobs with tag "Job of the Day"
*/
function getJobsOfTheDay(){
var q="jobtype=All&department=All&Q_V_JOD=Job%20of%20the%20day"
return search(q, true)
}
/* resetTable
@input: null
@returns: null
@desc: This will empty the job search table
*/
function resetTable(){
table.clear().draw();
}
/* drawTable
@input: data
@returns: null
@desc: This will prepare each row for generation
*/
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
/* drawRow
@input: rowData
@returns: null
@desc: This will generate each table row and output the html
*/
function drawRow(rowData) {
table.row.add(
[ rowData.position, rowData.jobtype, rowData.branch, changeDateFormat(rowData.startdate), rowData.vacancyid ] )
.draw();
}
/* changeDateFormat
@input: date
@returns: date
@desc: This will take a date in format of yyyy-mm-dd and convert it to dd/mm/yyyy
*/
function changeDateFormat(oDate){
var dateAr = oDate.split('-');
var newDate = dateAr[2] + '/' + dateAr[1] + '/' + dateAr[0];
return newDate; // returns dd/mm/yyyy
}
/* generateField
@input: fieldData
@returns: null
@desc: This will generate form fields based on the data type
*/
function generateField(fieldData){
if (fieldData.search) {
switch(fieldData.type) {
case "string":
$('#advancedFields').append("<label for='"+fieldData.name+"'>"+fieldData.caption+"</label><br><input type='text' id='"+fieldData.name+"' name='"+fieldData.name+"' class='advanced-field-element field-control' placeholder='"+fieldData.caption+"'><br />");
break;
case "select":
var selectBox="<label for='"+fieldData.name+"'>"+fieldData.caption+"</label><br><select id='"+fieldData.name+"' name='"+fieldData.name+"' class='advanced-field-element field-control' placeholder='"+fieldData.caption+"'>";
selectBox=selectBox+"<option value='' selected>Select Filter</option>";
$.each( fieldData.choices, function( index, value ){
selectBox=selectBox+"<option value='"+value+"'>"+value+"</option>";
});
selectBox=selectBox+"</select><br />";
$('#advancedFields').append(selectBox);
break;
case "date":
$('#advancedFields').append("<label for='"+fieldData.name+"'>"+fieldData.caption+"</label><br><input type='date' id='"+fieldData.name+"' name='"+fieldData.name+"' class='advanced-field-element field-control' placeholder='"+fieldData.caption+"'><br />");
break;
case "multiselect":
var selectBox="<label for='"+fieldData.name+"'>"+fieldData.caption+"</label><br><select multiple id='"+fieldData.name+"' name='"+fieldData.name+"' class='advanced-field-element field-control' placeholder='"+fieldData.caption+"'>";
$.each( fieldData.choices, function( index, value ){
selectBox=selectBox+"<option value='"+value+"'>"+value+"</option>";
});
selectBox=selectBox+"</select><br>";
$('#advancedFields').append(selectBox);
break;
default:
$('#advancedFields').append("<label for='"+fieldData.name+"'>"+fieldData.caption+"</label><br><input type='text' id='"+fieldData.name+"' name='"+fieldData.name+"' class='advanced-field-element field-control' placeholder='"+fieldData.caption+"'/><br />");
break;
}
}
}
/* gotoResults
@input: null
@returns: null
@desc: This will animate the scroll down to the results table.
*/
function gotoResults(){
$("html, body").animate({ scrollTop: $('#jobTable_wrapper').offset().top }, 1000);
}
/* viewJobDetails
@input: vacancyid
@returns: null
@desc: this will open the modal window and pass the job's vacancyid to getSingleJob()
*/
function viewJobDetails(vacancyid){
var modal = document.getElementById('jobModal');
modal.style.display = "block";
getSingleJob(vacancyid);
}
/* closeDialog
@input: null
@returns: null
@desc: This will close and empty the modal window
*/
function closeDialog(){
var modal = document.getElementById('jobModal');
modal.style.display = "none";
$('#modalMainContent').html("");
}
/* toTitleCase
@input: str
@returns: null
@desc: This will change the passed str to camel case.
*/
function toTitleCase(str){
if (str=="startdate") {
str="Start Date";
}
if (str=="jobtype") {
str="Job Type"
}
if (str=="contactname") {
str="Contact Name"
}
if (str=="contactemail") {
str="Contact Email"
}
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
/* showSimpleSearch
@input: null
@returns: null
@desc: This will hide the advanced search and show the simple search.
*/
function showSimpleSearch(){
$('#dadvancedSearch').slideUp();
$('#DsimpleSearch').slideDown();
}
/* showAdvancedSearch
@input: null
@returns: null
@desc: This will hide the simple search and show the advanced search
*/
function showAdvancedSearch(){
$('#dadvancedSearch').slideDown();
$('#DsimpleSearch').slideUp();
}
/*
* This is used when a row in the table has been clicked on.
*/
$('.dataTable').on('click', 'tbody tr', function() {
var vacID=table.row(this).data();
viewJobDetails(vacID[4]);
})
/*
* Init job search.
*/
getFields();
getJobsOfTheDay();
</script>
Example
You need to be logged in to see the demo
Back to iqxWEB
Gareth Johnstone