After installing lightbox for my website my comments stopped working. I looked at the code and moved the javascript links that were in the <head> (the ones that came with lightbox) in the to above the javascript links that came with Wordpress-Buddypress. Before my javascript links from Lightbox were below the javascript links that came with Wordpress.
After making the switch, the comments started working again on my website but now the lightbox does not work.
When I use Firebug to find errors, I get this error.
$("#videogallery a[rel]").overlay is not a function
That code comes from "videolightbox.js" which was a file that came with my lightbox.
I did lots of reseach on this problem and I am thinking that I might need to use jQuery.noConflict(); but I have no idea how to use it? I was looking at this link
but I can't seem to get it to work because I have no idea how to use it. I also tried replacing all the $() with jQuery() but that did not solve my problem.
but I have no idea how to use it?
var $j = jQuery.noConflict();
and your code will change from
$(selector) to $j(selector)
A lot of examples are given here
http://api.jquery.com/jQuery.noConflict/
One thing to consider closely is the script loading order and watch for repeat loading of JQuery. In some (hopefully rare) situations, you can load JQuery, set up some code that uses it, then reload JQuery which tosses away the events that were set up after loading it the first time.
I know I ran into that situation once, but I can't remember the details that led to it occurring.
To your answer
$=jQuery.noConflict();
Now you can use $('#id').css(...);
The error is probably causing the rest of the code not being executed, .overlay is not a function means that .overlay is not a function and $ is working fine.
var test; test("#videogallery a[rel]").test()
//TypeError: test is not a function <-- You would see this if $ wasn't working
var test = function(){return {};};
test("#videogallery a[rel]").test();
//TypeError: test("#videogallery a[rel]").test is not a function <-- You see this because .overlay isn't working
It simply means you are trying to call .overlay before it exists.
Related
So, this is maybe just a question for interact.js users or I am missing something completely..
I was looking for a javascript library that provides me with drag/drop/scale/rotate and touch functionality for all those given functionalities. So, I stumbled upon interact.js, yet I seem to have a problem referencing elements while using the onDrop method:
I'll just take the code of the interact.js page, which I'm providing you here: http://jsfiddle.net/Zyy2N/2/
The part that is making problems is:
$(event.relatedTarget.id).hide();
which doesn't do anything, yet also doesn't throw any errors. More so:
$('#yes-drop').hide();
works, so does:
console.log(event.relatedTarget.id);
which returns the id as expected. Is this an error?
Solution: One should actually use the correct syntax if one wants code to run correctly...
$('#'+event.relatedTarget.id).hide();
This would actually be a correct and working solution :
http://jsfiddle.net/Zyy2N/3/
Sligthly better:
$(event.relatedTarget).hide();
http://jsfiddle.net/Zyy2N/8/
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.
I am working on a crm adding some features. One of them was to use ajax to post to another page a use the returned information to fill out some forms. It worked great. I am using $.post and all that good stuff. I then noticed that one of the other prewritten features of the site stopped working. So I started poking around and the feature that stopped working was giving this error in the console log.
[19:15:21.013] TypeError: $("view_Option").selectedIndex is undefined # http://test.com/crm/modules/Calendar/script.js:598
So ok I figured I was linking to jquery twice or something along those lines so I commented out that line and it works. So I check my code to make sure that works too and now I get
[19:13:40.312] TypeError: $.post is not a function # http://test.com/crm/modules/Calendar/renterAutoUpdate.js:16
Can someone explain to me the reason this is happening and how I would go about fixing something like this?
[Edit] The line that determines whether my code or the prewritten code is going to work is
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
Probably you've commented out the line, that was used elsewhere in your project. Try uncommenting it again and see what happens. The $.post is not a function should gone, and you should get back your first error.
If it happens, you have to fight back the first error, which is probably that jQuery doesnt have the .selectedIndex. Instead, you should write:
$("view_Option")[0].selectedIndex
Try this, and write, what happens.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
var $jq = jQuery.noConflict();
</script>
And then I did
$jq.post(
instead of
$.post(
Fixed all my issues for anyone else having this same problem
I have a weird problem in jQuery. The problem is that I can smoothly use $('#container').html(content) to replace the page content but to specific page. It is not working all around. Gives 'TypeError' message in console. Is there any probability that using SlickGrid can cause such error. Because error is thrown only in that pages where I have used SlickGrid.
Any suggestion would be highly appreciated.
It's hard to tell what's going on with your page, but my guess is that you may have a conflict with the $ between jQuery and SlickGrid. Look at the noConflict function in jQuery - it may help you out.
Call $.noConflict(); before SlickGrid's javascript <script> tag is added, and then refer to jQuery functions by using jQuery(selector) instead of $(selector).
Hope this helps!