Javascript / jquery problem WordPress
- SOLVED
Hi,
I am trying to build a table with a tablefilter (PicNet tablefilter) in wordpress.
To get the filter to work i had to add the following code:
<a href="http://pastebin.com/i7RYGHBd" target="_blank">http://pastebin.com/i7RYGHBd</a>
With it everything works fine (with the filter) but some widgets etc. are broken.
Without the line
<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js' type='text/javascript'></script>
the filter wont show but all widgets are fine.
I got no problems with html but javascript etc. is a big problem for me..
The only thing i could figure out is that wordpress seems to load another jquery version ?!
<script type='text/javascript' src='http://XXXXXXXXXX.de/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
Maybe someone has an idea :)
Thank you all and sorry for my bad english :)
Answers (5)
Francisco Javier Carazo Gil answers:
WordPress use his own jQuery version.
Francisco Javier Carazo Gil comments:
To use JavaScript tools like this in your code, you shouldn't use <script> tag directly, instead of this you have to use this functions:
wp_enqueue_script - http://codex.wordpress.org/Function_Reference/wp_enqueue_script
wp_register_script - http://codex.wordpress.org/Function_Reference/wp_register_script
wp_deregister_script - http://codex.wordpress.org/Function_Reference/wp_deregister_script
Francisco Javier Carazo Gil comments:
For example, to be able to use you own jQuery version, you have to do it, in the piece of code you want:
wp_deregister_script('jquery');
wp_enqueue_script(
'jquery',
PATH_TO_YOUR_JQUERY
);
This enqueue makes both: register and enqueue at the same time.
Kalumpi comments:
Thank you everyone for your time and help!
Christianto answers:
It should be work fine if we remove old jQuery (v1.4.2) in your site (assuming your plugin is compatible with latest jQuery)..
I believe it namespace conflict.
Please try delete this old jQuery
<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js' type='text/javascript'></script>
And pass "$" to jQuery.ready() function:
jQuery(document).ready(function($) {
// your function here
});
For example
[[LINK href="http://pastebin.com/zzsuziYR"]]http://pastebin.com/zzsuziYR[[/LINK]]
or use jQuery instead of "$" symbol
[[LINK href="http://pastebin.com/TnwJN6VB"]]http://pastebin.com/TnwJN6VB[[/LINK]]
or use [[LINK href="http://api.jquery.com/jQuery.noConflict/"]]jQuery.noConflict [[/LINK]]
Kalumpi comments:
Thank you so much! http://pastebin.com/zzsuziYR worked fine. Now everything shows up and works without any mistakes (table, widgets etc.)!
Martin Pham answers:
try this functions
add_action( 'admin_enqueue_scripts', 'my_cs_script' ); // using hook: wp_enqueue_scripts for font-end
function my_cs_script() {
/*
* deregister self-host jquery or version
* using Google CDN or Microsoft CDN
*/
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
/* register picnet & tablesort script */
wp_enqueue_script( 'tablefilter', 'http://XXXXXXXXXX.de/xttab/picnet.table.filter.min.js', array( 'jquery' ), '1.0');
wp_enqueue_script( 'tablesort', 'http://XXXXXXXXXX.de/xttab/tablesort.js', array( 'jquery' ), '1.0');
wp_enqueue_script( 'jquery' );
}
add_action('admin_print_footer_scripts', 'print_my_inline_script'); // using hook: wp_footer for font-end
function print_my_inline_script() {
if ( wp_script_is( 'tablefilter', 'done' ) ) :
?>
<script type='text/javascript'>
$(document).ready(function() {
// Initialise Plugin
var options1 = {
additionalFilterTriggers: [$('#quickfind')],
clearFiltersControls: [$('#cleanfilters')],
matchingRow: function(state, tr, textTokens) {
if (!state || !state.id) {
return true;
}
var child = tr.children('td:eq(2)');
if (!child) return true;
var val = child.text();
switch (state.id) {
default:
return true;
}
}
};
$('#demotable2').tableFilter(options1);
var grid2 = $('#demotable2');
var options2 = {
filteringRows: function(filterStates) {
grid2.addClass('filtering');
},
filteredRows: function(filterStates) {
grid2.removeClass('filtering');
setRowCountOnGrid2();
}
};
function setRowCountOnGrid2() {
var rowcount = grid2.find('tbody tr:not(:hidden)').length;
$('#rowcount').text('(Rows ' + rowcount + ')');
}
grid2.tableFilter(options2); // No additional filters
setRowCountOnGrid2();
});
</script>
<?php
endif;
}
[[LINK href="http://codepad.org/vRWMKkbr"]]http://codepad.org/vRWMKkbr[[/LINK]]
Kalumpi comments:
Thank you very much for your time and help!