Show pageOld revisionsBacklinksExport to PDFFold/unfold allBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. <nav type="tabs"> * [[#tab-apiendpoints|API End Points]] * [[#tab-examplescript|Example Script]] <pane id="tab-apiendpoints"> ===== 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. </pane> <pane id="tab-examplescript"> ===== 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 <note tip> col-md-* is used as an example for bootstrap websites, your website may use a different grid system or a different column class. </note> ~~NOTOC~~ <sxh HTML> <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> </sxh> Then copy and paste the following in the footer of your website. <note tip> Replace YOURWEBSITE-HERE with the full domain (or subdomain) where IQXWeb is installed, remember to keep the prepending / / and ending / </note> ~~NOTOC~~ <sxh JavaScript> <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> </sxh> ===== Example ===== <ifauth @technical,@editors> <HTML> <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> <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <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="//demo.iqxanywhere.net/"; /* * Init the data table */ var table = jQuery('#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 (jQuery('#jobsearch').val() == "") { getJobsOfTheDay(); } else { var searchTerm = "$text="+jQuery('#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 = jQuery( "#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() { jQuery.getJSON( searchURL+"api/jobs/fields", function( data ) { jQuery.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){ jQuery('#modalMainContent').html( "Disabled in this demo" ); jQuery('#modalButtons').html("<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 jQuery('#jobTable').slideUp(); jQuery('#jobsFeedback').html("<center><strong>Loading ...</strong></center>"); jQuery('#jobsFeedback').slideDown(); jQuery.getJSON( searchURL+"api/jobs/jobs?"+q, function( data ) { jQuery('#searchResults').html( JSON.stringify(data, null, "\t") ); if (data.IQXResult.IQXFailure) { resetTable(); jQuery('#jobTable').slideUp(); jQuery('#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(); jQuery('#jobTable').slideUp(); jQuery('#jobsFeedback').html("<div class='info'>Your search returned 0 jobs.</div>"); } else { resetTable(); drawTable(data.IQXResult.Row); if (noscroll == false) { gotoResults(); } jQuery('#jobsFeedback').slideUp(); jQuery('#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": jQuery('#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>"; jQuery.each( fieldData.choices, function( index, value ){ selectBox=selectBox+"<option value='"+value+"'>"+value+"</option>"; }); selectBox=selectBox+"</select><br />"; jQuery('#advancedFields').append(selectBox); break; case "date": jQuery('#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+"'>"; jQuery.each( fieldData.choices, function( index, value ){ selectBox=selectBox+"<option value='"+value+"'>"+value+"</option>"; }); selectBox=selectBox+"</select><br>"; jQuery('#advancedFields').append(selectBox); break; default: jQuery('#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(){ jQuery("html, body").animate({ scrollTop: jQuery('#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"; jQuery('#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(){ jQuery('#dadvancedSearch').slideUp(); jQuery('#DsimpleSearch').slideDown(); } /* showAdvancedSearch @input: null @returns: null @desc: This will hide the simple search and show the advanced search */ function showAdvancedSearch(){ jQuery('#dadvancedSearch').slideDown(); jQuery('#DsimpleSearch').slideUp(); } /* * This is used when a row in the table has been clicked on. */ jQuery('.dataTable').on('click', 'tbody tr', function() { var vacID=table.row(this).data(); viewJobDetails(vacID[4]); }) /* * Init job search. */ getFields(); getJobsOfTheDay(); </script> </HTML> </ifauth> <ifauth !@technical,!@editors,!@internal> == You need to be logged in to see the demo == </ifauth> </pane> </nav> \\ Back to [[iqxweb:start]] iqxweb/jobsearchapi.txt Last modified: 2023/06/07 14:32by Gareth Johnstone