I have the below scripts in the head of a php page that I am building:
<head>
<!-- DataTables CSS -->
<link href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css" type="text/css" rel="stylesheet">
<link href="//cdn.datatables.net/tabletools/2.2.0/css/dataTables.tableTools.css" type="text/css" rel="stylesheet">
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.1.min.js" language="javascript" type="text/javascript"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js" language="javascript" type="text/javascript"></script>
<script src="//cdn.datatables.net/tabletools/2.2.0/js/dataTables.tableTools.min.js" type="text/javascript" charset="utf-8" ></script>
<script class="init" type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
"iDisplayLength": 25,
dom: 'T<"clear">lfrtip',
tableTools: {
"aButtons": [ "csv", "xls", "pdf" ],
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls_pdf.swf"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://myIP/tools/ajax/snoozetable.php"
} );
} );
</script>
<script class="init" type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" style="width: 40px;" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );
</script>
<script type="text/javascript">
$(document).ready( function() {
$('#Location').autocomplete(
{source: function (request, response) {
$.ajax({url: "//localip/tools/ajax/locs_by_name.php",
dataType: 'jsonp',
data: {term: request.term},
success: response
})
},
minlength: 2,
select: function(event, ui) {
ui.item ? $('#locationid').val(ui.item.id) : $('#locationid').val('Error?');
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
})
});
</script>
</head>
if i remove all of the other scripts, the $('#Location').autocomplete script works fine, but with all of the datatable scripts, it does not perform the autocomplete, though the datatable scripts all work.
any ideas why not??
requested edits:
<form method="post">
<dl class="formbody">
<table style="width:100%">
<tr>
<dt style="width: 200px;"><label for="Location">LocationName</label></dt>
<dd><input tabindex="5" id="Location" class="fld" name="Location" type="text" value="<?php echo $Location; ?>" /></dd>
</td>
</tr>
</table>
</form>
<table id="example" class="display" cellspacing="0" width="80%">
<thead>
<tr>
<th>SnoozeID</th>
<th>Side</th>
<th>BlockType</th>
<th>Partner</th>
<th>Pattern</th>
<th>Location</th>
..............
..............
..............
