Hi guys having an issue with the reuters news feed. It is preventing my jquery from working. From what I have found googling it seems there is a library conflict or loading issue. The error the console gives is as follws :
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
From googling it seems if you change the $ to jquery things are fine but is there another solution for this? Loading the news feed script after? I don't really want to do a sitewide change.
I have setup a jiddle here: http://jsfiddle.net/Jjj6g/23/
If you remove the div with id=annoying you will see the test div growing and shrinking but not when the reuters feed is put in.
I know this is a bit off the wall but any advice/help would be appreciated.
You can wrap your code within an anonymous function and evaluate it right away. That way you can overwrite a variable only within this function.
Example:
(function($) {
$('.something')...;
}(jquery));
This is very common mistake. Usually it means not conflict but just you forgot to add some library. Please check carefully, if all the used libraries included and what is important too, could be found by browser:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
Related
I'm trying to have a div appearing in a dialog using the jQuery-UI function. It will be a contact form in my blogspot site. However I keep getting the notorious 'Undefined is not a function' error. I searched a lot without eventually being able to address the issue and I have no idea about what's going on.
Below is a fiddle EXACTLY as in the blogspot code (even same id names). You can see that in the fiddle the code functions perfectly.
HTML:
<a id='emailform' href='#'>Click here!</a>
<div id='contform' style='background-color:red;width:200px; height:200px;display:none;'>Blablabla</div>
JS:
$(document).ready(function () {
$("#emailform").click(
function () {
$("#contform").dialog();
})
});
http://jsfiddle.net/mukL3hq8/2/
Any help will be greatly appreciated.
UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library.
I don't know why but I have found that jQuery sometimes has some trouble working with Blogger, what mostly solved the issue was wrapping it like this:
<script>
//<![CDATA[
jquery here
//]]>
</script>
I find that blogger will sometimes encode some elements within my script and this will prevent blogger from doing so, thus the script is executed properly.
Maybe it'll solve your problem as well.
Ok, issue tracked down. It seems that the problem caused by a duplicate 'include' of the jquery-ui library. The template I've used was making a second reference to a jquery-ui library (which was also an older one from what I've used) and caused a conflict. Removing the second reference just solved the problem.
So I have a website and I want to use the jQuery slideToggle to move the blocks. The problem is that it doesn't work on my Joomla website. However, when I copy the code to jsbin.com, it works. Here's the link http://jsbin.com/EcObOwex/1/edit
Here's the actual JS I'm using:
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
I don't know what additional information I can provide.
The JS code is in splash.js, link to it works properly (checked it, there's some other script that works from the file)
Edit: I was informed that it was an JS error that I was getting.
Here's the error
Uncaught TypeError: Object [object Object] has no method 'tooltip'
And here's the code. Could anyone help me determine what is it?
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"container": false});
});
I didn't add it manually, it's part of the <jdoc:include type="head" />. Could anyone help me determine how to shake this code off?
EDIT 2:
Some more information:
Here's my full <head> code. http://jsbin.com/aFOZEWI/2/edit
AND YOU CAN ALSO FIND THE FULL SPLASH.JS in the JavaScript part of the Bin.
P.S. The other part of the splash.js works, my overflow element changes just as it's intended.
It might be possible that you have multiple jQuery libraries being imported which may cause conflicts. In addition to that, let's import the scripts and add you code using Joomla coding standards.
<?php
JHtml::_('jquery.framework'); //This calls jQuery in noConflict mode
$doc = JFactory::getDocument();
$doc->addScript(JUri::root() . 'templates/vabankbroker/src/splash.js');
$doc->addScriptDeclaration("
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
");
?>
As for the Tooltip error, open the index.php of your template and if the following doesn't exist, I would recommend you add it:
JHtml::_('bootstrap.framework');
Hope this helps
I found my answer through this post:
My script works in jsfiddle but not site. Cannot call method hover of null?
Thank you for all kinds of notices, I'll make all those fixes, but for this exact problem, I had to include the script in the end of the <body> tag, and it started working.
Cheers :)
my website is marutiindia.in. My website was working fine until I installed a module named lof k2 scroller. The website was showing jquery errors and the module at the lower half of the template was not working. But I managed to get the module to work by adding the following code at the start of the JS file which was showing error:
if(jQuery){
jQuery.noConflict();
}
But, now I am getting other JS errors which I am not able to understand.
Below is the link for the screenshot of errors:
Screenshot
I don't know what these errors mean.
Also I have one more plugin to use for my website which also causes scroller to not work.
Please help me resolve these errors.
Thanks.
Joomla uses Mootools, which also use the $ function name. in order to avoid this, your plugins either:
must use jQuery instead of $. For example, instead of $('div') to get divs, use jQuery('div')
if you really want to use $, wrap the jQuery code in a closure
(function($){
//code that uses `$`
}(jQuery))
make sure the plugins are extending from jQuery and not $.
I had an blog using WordPress. I got an jQuery code to make some div fixed after some scroll, got it here:
http://jqueryfordesigners.com/fixed-floating-elements/
Someday ago, I got an plugin to make and "Recent Post Slider" for WordPress. But when I activate it, the fixed div jQuery stop working. I think that can be an conflict, but really don't have sure yet.
What is the best move to know what's happening?
You can use jQuery.noconflict() for this. For example:
$j = jQuery.noConflict();
$j("your_div").css("position", "fixed");
Here you have the code explanation. jQuery.noConflict
Get a browser with JavaScript debugger console and make it print you the $ variable. jQuery returns : function (a,b){return new e.fn.init(a,b,h)}. The $ variable is sometimes used by other libraries, and if you use it directly in your jQuery it may get overwritten. To avoid this, encapsulate your jQuery code:
(function($) {
your code with $
})(jQuery)
This may break some of your global variables though, it depends on how you wrote your code.
I don't think that jQuery does not work anymore as #nicowernli said. But it is possible that the plugin changed the html of the page.
The best move is to disable the "Recent Post Slider" plugin and check if the fix starts working again. Then you will know what where problem is.
make sure that you've included Jquery once but no more
After 3 days of working on one 'Dragable Windows Interface' i discovered that the core isn't allowing me to make more than one window on a page.
I decided to switch to Prototype-UI interface but it seems like it interrupts with my current Jquery code, any ideas how to fix this?
This is the error that Web Console shows me when i attach Prototype-UI JS files:
[16:39:42.443] $("BODY") is null # http://XXX.XXX/smart_panel/res/main.js:4
so basically this is the code that makes the problem: (Jquery bg image stretcher).
$(document).ready(function(){
// Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/spb3.jpg'], imageWidth: 1360, imageHeight: 765
});
});
After i've tried to delete this i got another error on the next JQuery plugin ($('#dock2') is null).
And its really frustrating to try over and over again when you are not a JavaScript pro (I think the practice is the best learning process tho).
So after deleting those three lines:
<script type="text/javascript" src="res/prototype.js"></script>
<script type="text/javascript" src="res/effects.js"></script>
<script type="text/javascript" src="res/window.js"></script>
Which is the files of Prototype-UI everything is normal again and i get no errors, so is there any way that this interface was designed to work as a standalone without any other JS/JQ scripts? I don't think so and that's why i need your help.
Here is the link to Prototype-UI: http://docs.prototype-ui.com/trunk
If there is no way to fix it, can someone please suggest a GOOD Dragable windows plugin that will allow me to create multiply resizeable-dragable windows on a page? :\
Best Regards,
Rico S.
If you're trying to use jQuery and Prototype in the same page, you're going to have to deal with the fact that only one of them will win out in the fight for "$". It sounds like you're importing Prototype after jQuery, which means that your code that expects "$" to be the jQuery master function is actually the Prototype "getElementById" shortcut.
I don't remember whether Prototype has a conflict prevention hook, but jQuery definitely does. What you can do is after importing the jQuery library, add a small <script> block like this:
<script> jQuery.noConflict(); </script>
After that point, the libraries can co-exist, but all your code that wants to do jQuery stuff will have to use the function name "jQuery" and not "$".
You may want to look into the jQuery UI widget collection. There's a "dialog" widget in there that is (or can be) draggable and resizeable. Whether multiple such dialogs can be present on the page concurrently, I don't know, mostly because that's a bad user interface pattern (in my opinion) and I'd never do it.