Input: null
Returns: JSON : fields
URL: /api/jobs/fields
Input: string : VacancyID
Returns: JSON : Vacancy Details
URL: /api/jobs/view/{VACANCYID}
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.
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
<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.
<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>
Back to iqxWEB