Datatables conflict with another plugin

peterx

Hi,
I develop a wordpress site. I'm a bit new. but it's a lot of fun, except for the moments I face some problems. Like now :(.
I use the wp-tables-reloaded plugin, which uses your DataTables library.
I've already written to the developer, so I shall onlly paste our discussion:
[blockquote]Hi Tobias,

Congrats on the excellent plugin!

It’s the first time I use it and I really like it.
Unfortunately I have a problem :(.

I’ve created a table, entered the data, but there are no sorting options in the header row.
“Yes, enable the use of a JavaScript library.” is checked.
“The first row of your table is the table head” is checked.
Also all options from “DataTables JavaScript features” are checked.

I tried the different JavaScript libraries without any luck.[/blockquote]

The response:

[blockquote]Hi Peter,

thanks for your comment. Nice to hear that you like the plugin.

As you mentioned that you have tried all three JavaScript libraries, and after checking your site’s source code, I strongly believe that there is a problem with the inclusion of the jQuery library.
As it seems, you are loading jQuery as part of the “wp-minify” plugin process. Additionally, you are loading the library from the Google CDN.

Due to including the library multiple times, very likely something got into a conflict.

Can you please try disabling other plugins that maybe deal with jQuery? Especially, please try without the wp-minify plugin and with loading WordPress’s default jQuery library.

Best wishes,
Tobias[/blockquote]

[blockquote]What I did:

I deactivated all plugins and checked them one by one.
wp-minify causes no problems.
Use Google Libraries plugin (http://jasonpenney.net/wordpress-plugins/use-google-libraries/) stops sorting function in tables.
Well, I can live without this plugin.
The problem is that another plugin also crashes the sorting and filter options.
It is wp-forecast (http://www.tuxlog.de/wordpress/2010/wp-forecast-3-0/).
Unfortunately this is my favourite plugin. I spent a great deal of time searching for good weather plugin till a found the wp-forecast. It is the only one working really good for me, I also customized it a lot.
So, is there any workaround for this problem: use both wp-forecast and sorting in your tables?
Regs,
Peter [blockquote]

The answer:

[blockquote]

Hi,

likely the wp-forecase plugin then creates a JavaScript conflict as well. Unfortunately I'm not too savvy in JavaScript and don't know how to spot the actual source of the conflict. The DataTables JavaScript library was not developed by me, I just ship it as an add-on with my plugin.

My suggestion: You should either contact the wp-forecast developer to ask him, if he knows how to detect the conflict, or the DataTables developer (www.datatables.net).

Best wishes,
Tobias
[/blockquote]

Any chance to identify the problem?
Thanks in advance!

allan

We should be able to figure it out :-). Can you give us a link to the site so we can see what is actually happening please?

Allan

peterx

http://test.marketing-forge.com/?page_id=25
Here is the table. Sorting and search option are activated, but no present.

allan

The problem is with this line in your html:

[code]

[/code]

Breaking it down it looks like this:

wp-content/plugins/wp-minify/min/?f=wp-includes/js/jquery/jquery.js
wp-content/plugins/wp-forecast/wpf_update.js
wp-content/themes/pressplay/SpryAssets/SpryTabbedPanels.js
wp-content/themes/pressplay/library/jquery.min.js
wp-content/themes/pressplay/library/jquery.hoveraccordion.min.js
wp-includes/js/thickbox/thickbox.js
wp-content/plugins/wp-table-reloaded/js/jquery.datatables.min.js&m=1286553992

So basically the issue is that jQuery is being included twice. When this happens, jQuery will overwrite itself, and as such any plug-ins which have been attached to it already are overwritten. Equally, if you include an old version, then it's the old version which is used, not the newer. In in this case the version being included the second time is 1.2.3! (hence the Javascript error about $().live() on your page).

I presume from the paths that the secodn jQuery is being included by the hoveraccordion WordPress plug-in. Either you need to modify it's include files (i.e. stop it from doing this), or see if the developer will update his/her plug-in to play nicely with others, as the conflict is coming from there.

Allan

peterx

Thanks a lot, Allan!
I took time but in the end I resolved the problem.
Apparently it was something about the simultaneous use of datatables, wp-forecast and hoveraccordion.
What was strange to me: datatables + hoveraccordion worked OK; datatables + wp-forecast worked OK; wp-forecast + hoveraccordion also worked OK. When all three were used the problem emerged.
What I did to solve it:
Replaced my original code:
[code] $(document).ready(function(){
$('#tabnav-a').hoverAccordion({
activateitem: '1',
speed: 'fast'
});
$('#tabnav-a').children('li:first').addClass('firstitem');
$('#tabnav-a').children('li:last').addClass('lastitem');

$('#side-rss').hoverAccordion({
activateitem: '1',
speed: 'fast'
});
$('#side-rss').children('li:first').addClass('firstitem');
$('#side-rss').children('li:last').addClass('lastitem');
});
[/code]
With:
[code] jQuery(document).ready(function($){
jQuery('#tabnav-a').hoverAccordion({
activateitem: '1',
speed: 'fast'
});
jQuery('#tabnav-a').children('li:first').addClass('firstitem');
jQuery('#tabnav-a').children('li:last').addClass('lastitem');

jQuery('#side-rss').hoverAccordion({
activateitem: '1',
speed: 'fast'
});
jQuery('#side-rss').children('li:first').addClass('firstitem');
jQuery('#side-rss').children('li:last').addClass('lastitem');
});
[/code]
Added the line "<?php wp_enqueue_script("jquery"); ?>" above "<?php wp_head(); // for plugins ?>".
And finally deleted "".
Now everythings works flawlessly.
I am a bit new to WordPress. Web coding is not my best knowledge, but thanks to your help the problem is solved :).
Hope this helps others, too.
Kindest regards,
Peter

peterx

I have two other questions now:
1. When I use pagination and click next button it shows the next 10 or some rows but the position is not top of site. I mean: when the previous or next page button is clicked to take me to the top row of the column (or top of the site; like if I use a top anchor for the link).
The code of this links is: [code][/code]
2. I activated the option to search in tables, but how can I show the rows with searched terms in the results?
http://test.marketing-forge.com/?s=%D0%A3%D0%B7%D1%83%D0%BD%D0%BE%D0%B2%D0%B0
I have as a match the page containing the table, but I wish to show also the rows containing the term "???????".
//Don't pay attention to the styling, because this page is still under construction.

I guess I should place some code in search.php in my theme, but what exactly?