WordPress is not calling the default jQuery file
Question
I'm trying to call jQuery DataTable JS file for my plugin that uses DataTable to display the query from the database. The JS file is stored locally on the server.
WordPress: v4.0.1 jQuery: v1.11.1 DataTable: v1.10.5
The WordPress default jQuery file is not getting called. When I register and call the jQuery file hosted on Google, it seems to work. Is there a reason why this is happening?
Here is what I have so far:
functions.php:
function load_jquery_datatables() {
wp_enqueue_script('jquery');
wp_register_script( 'jquery-datatables', plugins_url('js/jquery.dataTables.min.js'), array('jquery'));
wp_enqueue_script('jquery-datatables');
}
index.php:
<?php add_action('wp_enqueue_scripts', 'load_jquery_datatables');?>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
<table id="example" class="display">
<form>
<thead>
<tr>
<td style="text-align: center;"><input type="checkbox" id="selectall"></td>
<?php
foreach ( $wpdb->get_col( "DESC " . $table_name, 0 ) as $column_name )
{
echo '<th style="text-align: center;">' . $column_name . '</th>';
}
?>
</tr>
</thead>
<tfoot>
<tr>
<td style="text-align: center;"><input type="checkbox" id="selectall"></td>
<?php
foreach ( $wpdb->get_col( "DESC " . $table_name, 0 ) as $column_name )
{
echo '<th style="text-align: center;">' . $column_name . '</th>';
}
?>
</tr>
</tfoot>
<tbody>
<?php
foreach ( $results as $row )
{
echo '<tr>';
echo '<td><input type=\'checkbox\' class=\'check\' value=' . $id . '></td>';
echo '<td>' . $row->id . '</td>';
echo '<td>' . $row->status . '</td>';
echo '<td>' . $row->create_time . '</td>';
echo '<td>' . $row->start_time . '</td>';
echo '<td>' . $row->duration . '</td>';
echo '<td>' . $row->source . '</td>';
echo '<td>' . $row->source_id . '</td>';
echo '</tr>';
}
?>
</tbody>
</form>
</table>
2 answers
solution1
0 2015-02-13 21:46:25
It's been awhile since I have created a WordPress theme but I always used this method and it worked great!
FUNCTIONS.PHP
function custom_function_name() {
wp_enqueue_script("jquery");
wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script><?php
}
Call to action in your HEADER.PHP NOT INDEX.PHP
<head>
// Link stylesheets and page titles
// Call your function
<?php custom_function_name(); ?>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</head>
solution2
0 ACCPTED 2015-02-23 17:25:23
The following change fixed the issue:
Changing the jQuery in index.php from:
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
to the following:
<script>
jQuery(document).ready(function() {
$('#example').DataTable();
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.