Ajax Template Page with CFC

by lokointhehouse2

HTML

<!--- HEADER.CFM ---->

<cfparam name="sitejs" type="any" default="site.js">
<!--- DataTables --->
	<link href="/core/lib/dataTables/DataTables-1.10.4/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
	<link href="/specialty/jQ/DataTables-1.10.12/Buttons-1.2.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
	<link href="/specialty/jQ/DataTables-1.10.12/Buttons-1.2.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
	<link href="/core/lib/dataTables/DataTables-1.10.4/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

	<script type="text/javascript" src="/specialty/jQ/DataTables-1.10.12/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/specialty/jQ/DataTables-1.10.12/Buttons-1.2.1/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" src="/specialty/jQ/DataTables-1.10.12/JSZip-2.5.0/jszip.min.js"></script>
	<script type="text/javascript" src="/specialty/jQ/DataTables-1.10.12/Buttons-1.2.1/js/buttons.html5.min.js"></script>
<!--- 	<script type="text/javascript" src="/specialty/jQ/DataTables-1.10.12/Buttons-1.2.1/js/buttons.flash.local.js"></script>  --->
<!--- BootStrap Select --->
	<link href="/specialty/jQ/bootstrap-select-1.12.2/dist/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="/specialty/jQ/bootstrap-select-1.12.2/dist/js/bootstrap-select.min.js"></script>


<!--- Date Range Picker --->
	<link rel="stylesheet" type="text/css" media="all" href="/specialty/jQ/daterangepicker/daterangepicker.css">
	<script type="text/javascript" src="/specialty/jQ/daterangepicker/moment.min.js"></script>
	<script type="text/javascript" src="/specialty/jQ/daterangepicker/daterangepicker.js"></script>

<!--- loader --->
	<link rel="stylesheet" type="text/css" media="all" href="/specialty/jQ/jquery-loading-master/dist/jquery.loading.min.css">
	<script type="text/javascript"...

CSS

<!--- AJAX PAGE --->

<cfparam name="form.reporttypeid_data" type="any" default="1">

<cfset siteObj= CreateObject("component", "data")/>
<cfset variables.byMedium = siteObj.byMedium()>


<script>
	$(document).ready(function() {
	    $('.datashow').DataTable({
	        dom: 'Bfrtip',
	        buttons: [{
	            extend: 'excelHtml5',
	            customize: function(xlsx) {
	                var sheet = xlsx.xl.worksheets['sheet1.xml'];

	                // Loop over the cells in column `F`
	                $('row c[r^="F"]', sheet).each( function () {
	                    // Get the value and strip the non numeric characters
	                    if ( $('is t', this).text().replace(/[^\d]/g, '') * 1 >= 500000 ) {
	                        $(this).attr( 's', '20' );
	                    }
	                });
	            }
	        }]
	    });
	} );
</script>





	<tr>
		<td>
<!--- Results Trend --->

			<cfif variables.byMedium.recordcount>

				<cfoutput>
					<table width="100%" class="datashow display">
						<thead>
							<tr>
								<cfloop array="#variables.byMedium.getcolumnlist()#" index="header">
									<th><cfif Header neq 'type'>#Header#</cfif></th>
								</cfloop>
							</tr>
						</thead>
						<tbody>
							<cfloop query="variables.byMedium">
								<tr>
									<cfloop array="#variables.byMedium.getcolumnlist()#" index="field">
											<td>#variables.byMedium[field][currentrow]#</td>
									</cfloop>
								</tr>
							</cfloop>
						</tbody>
					</table>
				</cfoutput>

			<cfelse>

				<table width="100%">
					<tr>
						<td>No Records Found</td>
					</tr>
				</table>

			</cfif>

<!--- / Results Trend --->
		</td>
	</tr>
  
  
  
  
  
  
  
  
  <!--- DATA.CFC--->
  
  
<cfcomponent namespace="site" hint="call quality">

	<cffunction name="byMedium" hint="byMedium">
		<!--- <cfargument name="" type="string" required="false" default="1"/> --->

		<cfquery name="LOCAL.qryByMedium" datasource="OpsDataB">
			select top...

JavaScript

$(document).ready(function(){


		//dattables
		$('table.displayAll').DataTable({
		    fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
		       if (aData[1] == "No") {
		           $(nRow).addClass('highlight');
		       }
		    },
		    dom: 'Bfrtip',
	        buttons: [
		            {extend: 'excel',
		             text: 'Download to Excel'
		            }
		        ]
		});


		// START
        function start() {

			//senddata()

        };


        start();



		$('#reporttypeidSelected').on('change', function(){

			var captureid = $(this).attr('data-id');
			var selected = $(this).val();

			// populate hidden fields and replace text
			$('.'+captureid).val(selected);
			$('.'+captureid).html(selected);

			console.log(captureid);
			console.log(selected);

			senddata()

		});


		// send data function

		function senddata() {

			//capture data from hidden fields
			var reporttypeid_data = $("input[name='reporttypeid_data']").val();

			$(".reports").loading();


			$.post('ajax_report.cfm?', {reporttypeid_data:reporttypeid_data}, function(result,status){
				if (result != '') {
					$('.result1').html('');
					$('.result1').append(result);
				} else {
					alert('fail');
				}

				$(".reports").loading('stop');

			});

		}


	});