I was asked in an interview that how do you 'declare' jQuery? He did not mean a jQuery variable or a $(func()). In case you find this question weird, please do not penalize me for this as I'm enquiring just cause I was asked. :)
You don't "declare" jQuery, you just include the file within a script tag:
<script src="/locationof/jQuery.js"></script>
If you look in the jQuery source it appends itself to window.$ and window.jQuery when it runs as the source code is in a self-executing anonymous function.
(function( window, undefined ) {
// rest of source here
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
})(window);
We don't "declare" jQuery, we just add "reference" to the file where is this library in. For example:
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
That's it.
Perhaps he meant how to include it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
I guess he was assuming that you say using a $ sign
Related
I am using a combination of prototype and script.aculo.us to implement a lightbox effect in my asp.net page.I have also jquery included in my page.I have several DIV tags in my page,But after including the prototype file in my head of the page,I am not able to read the divs in my javascript using jquery
var div = $("#divLeftSideModelsList");
alert(div)
gives me an error saying that the object is null
But
var div = document.getElementById("divLeftSideModelsList")
is giving me the object.
Is this becuase there is some conflicts between jQuery and other frameworks ?
PLEASE advice
Have a read of this: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Shows good examples :)
OVERRIDING THE $-FUNCTION
However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:
<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>
This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.
Additionally, there's another option. If you want to make sure that jQuery won't conflict with another library - but you want the benefit of a short name, you could do something like this:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
You should use jQuery in noConflict mode. And then use jQuery() instead of $().
Strange bug. Anyways, both prototype and jQuery redefine the global variable $.
Please read this to know how jQuery can play nice with other libraries.
It basically says that calling jQuery.noConflict() leaves the $ variable alone for the other libs to use
Does this code work:
var div = jQuery("#divLeftSideModelsList");
alert(div);
I have this piece of code that works fine in the webpage:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
$(function(){
$('#carousel').infiniteCarousel({
imagePath: 'images/'
});
});
</script>
<!--<script src="prototype.js"></script>-->
However, as soon as I uncomment The prototype.js line it gives an error:
Uncaught TypeError: Cannot call method 'infiniteCarousel' of null.
The prototype.js file is from http://prototypejs.org/ and I'm using it for some other function. I have Googled a lot but am unable to come up with a solution - how do I solve this?
Your Prototype.js library is taking over the $ global variable. You can assign the $ variable to jQuery within the scope of your document.ready shortcut in this way:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
$(function($){
$('#carousel').infiniteCarousel({
imagePath: 'images/'
});
});
</script>
<!--<script src="prototype.js"></script>-->
The $(document).ready() function, and its shortcut $(function(){}), sends the jQuery factory function as the first argument to its callback. Naming that argument $ will scope a local $ variable as jQuery within that function.
In the future, I suggest bringing jQuery in after prototype, and using the jQuery.noConflict method to relinquish jQuery's control of $. You can then assign the $ function back to jQuery only inside functions where it's necessary, using the IIFE wrapper:
// prototype code using prototype's $ out here
(function($){
// jQuery code using jQuery's $ goes here
}(jQuery));
In this particular case, you don't need to do that because the $(document).ready() method already does it for you. But you should grow used to that tool.
And you should replace Prototype. :)
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>
javascript noob here. So I'm trying to use this s3 uploader jQuery example here
in my Rails 3 app which uses Prototype. After reading the jquery doc on how to use Prototype and jQuery and avoiding conflict, I am confused on where to use the jQuery.noConflict(); function.
I planned to use the
jQuery.noConflict();
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
to wrap any jQuery code, but it doesn't seem to function.
My question is
Should I wrap the code in jquery.js ? the js files from plupload? The javascript code in the helper?
There is a good example of where to put .noConflict() here: http://api.jquery.com/jQuery.noConflict/
<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>
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