I have a tooltip jQuery that is applied through global settings in my WP theme. After I upgraded to the paid version of Toolset, the jQuery stopped firing, and I've had to disable all the Toolset plugins except Types to get it working again.
Here is the code that seems to have a conflict with Toolset:
$(function() {
$( document ).tooltip({
position: {
my: "left center",
at: "right+10 center",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(function () {
$('.bentspuncell').attr('title', function(){
return $(this).next('.statusRollup').remove().html()
})
$(document).tooltip();
});
// learn jquery ajax
// hidden link
// no need to specify document ready
$(function worker(){
// don't cache ajax or content won't be fresh
$.ajaxSetup ({
cache: false,
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(worker, 180000);
}
});
var ajax_load = "<img src='hidden link' alt='loading...' /><br>";
// load() functions
var loadUrl = "hidden link";
$("#result").html(ajax_load).load(loadUrl);
// end
});
What do I need to do in order to get this code to play well with Toolset?
Hi, it depends on how this code is added, and where it is executed.
- Where can I see this on your live site somewhere to debug?
- Is the code executed anywhere else? On all page loads, or all posts in a specific post type, etc?
- How is this JavaScript code added to the site - inserted in a theme JS file, enqueued in the head as raw script, etc?
Hello Christian,
The code is being added globally to all pages/posts via the theme options. It's situated just before the closing body tag.
Here is a sample live page:
hidden link
The code works right now (hover on any chart position to see the additional tooltip information). This is because I have turned off all of the Toolset plugins except for Types. The code would not work otherwise (all the hidden data is just displayed as gibberish, see pic attached).
Okay a couple of things.
1. When working with jQuery and Toolset, it's best to use the namespace "jQuery" instead of the shortcut "$". You should also make sure all your jQuery code is wrapped in a document ready handler. When I look at the browser console for the page you linked, I see at least one error that $ is not a function - typically this happens when jQuery code is executed before the jQuery library is ready.
2. It's best if your theme enqueues the jQuery library using WordPress best practices, otherwise Toolset may attempt to load jQuery again and overwrite the jQuery library your theme is loading. I can't see your theme files to confirm, so please be sure the jQuery library script is enqueued correctly: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
It's difficult for me to say exactly what is wrong without having all the plugins active. You mentioned that this code seems to have a conflict with Toolset. Can you be more specific about what is happening? Are there errors shown in the console? Is the code not firing? Are the styles of the tooltip applied incorrectly?
Hi there,
I went back in and reactivated the Toolset plugins one by one, in reverse alphabetical order. It seems the Toolset Forms plugin is the one that clashes with the jQuery code. If I activate the Toolset Forms, the data in the tooltip doesn't remain hidden and just gets dumped and squished in the table cell. You can see it now. I left the Toolset Forms activated. It messes up the whole page.
hidden link
Okay thanks, I see several errors in the browser console, including two from a jQuery lightbox plugin. Let's try these troubleshooting steps first:
- Temporarily deactivate all plugins except Toolset plugins and activate a default theme like Twenty Seventeen. Then clear the browser cache and test this page again.
- If the problem is resolved and tooltips appear as expected, reactivate your theme and plugins one by one until the conflict is revealed.
- If the problem was not resolved, I'll need to take a closer look.
Please let me know the results and we can go from there.
Thanks for the suggestion. It seems that if I strip everything down to just the Toolset plugins plus the jQuery plugin, the code works. Once I activate either the Exec-PHP or jQuery Lightbox plugin. The jQuery tooltip code goes wonky and doesn't get loaded.
What do you suggest at this point?
Not sure offhand, because Exec-PHP can allow you to insert any PHP code directly into posts or pages. Can you tell me exactly what you're using Exec-PHP to do? Is this used to enqueue other JavaScript libraries or jQuery plugins? Can you tell me if the jQuery Lightbox plugin has an option to not load the jQuery library?
Revisiting this one... I would like to start using Toolset Forms now cos I want to include a section where readers can submit content. But once I activate Toolset Forms, some of my jQuery code goes wonky. >_<
