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
Related
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) );
}
}
I have an easy tabs page,with three different pages(TAB1,TAB2,TAB3).
Tab.php
Tab1|Tab2|Tab3
//Tab1 has an slider plugin(with Jquery UI)
//Tab2 has an autocomplete for select list
The conflict come from because two function wants to use jquery variable.
Two pages contains jquery plugins but with only jquery version(jquery-1.11.1.min.js)
The tabs only works properly(elements showing,jquery methods correctly running) when only one tabs is enabled(just commenting the link).
I use the jquery no conlict to try to solve this problem(before that there was conflict between the main tab page and the invidual page):
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var s = $.noConflict();
</script>
So on the sub page(tab1) i use like:
s(document).ready(function(){.....}
I also try to define a second shortcut(first i try to use the same 's' there too) :
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var j = $.noConflict();
var s = $.noConflict();
</script>
to use this at the Tab2 page.It was not a solution for me.Diseable Tab1 and using 'j' also works good.
One more importent thing is the firts downloaded page shown correctly each time,so i know the conflict is becuse of the jquery variable(overwrite it or something like this).
I try to find a solution by my self but i couldn't.Please help me
Update1:
As i note before i made a lot of research before that:
Jquery tabs conflicting with revolution slider
This question is very similar for my problem,but the difference i have more tabs,more conflict so i thought if i use more shortcut it will solve the issue.
Update2:
It is more interfering between the plugins than conflict.
using
var s = $.noConflict(true);
totally throw awey the full page,even the tabs does not want to work
First the tab.php load,it is using the jquery global variable,
than if i click on Tab1 it is also wants to use the global variable,
After if i click on Tab2 also need jquery variable
So bumm the interfering is ready
Update3:
After a lot of research,i found the problem is not with the noconflict.
The Tab2(upload.php) page is correctly rendered when i full reload the page.
s(document).ready(function(s) {//without the ready it does not rendered even after F5
s("#modell").select2(); });
I believe that you are trying to load jQuery with a different variable name. I would suggest that you use:
$.noConflict();
jQuery( document ).ready(function( blah ) {
//You can now use blah as the jquery method (e.g. blah("#button").click();)
});
I've made an example here: http://jsfiddle.net/me66st8w/. You can find out more about this in the official documentation here: http://api.jquery.com/jquery.noconflict/.
I am using a plugin that converts my select boxes to better looking select boxes through a method called tzSelect(), which is contained in the jquery.tzSelect.js file. When this file is called from script.js (it is called on document ready), it functions correctly. However, when called in main.js, I get Unknown TypeError: Undefined is not a function.
This is the functioning call in script.js:
jQuery(document).ready(function($){
$('select.regularSelect').tzSelect();
});
This is the nonfunctioning call in main.js (not within anything else)
function redoSelect(){
$('select.regSelect').tzSelect();
}
And lastly, the order in which my javascript is loaded in my footer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="/static/js/ready_script.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/tzSelect/jquery.tzSelect.js"></script>
<script src="/static/js/script.js"></script>
The plugin only works with the older jquery, which explains the version. I have tried placing the function in a document.ready and using the word jQuery instead of $, both to no avail. Any ideas?
EDIT: Fixed. The issue was with my jQuery version. The newer version of jQuery broke a couple of features, which I was then able to fix with small edits.
I am trying to load a Jplayer on my website. The instructions say to use this code to initialise the plugin:
$('body').ttwVideoPlayer(myPlaylist, {options});
Where do I place this code?
The player loads correctly and the script works, but won't play the files in the playlist function.
I would usually put all initialization code in a $(document).ready handler.
$(document).ready(function() {
$('body').ttwVideoPlayer(myPlaylist, {options});
});
The code you have posted should be wrapped in an appropriate handler you're using like
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('body').ttwVideoPlayer(myPlaylist, {options});
});
</script>
Don't forget to add an appropriate jQuery library for it to work.
I'm using ContentFlow (http://www.jacksasylum.eu/ContentFlow/index.php) to create an image carousel on my page. The images are loaded via a jQuery AJAX-call. This works fine. The ContentFlow is included with this code:
<script language="JavaScript" type="text/javascript" src="contentflow.js" ></script>
Now I want to apply the default 'white' addOn upon creation of the ContentFlow. The CF is created in my document.ready()-codeblock. According to the documentation this should be done like (I believe):
$(document).ready(function () {
...
var ajax_cf = new ContentFlow('ajax_cf', {useAddOns : 'white' });
});
The ContentFlow is created just fine, the AddOn/theme however, is not applied. When using a non-AJAX approach the theme is applied correctly, so I know for sure the theme works, has no syntax errors, etc.
Any clues?
You need to manually add the addon script into the page.
For example, to include the slideshow addon use:
<script type="text/javascript" src="content_flow/contentflow.js" load="slideshow"></script>
<script type="text/javascript" src="content_flow/ContentFlowAddOn_slideshow.js"></script>
Then the Ajax config. worked for me
Trying to find the answer to something else about ContentFlow, I may have stumbled upon a solution to your issue: http://www.jeremyckahn.com/blog/?p=61
This post basically suggests not to set your ContentFlow configurations in $(document).ready
Additionally, my experience from Oliver Kohll's answer is that you DO need to specify the AddOn you want in the 'load' attribute for inclusion of contentflow.js as above...but you should NOT need to also specify the AddOn.js
Hope this helps!