Develop Reference

Error with jQuery on AngularJS app

I'm trying to function this code
But when I use it on my Angular app, I found some errors, and it seems to be jQuery
var element=$('.cds'); //the problem is right here (angular.element('.cds') is the same)
console.log(element.html()); //prints undefined,
// so, no animation
How can I fix it? Any ways to use jQuery edge?
index.html
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bundle.js"></script>
As the code is in bundle.js, created with browserify, should I call jQuery too? Like var jQuery=require('jquery');? or something. Thanks for your help

Try this line in your code, after definition of done(). It will not work.
console.log($('.cds').html());
Now click the javascript button and select 'OnDomReady'
Now it works. You cannot use jQuery until domReady event.
EDIT
This is the most classic method for jQuery
$( document ).ready(function() {
/* The DOM is now loaded and can be manipulated*/
});

Try using angular's built-in jqLite first before anything ...
$scope.el = angular.element('.cds').html();
console.log($scope.el)
Or if you want to user pure jquery then try searching the parent for your element an store this in a variable :
var el = $('.container-class').find('.cds');
console.log(el.html());
Hope this helps

Is it possible to use one jquery in one specific part of my page?

Sorry if my question is too easy, I just trying to learn how to be my self clear, and as a novice I Find this most dificult.
Well, for exemple, I need to use:
<script src="/jquery-1.12.3.min.js"></script>
<script>
my code (sortable funcions)
</script>
And that is ok for me! but once I add more < scripts xxxx.js> my all page freezes...
my console returns:
form:699 Uncaught TypeError: $(...).minicolors is not a function
or
common-scripts.js?1455274914:87 Uncaught TypeError: $(...).niceScroll is not a function
Uncaught TypeError: $(...).sparkline is not a function
So, here is my question:
1) How to solve this conflicts? Are they conflicts?
2) Is it possible to run this "jquery-1.12.3.min.js" in one small part of may page? like:
<script src="/minicolors.js"></script>
<script src="/nicescroll.js"></script>
<script src="/jquery-1.12.3.min.js">
my JS code (sortable funcions)
</script>
</script>
the rest of JS code( minicolors and nicescroll)
And by doing this, prevent erros?

you need to take care of the order in which the files are loaded...
Always load jquery library first, And then rest all plugin's can come through.
use this order
< script src="/jquery-1.12.3.min.js" ></script> // 1st load jquery library
< script src="/minicolors.js" >< /script > // other plugin after jquery
< script src="/nicescroll.js" >< /script > // other plugins after jquery
< script type="text/javascript"> //your custom code
my JS code (sortable funcions)
< / script>
Regarding the errors
form:699 Uncaught TypeError: $(...).minicolors is not a function
or
common-scripts.js?1455274914:87 Uncaught TypeError: $(...).niceScroll is not a function
Uncaught TypeError: $(...).sparkline is not a function
This happens because the jquery library is not loaded, So the plugins will also crash (As it is written in Jquery). If you change the order as mentioned everything should be fine

Try This
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
https://api.jquery.com/jquery.noconflict/

I recommend you to put your script-Code in the $(document).ready(function(){}) body. This will prevent the executing of yur script before the site is loaded completely.
I assume that you want to execute some functions when you clicked on a button or some <input> or <select> has changed.
Therefore you can do something like this:
$(document).ready(function(){
$('#'+yourButtonId).click(function(){
//do what you want to do when your button was clciked
});
$('#'+yourInputOrSelectId).on('change',function(){
//do whatever you want when the user typed sth in yout input or
//selected an item out of your <select>
myCustomFunction('NewOption');
});
function myCustomFunction(argument){
//do custom things with the argument
//you can also do things with your elements on the web site
$('#'+selecId).empty(); //just an example
$('#'+selectId).append( $('<option/>').val(argument) );
}
}

document.ready not working. No console errors and jQuery is included

I have this code:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("li.on ul").attr("style", "display:block");
jQuery("li.on").addClass("open");
});
</script>
I typed '$' and 'jQuery' into the console to see if they're defined, and they are.
jQuery is added in the <head> tag. This script tag is add lower down in the HTML.
When I remove the jQuery(document).ready(function {... and just leave the two lines, my code works.
jQuery("li.on ul").attr("style", "display:block");
jQuery("li.on").addClass("open");
When I plug these two lines into the console, they work.
It only breaks when I add the .ready() function.
What's happening?

I stumbled upon the same issue "no blocks inside jQuery ready() function was firing while the JQuery library was loaded with no console errors"
Later, I came to notice that the end tag was missing. Putting back the closing tag worked out for me.
So make sure, <script>...</script> tag exists

Using jQuery noConflict() with script.aculo.us

I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.

This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready

I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.

Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();

Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>

jQuery - multiple $(document).ready ...?

Question:
If I link in two JavaScript files, both with $(document).ready functions, what happens? Does one overwrite the other? Or do both $(document).ready get called?
For example,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://.../jquery1.js"></script>
<script type="text/javascript" src="http://.../jquery2.js"></script>
jquery1.js :
$(document).ready(function(){
$("#page-title").html("Document-ready was called!");
});
jquery2.js:
$(document).ready(function(){
$("#page-subtitle").html("Document-ready was called!");
});
I'm sure it is best practice to simply combine both calls into a single $(document).ready but it's not quite possible in my situation.

All will get executed and On first Called first run basis!!
<div id="target"></div>
<script>
$(document).ready(function(){
jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
jQuery('#target').append('target edit 3<br>');
});
</script>
Demo As you can see they do not replace each other
Also one thing i would like to mention
in place of this
$(document).ready(function(){});
you can use this shortcut
jQuery(function(){
//dom ready codes
});

It is important to note that each jQuery() call must actually return. If an exception is thrown in one, subsequent (unrelated) calls will never be executed.
This applies regardless of syntax. You can use jQuery(), jQuery(function() {}), $(document).ready(), whatever you like, the behavior is the same. If an early one fails, subsequent blocks will never be run.
This was a problem for me when using 3rd-party libraries. One library was throwing an exception, and subsequent libraries never initialized anything.

$(document).ready(); is the same as any other function. it fires once the document is ready - ie loaded. the question is about what happens when multiple $(document).ready()'s are fired not when you fire the same function within multiple $(document).ready()'s
//this
<div id="target"></div>
$(document).ready(function(){
jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
jQuery('#target').append('target edit 3<br>');
});
//is the same as
<div id="target"></div>
$(document).ready(function(){
jQuery('#target').append('target edit 1<br>');
jQuery('#target').append('target edit 2<br>');
jQuery('#target').append('target edit 3<br>');
});
both will behave exactly the same. the only difference is that although the former will achieve the same results. the latter will run a fraction of a second faster and requires less typing. :)
in conclusion where ever possible only use 1 $(document).ready();
//old answer
They will both get called in order. Best practice would be to combine them.
but dont worry if its not possible. the page will not explode.

Execution is top-down. First come, first served.
If execution sequence is important, combine them.

Both will get called, first come first served. Take a look here.
$(document).ready(function(){
$("#page-title").html("Document-ready was called!");
});
$(document).ready(function(){
$("#page-title").html("Document-ready 2 was called!");
});
Output:
Document-ready 2 was called!

Not to necro a thread, but under the latest version of jQuery the suggested syntax is:
$( handler )
Using an anonymous function, this would look like
$(function() { ... insert code here ... });
See this link:
https://api.jquery.com/ready/