Using controls requiring different jQuery Versions - javascript

I am trying to use an Apycom menu requiring jQuery 1.3.2 on the same pages as Flexigrid for Rails which depends on jQuery 1.2.3. To add to the confusion I'm trying to include the Rails 'prototype.js' and use this as well. Here is my include order:
<%= javascript_include_tag :defaults %>
<%= yield(:head) %>
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/flexigrid.js" type="text/javascript"></script>
<script type="text/javascript">
jq123 = jQuery.noConflict(true)
</script>
<script src="/javascripts/menu/jquery.js" type="text/javascript"></script>
<script src="/javascripts/menu/menu.js" type="text/javascript"></script>
<script type="text/javascript">
jq132 = jQuery.noConflict(true)
</script>
When the page I'm testing loads up, Firebug gives me the following:
$ is undefined
(240 out of range 237) menu.js (line 240)
and consequently my menus don't work (at least not the parts that matter). I don't have a Flexigrid grid on this page so I can't attest to whether that even works. I saw this answer (How do I run different versions of jQuery on the same page?) but it doesn't completely work. My local JavaScript works but the jQuery plugins don't seem to be happy.
Any suggestions?

Menu.js is assuming the jQuery function is called $. When using jQuery.noConflict you need to update the references to the jQuery function to whatever you named it (in this case jq123 or jq321).

#MightyE makes a good point that menu.js file is referencing the $ object incorrectly. An easy solution to fix this would be to open you menu.js file and wrap the contents in this function call
(function($) {
// $ is now equal to jq321
// menu.js stuff
})(jq321);

Related

Jquery Confliting with Magento Prototype

I want to use Foundation 5 Reveal modal in magento product page.
I added jquery and foundation.js in footer and call Foundation from footer.phtml
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
and added modernizr and css files in head.phtml
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
Then i added markup on product page and its working very well. But it is conflicting with magento prototype.
Then i just done jQuery.noConflict(); and then reveal model stopped working. I thought i is becacuse i am loading two versions at same time so i removed build in jquery lib and then again prototype stopped working.
I also juggled jquery call from head to local.xml , page.xml but no luck!
ERROR CODE: Uncaught TypeError: Cannot read property 'config' of undefined prototype.js:828
Does anyone know what is the problem or mistake i am doing?
Huge thanks in advance!
Two things that may help:
It's important where you put the noConflict call. If the rest of your site uses PrototypeJS, then here's where I'd do it:
<script src="js/vendor/jquery.js"></script>
<script>jQuery.noConflict();</script>
<script src="js/foundation.min.js"></script>
Having done noConflict, you have to use jQuery* instead of $ when you want to use jQuery:
<script>
jQuery(document).foundation();
</script>
(* You don't have to, you can use the return value of noConflict to create an alias. For instance, var $j = jQuery.noConflict(); will let you use $j instead of jQuery.)

jquery.min.js conflicts with jquery-1.4.4

I have both the .js files in single page which carrys out different functions. in jquery.min.js
$(document).ready(function() {
$.timeliner({
startOpen:['#19550828EX', '#19630828EX']
});
$.timeliner({
timelineContainer: '#timelineContainer_2'
});
// Colorbox Modal
$(".CBmodal").colorbox({inline:true, initialWidth:100, maxWidth:682, initialHeight:100, transition:"elastic",speed:750});
});
In jquery-1.4.4 I have a rotating wheel function.
What Should I do , so that both the functions would work in that single page??
if you need to use multiple files on same page.
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script> $144 = jQuery.noConflict(true);</script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
Now to access version 1.4.4 you need to use $144 like
$144('.element').val();
while $ for version 1.6.2.
jQuery min is a minimized file of jquery (it also has a version). jQuery 1.4.4 is the non-minimized file of jquery version 1.4.4.
You need to ask youself:
which jquery version do I need for my application?
Do I need the min version or not.
At the end choose one jQuery file and don't add two if it's not something you really need.

why jquery/javascript code get conflict with other jquery/javascript?

While using jquery or javascript code most of the time i have to face the problem of jquery or javascript conflict.
Still i haven't got the reason why this stuff get conflict with other code?
Any one have any idea about this?
And any solution so that next time this issue will not occur while project development.
I have one solution to stop the conflict of jquery files that is,
<script>
var j$=jQuery.noConflict();
</script>
but all the time this code is not working.
If you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
Method 1:
When you put jQuery into no-conflict mode, you have the option of assigning a variable name to replace $. ( only once )
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>
Method 2
You can continue to use the standard $ by wrapping your code in a
self-executing anonymous function; this is a standard pattern for
plugin authoring, where the author cannot know whether another library
will have taken over the $.
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function($) {
// your code here, using the $
})(jQuery);
</script>
Method 3:
use jQuery instead of $
there few other ways to do so
reference
For jQuery, it's explained in noConflict's API page; basically, many JS frameworks use $ as a function name, and so they may conflict if more than one is used. Which it shouldn't anyway.
Try placing this in your header:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"> </script>
Try to give an alert when DOM is ready and find it alerts or not if not there is a conflict
<script>
$(document).ready(function () {
alert("Hello!");
});
</script>
I there is conflict try this:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

