FindLicensedProfessional.xml

<div style="width: 100%;">
	<script type="text/javascript">
		if (typeof jQuery != 'undefined') $.noConflict(true);
	</script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="//www.phila.gov/Style%20Library/Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
	<script src="//www.phila.gov/Style%20Library/Scripts/jquery.layout.js" type="text/javascript"></script>
	<script src="//www.phila.gov/Style%20Library/Scripts/spin.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/v/dt/jqc-1.12.3/dt-1.10.16/b-1.4.2/b-print-1.4.2/datatables.min.css">
	<style type="text/css">
		#dataTable {
			width: 100%;
			border: 1px solid #3661a2;
			margin-top: 1em;
			background-color: #c5dbec;
		}

		#dataTable tbody {
			background-color: #fff;
		}

		#dataTable tbody tr td {
			border-top: 1px solid #3661a2;
		}

		#dataTable tbody tr:hover td {
			background-color: #c5dbec;
		}

		#dataTable tr td,
		#dataTable tr th {
			border-right: 1px solid #3661a2;
		}

		#dataTable tr td:last-child,
		#dataTable tr th:last-child {
			border-right: none;
		}

		#dataTable tr td:nth-child(3),
		#dataTable tr th:nth-child(3) {
			width: 40%;
		}
		
		#dataTable tr td:nth-child(4),
		#dataTable tr th:nth-child(4) {
			width: 54px;
		}
		
		#dataTable_wrapper .dt-buttons {
			float: none;
		}

		#dataTable_wrapper .dt-buttons .dt-button,
		.paginate_button.current {
			background: #c5dbec !important;
			border: 1px solid #3661a2 !important;
			margin-top: 1em;
			/* margin-bottom: 1em; */
			padding: 4px 1em;
			float: none;
		}
		
		.dataTables_length {
			margin-top: 1em;
		}

		.paginate_button {
			margin: 0 !important;
		}

		#dataTable_wrapper .dataTables_filter {
			margin-top: 1em;
			margin-bottom: 1em;
		}
	</style>
	<script type="text/javascript" src="//cdn.datatables.net/v/dt/dt-1.10.16/b-1.4.2/b-print-1.4.2/datatables.min.js"></script>
	<link rel="stylesheet" type="text/css" media="print" href="//www.phila.gov/Style%20Library/CSS/print.css">
	<div class="loading" id='loading' style='display: none;'></div>
	<div class="searchParams">
		<!--<div class="searchHeader" style="padding-bottom:20px;>
							Search for a Licensed Professional</div>-->
		<label id="lblType">
			Type of Professional:</label>
		<select id="selType">
			<option value="" selected>- Make a Selection -</option>
			<option value="all">All Types</option>
		</select>
		<!-- Button Here-->
		<br>
	</div>

	<div class="searchResults">
		<div id="jqGridContainer">
			<table id="dataTable" class="display" width="100%"></table>
		</div>
		<div class="printbutton">
			<input type=button value="Print This View" class="btnBlue" onclick="Print()" />
		</div>
		<p>Click <a href="https://www.opendataphilly.org/dataset/licenses-and-inspections-trade-licenses" target="_blank">here</a> for more information on Trade Licenses from Open Data Philly</p>
	</div>

	<script language="javascript" type="text/javascript">
		var minicache = {};
		var mydata = [];
		var serviceURL = "https://data.phila.gov/carto/api/v2/sql?q=";
		var query_base = "SELECT contactname, companyname, icccategory, licensenumber FROM li_trade_licenses WHERE licensestatus = 'ACTIVE'";

		function RunContractorSearch() {
			$('#loading').show();
			var selectOption = $('#selType');
			var type = selectOption.val().toString();
			var gotourl = '';
			if ( type === 'all' ) {
				gotourl = serviceURL + decodeURIComponent(query_base + " ORDER BY (NULLIF(contactname, '') IS NULL), contactname ASC");
			} else {
				gotourl = serviceURL + decodeURIComponent(query_base + " AND licensetypeobjectid = '" + type + "' ORDER BY (NULLIF(contactname, '') IS NULL), contactname");
			}
			
			if ( minicache[type] !== undefined ) {
				if ( minicache[type].length > 0 ) {
					setupGrid(minicache[type]);
				} else {
					$('#loading').hide();
					alert("No contractors found for this category.");
				}
			} else {
				window.callWCFServiceJSON(gotourl, null, function (data, currobject) {
					if (! data.error && data.rows.length > 0) {
						mydata = data.rows;
						minicache[type] = mydata;
						setupGrid(mydata);
					} else {
						$('#loading').hide();
						alert("No contractors found for this category.");
					}
				});
			}
		}

		var table;
		function setupGrid(mydata) {
			if (table) {
				table.destroy()
				table = null;
			};
			table = $('#dataTable').DataTable({
				data: mydata,
				columns: [{
						data: 'contactname',
						title: 'License Holder'
					},
					{
						data: 'companyname',
						title: 'Company Name<br><small>(If Provided)</small>'
					},
					{
						data: 'icccategory',
						title: 'Special Inspection<br>Categories'
					},
					{
						data: 'licensenumber',
						title: 'License #'
					},
				],
				lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
				pageLength: 50,
				dom: 'Blfrtip',
				buttons: [
					'print'
				],
				"aaSorting": [],
				"order": [],
				"initComplete": function (settings, json) {
					$('#dataTable thead').show();
					$('#loading').hide();
				}
			});

		}

		var select_field = $('#selType');
		String.prototype.toTitleCase = function () {
			var a = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs?\.?|via)$/i;
			return this.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, function (b, c, d) {
				return c > 0 && c + b.length !== d.length && b.search(a) > -1 && ":" !== d.charAt(c - 2) && ("-" !== d.charAt(
					c + b.length) || "-" === d.charAt(c - 1)) && d.charAt(c - 1).search(/[^\s-]/) < 0 ? b.toLowerCase() : b.substr(
					1).search(/[A-Z]|\../) > -1 ? b : b.charAt(0).toUpperCase() + b.substr(1)
			})
		};

		function populateTypeDropdown(data) {
			if (!data.error && data.rows.length) {
				$.each(data.rows, function (key, val) {
					select_field.append($('<option>', {
						'value': val.licensetypeobjectid
					}).text(String(val.licensetype).toLowerCase().toTitleCase()));
				});
			}
		}

		(function ($) {
			window.callWCFServiceJSON = function (inURL, currobject, successCall) {
				$.ajax({
					dataType: "jsonp",
					contentType: "application/json; charset=utf-8",
					url: inURL,
					async: true,
					cache: true,
					crossDomain: true,
					timeout: 500000,
					type: "GET",
					xhrFields: {
						withCredentials: false
					},
					error: function (jqXHR, textStatus, errorThrown) {
						alert("ERROR: " + textStatus + " " + inURL);
					},
					statusCode: {
						404: function () {
							alert('ERROR: Could not connect to service.');
						}
					},
					success: function (data) {
						successCall(data, currobject);
					}
				});
			};
		})(jQuery);

		$(document).ready(
			function () {
				$('form input:not([type="submit"])').keypress(function (e) {
					if (e.keyCode == 13) {
						e.preventDefault();
						return false;
					}
				});
				$("searchContractors").click(function (e) {
					RunContractorSearch();
					e.preventDefault();
					return false;
				});

				window.callWCFServiceJSON(serviceURL + decodeURIComponent(
						"SELECT licensetype, licensetypeobjectid from li_trade_licenses GROUP BY licensetype, licensetypeobjectid ORDER BY licensetype"
					), null,
					function (data, curobject) {
						populateTypeDropdown(data);
					}
				);
				$('#selType').change(function () {
					if( $(this).val() === '' ) {
						if (table) {
							table.destroy()
							table = null;
						}
						$('#dataTable').empty();
						return;
					}
					RunContractorSearch();
				});

				var target = document.getElementById('loading');
				var spinner = new Spinner({
					lines: 10, // The number of lines to draw
					length: 10, // The length of each line
					width: 7, // The line thickness
					radius: 21, // The radius of the inner circle
					color: '#000', // #rgb or #rrggbb
					speed: 1, // Rounds per second
					trail: 89, // Afterglow percentage
					shadow: true, // Whether to render a shadow
					hwaccel: true // Whether to use hardware acceleration
				}).spin(target);

				$(".current").removeClass("current");
				$("[href$='" + document.location.pathname.substring(document.location.pathname.lastIndexOf('/')) + "']").addClass(
					"current");
				$(".printbutton").hide();
				//setupGrid(mydata);
			}
		);
	</script>
</div>