Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)

2013-02-21

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!

2013-02-21

Arnav Joy answers:

you can write following in functions.php to remove that jquery

<?php

if( !is_admin() ){
wp_deregister_script('jquery');
}

?>

but test anything is not broken


Kalumpi comments:

Thank you everyone for your time and help!

2013-02-21

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.)!

2013-02-21
2013-02-21

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!