Develop Reference

jQuery load() can not work with syntaxhighlighter

I use syntaxhighlighter in my page and it works well.
<pre id="code" class="brush:js">
some code here
</pre>
But it doesn't work when I save to a html file then use jquery load function to load them.
$(function(){
$("#code").load("test.html");
});
Everything is displayed well except the code scope. Could some one tell me why? Thx!
I figured it out, the solution is:
$(function(){
$("#code").load("test.html", function(){
SyntaxHighlighter.highlight();
});
});

Change #test into #code:
$(function(){
$("#code").load("test.html");
});

You will probably have to run this code to initialize the syntax highlighter after you have dynamically loaded your code.
SyntaxHighlighter.all()
this could probably be done by the following
$(function(){
$("#code").load("test.html", function() {
SyntaxHighlighter.all();
});
});

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 Initializing

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.

jQuery callback for click() not working

I want to do a simple animation clicking on this link
<a id="C" href="http://www.google.com">Make me disappear</a>
Callback is
$("#C").click(function(event) {
event.preventDefault();
$(this).hide("slow");
});
while on jfiddle my code works, I am not able to make run this callback on a jsp page. I wrote js code in a different file imported with
<script type="text/javascript" src="scripts/lib.js"></script>
I am quite sure jQuery and lib.js are being included because from developer tools console (on Chromium) I can make it do the animation; moreover they are both in developer tools' scripts tabs.
Thanks

Notice that on jfiddle it's including your jQuery click handler in the page's onload function; are you doing that in your lib.js file?
$(function() {
$("#C").click(function(event) {
event.preventDefault();
$(this).hide("slow");
});
});
(Using $(function() {}); is a shorthand for running that code when the DOM is ready - see the jQuery .ready() documentation.)
Or even better:
(function($) {
// do your stuff here
})(jQuery);
to be able to handle possible future conflicts.

Javascript injection after domready event is fired

I'm working in a Joomla environment but I think this is not the source of the problem.
I have a view which renders subviews (containing JavaScript code like <script type="text/javascript></script>) with AJAX. Problem is : the JavaScript code is ignored. I guess that's because it isn't in the document when it is loaded.
Here's the JavaScript code contained in one of the subview :
<script type="text/javascript">
window.addEvent('domready', function() {
$('annuler').addEvent('click', function() {
var a = new Ajax(
'{$url}',
{
method: 'get',
update: $('update')
}
).request();
});
});
</script>
Another basic example, if I load a subview with the following code in it, it won't work either :
<script type="text/javascript">
function test()
{
alert('ok');
}
</script>
<a id="annuler" onclick="test()">Annuler</a>
I'm getting the following error message : "test is not defined"
I can't find a solution to that problem so I'm starting to think that it is not a good way to use JavaScript...and, yes, I'm kind of new to event based JavaScript (with frameworks and so on).

I finally managed to put all the subviews and the JavaScript code into the same page. I'm using the CSS display property to hide/show a subview (<div>) (instead of loading it with Ajax).

Place the code you want to run in a function and call the function from an on ready block
EDIT:
Example:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Found here: http://www.learningjquery.com/2006/09/introducing-document-ready