Jquery Initializing - javascript

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.

Related

Function is not found in Jquery, but is found in Javascript

I have an html document in which a function is called like this
<div id="mon" class="topbar" onclick="verd()">
This calls a jquery function inside the body tag that goes like this
<script src="jquery.js">
function verd(){
$("#stillmain").empty();
} </script>
This returns the error:
Uncaught ReferenceError: verd is not defined
at HTMLDivElement.onclick
When I change the script to pure Javascript without Jquery however like this
<script>
function verd(){
$("#stillmain").empty();
} </script>
it does recognize the function verd(), can anyone explain what is going on, and how I could still use Jquery?
I am using the newest version of Jquery(just changed the name, nothing else).
When you give a script tag a src attribute it's going to load that source file in place of the script contents. So any script tags with a src should be kept empty.
You need to load jQuery by calling a script tag with its source on it, and then in a separate tag you can make your own script tag and write your custom JavaScript there.
<script src="jquery.js"></script>
<script>
function verd(){
$("#stillmain").empty();
}
</script>
Make sure that your custom scripts are loaded after jQuery.
If you want to run this as a jQuery function you need to use the proper syntax. Try the link below.
How to Create a jQuery Function
Also, you need to load jQuery in a separate tag or else none of your code will be ran other than the source of that script!

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

How can I reliably run a jquery script after page load

I'm attempting to get some jquery code to run after a sharepoint page loads, the code being:
$(".ms-commentcollapse-icon").click();
I've been using the following to load the code after the page loads, but it does not seem to be very reliable (it will work sometimes and other times it wont):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$(".ms-commentcollapse-icon").click();
});
</script>
are there any other good methods for achieving this? I'm not sure what's going on, sharepoint could be at fault, but I figured I would try fiddling around with the script a bit more first.
You could use an auto-executing function:
<script type="text/javascript">
(function () {
$(".ms-commentcollapse-icon").click();
} ());
</script>
If this is SharePoint 2010 or above, you can use ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.JS") to keep your code from firing until after the SP.JS library has loaded (or you can put any other library in the second parameter for a similar effect).
If this is in a web part and you don't want it to execute until other web parts on the page are fully loaded, make sure the web part containing the script is below the other web parts.
As a last resort, you could execute it on a delay using setTimeout or setInterval, but that's ugly.
You can prevent the default behaviour by using e.preventDefault(); within the function.
<script type="text/javascript">
$(".ms-commentcollapse-icon").click(function(e) {
// We're going to stop the default behavior
e.preventDefault();
//some code here
});
</script>

Unable to execute function after JSON loaded

This is the pen that shows that when a JSON request completes, a name 'Antonio' appears. But jQuery function is not executing on it. Please make sure that document.write is a necessary function for me.
This is the code I wrote to get the name Antonio.
<script type="text/javascript">
function gallery(json) {
document.write('<span>'+json.feed.title.$t+'</span>');
}
</script>
<script src='http://www.antonio-bloggerever.blogspot.com/feeds/posts/summary/-/Creative?max-results=2&alt=json-in-script&callback=gallery'/>
You don't have jQuery included. Add jQuery and it will work. Write this line in starting of your HTML.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
CodePen
You are essentially trying to bind a click event to an element that's not there yet.
For dynamically added elements to the DOM use on and off.
$('span').on('click', function(){
alert('aaaa');
});

jQuery: Include an External Script After an Event

I want to be able to include an external jQuery script only after a certain jQuery event, for example, after fade in, like this:
<script type="text/javascript">
$(window).load(function() {
$('body').fadeIn(300, function() {
// Include http://www.mydomain.com/js/myscript.js
});
});
</script>
Is something like that possible? Or, if not, perhaps there's a way to activate a script that has already been included, but kept "dormant"?
I would appreciate help from an expert!
jQuery has an AJAX method $.getScript
http://api.jquery.com/jQuery.getScript/
$.getScript('http://www.mydomain.com/js/myscript.js',function(){
/* new script has already run, can call additional code here if needed*/
})

Categories

Resources