Calling javascript functions from view in Rails 3

I am new to Rails and I have a pretty simple problem with calling javascript functions from within a view. In Rails 2 I would do...
= javascript_tag "name(arguments)"
where the javascript function "name" was located in my application.js file. However, this does not appear to work in Rails 3? Or am I missing something? I have been searching Google for some time without finding an answer.
UPDATE:
OK, so I looked at the source of the two different ways (using the javascript_tag and the haml javascript filter) as suggested. And this is very strange because the html source appears to be identical? Apart from a difference in double and single quotes in declaring the script type.
FIRST: using the javascript_tag which does not work
= javascript_tag "number_interval(#{fact.current_value}, #{fact.growth_per_second}, #{fact.decimal_number}, '#{dom_id(fact, "number")}'"
Source...
<div id='number_number_interval_727'>loading</div>
<script type="text/javascript">
//<![CDATA[
number_interval(6952596670.36814, 2.33002440293917, 0, 'number_number_interval_727'
//]]>
</script>
SECOND: using the haml javascript filter and it works
:javascript
number_interval(#{fact.current_value}, #{fact.growth_per_second}, #{fact.decimal_number}, '#{dom_id(fact, "number")}')
Source...
<div id='number_number_interval_727'>loading</div>
<script type='text/javascript'>
//<![CDATA[
number_interval(6952596917.02179, 2.33002440293917, 0, 'number_number_interval_727')
//]]>
</script>
Well, I guess I'll just stick with the haml filter!
You have a syntax error:
= javascript_tag "number_interval(#{fact.current_value}, #{fact.growth_per_second}, #{fact.decimal_number}, '#{dom_id(fact, "number")}'"
is missing the closing parenthesis for the number_interval function. I think that it should be:
= javascript_tag "number_interval(#{fact.current_value}, #{fact.growth_per_second}, #{fact.decimal_number}, '#{dom_id(fact, "number")}')"
A friend of mine pointed me to the fact that there is a javascript helper in haml. Apparently, I can call javascript functions by using...
:javascript
name_of_function(arguments)
This works, but of course only with haml.
Check out the right syntax on link text
and Check if you have included the javascript defaults in your file.As this working for me in RAILS 3 also
Silly question but... is application.js included in your layout?
One option to try is to hand-code the js function-call into your view in "real" javascript - just to see if it works. eg
<script type="text/javascript">
name(arguments)
</script>
Then you can be sure it's not the js itself (or lack thereof) at fault.

Conflicts in Mootools & jQuery In Joomla

I read all the related post but I think I am missing something.
My page structure is:
1 - Load Motools library in Joomla. Code:
JHTML::_('behavior.tooltip');
JHTML::_('behavior.mootools');
JHTML::_('behavior.formvalidation');
2 - Then load the Jquery library code is:
<script language="javascript" src="<?=$this->baseurl;?>/includes/js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?=$this->baseurl;?>/includes/js/jquery/customjsfile.js"></script>`
3 - Then there are few JS function which uses Jquery Functionalities. The code is:
function abc() { /* -.stuffs uses jquery */ }
function xyz() { /* ..another function which uses jquery */}
4 - Load body of the page
5 - At the end again few lines of JS code . Which again use Jquery. Code is:
<script language="javascript">
$("#dialog").html(newHTML);
</script>
This is how my page is.
Now I am getting the Conflict errors in Motools & Jquery.
How do I resolve it.
use jQuery instead of $ and
give
jQuery.noConflict();
jQuery.noConflict
Many JavaScript libraries use $ as a
function or variable name, just as
jQuery does. In jQuery's case, $ is
just an alias for jQuery, so all
functionality is available without
using $. If we need to use another
JavaScript library alongside jQuery,
we can return control of $ back to
the other library with a call to
$.noConflict():
Please see:
Using JQuery with other libraries.
jQuery.noConflict(), this is what you need.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
source: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
See this page. It seems to be answered there
http://groups.google.com/group/jquery-en/browse_thread/thread/3dabd31a8ab60505?pli=1

Categories

Resources