jQuery tabs is loaded but not working in WordPress - javascript

I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!

I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.

Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.

Related

Issue running function from external js file

I am trying to do something which I feel should be elementary and basic but it is not working. I have looked at many related Stackoverflow QAs but none covers this exact issue.
I want to run a function from an external js file called main.js. The file is loaded at the bottom of the body section of an html page in the usual way. All contents of the file is within the standard jQuery wrappers. I know it is loading properly because I can see it in Developer Tools and various animations coded in it are running correctly. I have jQuery 3.3.1 loaded in the head section of the page and again it must be loading properly because the animations are working.
As a test I have the following function in main.js:
function alerttest() {
alert('Function test works');
}
Then in the main body of the html page I call the function as follows:
<script>
alerttest();
</script>
So when I refresh the page I should get an alert but this does not happen. I get an error in the console:
Uncaught ReferenceError: alerttest is not defined.
This would happen if I loaded scripts in the wrong location so I also tried this to call the function so the DOM would be loaded first:
<script>
$(function() {
alerttest();
});
</script>
but I get the same Reference error. Can anyone suggest what is going on?
Environment: Windows 10, VSCode, Codeigniter 3, jQuery 3.3.1, WAMP with PHP 7.4.7
I believe I have solved the problem and, as I suspected, it was about the location of scripts. I have always been advised to include scripts at the bottom of the page just above the closing body tag but this didn't work in this instance. I have now located my main.js in the head section along with the jQuery CDN and everything works just fine.
Many thanks for responding.

No CSS and JS loading on Wordpress site after enabling plugin

Quick question: as someone who is using Wordpress a lot, I am first time ever noticing that I can't see any Javascript files associated with my plugin (ULike plugin) on my website when I enable that specific plugin. The HTML is loaded, but CSS and JS files are entirely missing and thus not loaded on the page...
I ran out of options. I already removed cache, enabled debug mode in Wordpress (didn't give any errors), checked the console and logs...
Any idea what might cause this error and what else I can do to check what is going wrong?
It might be an error with your URL ( www ) while loading CSS and JS.
Fixing all the links of CSS and JS should work.
I have an answer to my own question. It was because <?php wp_head() ?> was not added in my header.php that is was not working.
Problem solved!

lightgallery library + lg-thumbnail plugin

I'm trying to setup lightgallery with lg-thumbnail plugin in a WordPress installation.
https://sachinchoolur.github.io/lightGallery/docs/api.html
https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-thumbnial
Lightgallery alone seems to work without problems (so, HTML markup and enqueued script is OK) with this JS init:
$(document).ready(function() {
$("#gallery-1").lightGallery();
});
So, my next step is to include lg-thumbnail plugin. After enqueue plugin JS I add thumbnail:true:
$(document).ready(function() {
$("#gallery-1").lightGallery({
thumbnail:true
});
});
But nothing happens. There is no errors in the console. Seems like there is no lg-thumbnail plugin present at all.
But, script is in its place:
What am I doing wrong?
How can I diagnose the problem?
Thank you!
Sorry about that, everything works fine, including thumbnail plugin. I was worng with what was the plugin function. I thought that this plugin acts on the thumbnails before lightbox was launched, but actually insert thumbnails in the lightbox after it is launched.
My apologies.

jQuery UI tabs doesn´t work

on the page: http://www.turtle-esport.de is the jQuery UI feature "tabs". I use it to switch between 2 "twitch stream channels". I moved that page to another Webspace but now i get this error message in the console:
Uncaught TypeError: $(...).tabs is not a function
The console show me that jQuery is loaded. Can anyone help me?
Mistakes
Your jQuery file is included after the function call.
Could not find jQuery UI included in the page.
So move the code block after the jQuery file. Then download and use the jQuery UI Plugin.

jQuery UI Not being loaded properly? Dialog method not found

I'm having an issue with my jQuery UI dialog on this page (and this page only):
http://www.satelliteinternet.com/
I'm not sure what the issue is as it's working on all the other pages on the site. The error I'm getting is the $("#DealerSearch") object has no dialog method. Very odd indeed.
Has anyone else experienced this issue?
They only difference i see here is that jquery is loaded twice on your homepage and once on the other pages. Try removing the one loaded from google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Categories

Resources