I am trying to add floatlabels to my project, and I have added the floatlabel.js and jQuery files and references to the project, but when I try to initialize it with:
<script>
$('input.floatlabel').floatlabel();
</script>
It gives the error: 'the object doesn't support the method floatlabel'. I have also tried this:
<script>
$(function(){ // document.ready
$('input.floatlabel').floatlabel();
});
</script>
What am I missing?
As someone pointed out, it's not an angular question, well that proves how confused I am, since I thought it was for angular, turns out, it's not. but this float-label is, and it works perfectly, sorry for my blunder.
You have to make sure that you are using correct version of the jquery for the floatlabels js . And you also have to load it after the loaded jquery .
And after that you can initialize the script .
Related
So I'm trying to add a class with jquery.
Here is the code:
jQuery(document).ready(function($) {
$('body').addClass('scrollbar-dynamic');
});
I can confirm the script is loaded on frontend as it appears in source code.
Plus all other javascript "1400 lines" works fine.
The addClass jquery method is also used about 30 more times throughout the script.
I'm also using the latest version of wordpress
It's just this time it's not working.
Here is a working js fiddle
Stuff like this just drives me crazy.
Cheers for the help
Ok - since console.log(jQuery) is returning what we'd expect, I think the issue is with how the library is being referenced. Here's your code:
jQuery(document).ready(function($) {
$('body').addClass('scrollbar-dynamic');
});
The script knows what jQuery is...but it doesn't seem to know what $ is, and it's not being bound to anything when it's called.
Try this - if it works, it's a binding issue.
jQuery(document).ready(function($) {
jQuery('body').addClass('scrollbar-dynamic');
});
I've posted here before but can't find my account so this is my new first post.
I'm attempting to use a js plugin called "blueberry slider" with a responsive js menu called "Menumaker" and something is conflicting, can't get the slider to show. I really don't know what I'm doing with JS yet, hoping someone can help. In Chrome, element inspection, it's saying "undefined is not a function". I haven't modified anything of the plugins.
I think your problem is probably that you're loading a version of jquery, adding a plugin to it, and then loading a new version of jquery and attempting to add a plugin to that, too. Pick a single version of jquery to include. You're including three:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
at the top,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
just above your blueberry script, and
<script src="js/jquery-1.8.3.min.js"></script>
at the bottom just above your menumaker script.
The latest version of jQuery loads and overwrites your blueberry script's modified version of jQuery.
I suggest you just get rid of the last two and use the first version.
the function which you are calling and function present in your plugin library doesn't match , which is the reason it doesn't find any function named "undefined" in that library. Try checking the function name in it's documentation.
I am creating a plugin which uses the jQuery fullCalender.
The code appears to all be working fine however when the page fully loads and my shortcode populates its appropriate html and javascript I get the following error:
So from this I can gather that jQuery resolves ok - but somehow the calendar does not? Can somebody please help me! It may be because I am using OptimizePress which might be including its own copy of jQuery - and my plugin is also including a copy of jQuery and the calendar. But I dont know how to make sure i reference my own jQuery or make this work.
Thanks!
The answer was to use wp_register_script and wp_enqueue_script to add the script to my generated document
I have noticed an interesting issue on a website that I am helping a friend with. When I am on the homepage I can use javascript/jQuery to access the DOM as expected and everything works fine. If I use the console and type console.log($('html')); it returns the html object from the site as expected.
However, if I do this exact same thing on any page other than the index, it returns null. The source of the page appears to be the same and I can see all the elements there, but javascript itself does not seem to be aware of them.
The site is built using the Typo3 CMS, if that could be part of it.
Does anybody have any experience with this? Or is there any way to tell javascript to re-read the DOM after the full page load?
EDIT Somebody asked for a link to the site so here it is: http://www.stinglonline.de/
You have a conflict between jquery and prototype.
Add something along the lines of var $j = jQuery.noConflict(); and then update your jquery on that page to use the new $j variable such $j("html") and it should work for you. See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
I tested this, in console, on http://www.stinglonline.de/haupt-menue/stingl-gmbh/profil.html.
Alternatively you can just use jQuery instead of the $, whichever works best for you.
Well it looks like the $ is part of the jquery library on http://www.stinglonline.de/top-menue/home.html
But the $ is part of the Prototype library on every other page.
You do not have this issue on the homepage because you do not use prototype there.
You should declare your prototype library BEFORE you declare you jquery library.
It looks like only the home page is running jQuery.
If you use native Javascript to select from the DOM it works just fine.
Give it a try:
document.getElementsByTagName('html');
That does the same thing in Javascript that $('html'); does in jQuery.
There are a few Notes and things to consider When using this native Javascript method.
I find jQuery very useful, but without a proper understanding of native Javascript it becomes a crutch.
EDIT
scrappedcola's Answer is correct I missed the jQuery tag in the code when I looked.
In the homepage, type $ in console(Chrome) as blow. It use jquery.
So $('html') return document.getElementsByTagName('html').
>$
function (a,b){return new m.fn.init(a,b)} jquery.js?1399526417:2
in other pages, type $ in console(Chrome) as blow. It use prototype.
So $('html') return document.getElementById('html'),
$('skiplinks') return document.getElementById('skiplinks').
>$
function $(b){
if(arguments.length>1){
for(var a=0,d=[],c=arguments.length;a<c;a++){
d.push($(arguments[a]))
}
return d
}
if(Object.isString(b)){
b=document.getElementById(b)
}
return Element.extend(b)
}
prototype.1.7.0.yui.js:1
$('skiplinks')
<ul id="skiplinks">…</ul>
I am using primefaces 4.0 and jsf 2.2 in my Application. I have created a page where a datatable is nested in a tabview. Now when I want to filter the datatable, it keeps loading and doesn't how a result.
After some time i recognized, that javascript throws the following error: "Widget for var 'test' not available! ".
I guess this should be the issue, but what's the problem or how can i solve this? Does anyone have an idea?
Best Regards!
I am posting my answer here hopefully can help some people out there.
I have the same problem. My case is I want to perform the default filter for my <p:dataTable>, thus, I have to perform the PF('dtWidgetVar').filter(); script in javascript when page load.
This is my initial attemp:
$(document).ready(function()
{
PF('dtWidgetVar').filter();
});
It looks perfectly fine, but just doesn't work. Until I find the error in Chrome console Widget for var 'dtWidgetVar' not available!, and googling it for hours, finally I found this thread. Therefore I add a $(function(){}); to wrap my script as below:
$(document).ready(function()
{
$(function()
{
PF('dtWidgetVar').filter();
});
});
BOOM!, finally it works. From here as well as here both stating that the $(function(){}); and $(document).ready(function(){}); are actually the same, so I have also no clue why it works. I have also try to only use $(function(){}); but it doesn't work. Have to use both functions to make it works, at least in my case. But still, I hope this helps some humans! Sorry for my bad English.
In the absence of posted code it's impossible to say. However, there are a couple of things I can suggest to look for.
Check to see if you have a duplicate widget name in your view.
Obviously you wouldn't intuit that from the message you got, but I
recall in the past getting this same message for duplicate widget
names
Check to see if you have a component where you've given the widget var the same name as the ID. I've read that this is to be avoided.
A very common error is to conflate ids and widget names. That
is, you are trying to use an ID as a widget var
See what in your code is trying to reference "test"
I can't confirm this myself, but I've seen other StackOverflow posts that suggest this is a possible error when you have imported two copies of the jQuery library
I've experienced Widget for var '[widgetVar]' not available when using p:ajax update="#all" inside a p:commandButton. I could avoid the issue by putting content to be updated in a h:panelGroup which I referenced in update and put the element declaring widgetVar outside that panel group.