Embedding Javascript in html document

Question

I'm trying to implement the following code in a html document:

 $(function () {
 $.ajax({
 type: "GET",
 url: "/projects/img/Bathurst/PhotoGallery.xml", // location of your gallery's xml file
 dataType: "xml",
 success: function(xml) {
 $(xml).find('img').each(function() {
 var location = '/projects/img/Bathurst/'; // relative path to the directory that holds your images
 var url = $(this).attr('src');
 var alt = $(this).attr('alt');
 $('<li></li>').html('<a href="'+location+''+url+'" rel="shadowbox[gallery]"><img class="thumb" src="'+location+''+url+'" alt="'+alt+'" title="'+alt+'" /></a>').appendTo('#gallery-ul');
 });
 $('<script type="text/javascript"></script>').html('Shadowbox.clearCache(); Shadowbox.setup();').appendTo('#photo-gallery');
 }
 });
});

The code works perfectly when I use it in an external .js file, but I cant get it working when i implement it, it just renders with error in the code.

II'm I missing something and dos anyone have a suggestion to this? The reason why I need to implement it, in case some one wonderes, is that I'm building a custom webapp and the line "/projects/img/Bathurst/PhotoGallery.xml" and "/projects/img/Bathurst/" is dynamic variables.

All answers are very much appreciated! :)

• David: Please define "it just renders" and "error in the code." How, exactly, is it failing? Also, how are you embedding it in the document? Please provide just enough encapsulating HTML to reproduce the problem.
• SLaks: You should learn the basics of Javascript.

Answer 1

The problematic line ($('<script type="text/javascript">...) is a convluted and unnecessarily complicated way to run two lines of Javascript.

You should replace it with simple method calls. (Shadowbox.clearCache(); Shadowbox.setup();)

• iamchriswick: Ok, so the correct code would then be $ (Shadowbox.clearCache(); Shadowbox.setup();).appendTo('#photo-gallery'); ?
• SLaks: @Prodac: No, it wouldn't. Do you know what the two lines are?
• iamchriswick: @SLaks: No I don't, thats why I posted the question in the first place. I'm pretty novice when it comes to js...
• SLaks: As I said in the answer, you should replace your bad line. jsfiddle.net/SLaks/aQyJM
• SLaks: @Prodac: appendTo is used to add HTML elements to other HTML elements. You're calling Javascript methods, which are not connected to HTML elements.

Answer 2

You can't have a </script> inside a script. Change

$('<script type="text/javascript"></script>')

to

$('<script type="text/javascript"><\/script>')

• iamchriswick: @SLaks: When you say "get rid of it", do you then mean remove '<script type="text/javascript"></script>' from $('<script type="text/javascript"></script>').html('Shadowbox.clearCache(); Shadowbox.setup();').appendTo('#photo-gallery');???
• Mike Samuel: @Prodac, I think @SLaks means use $('<script type="text/javascript" />') without the close tag. api.jquery.com/jQuery says "Alternatively, jQuery allows XML-like tag syntax (with or without a space before the slash): $('<a/>');
• iamchriswick: What SLaks meant was for me to replace $('<script type="text/javascript"></script>').html('Shadowbox.clearCache(); Shadowbox.setup();').appendTo('#photo-gallery'); with hadowbox.clearCache(); Shadowbox.setup();. That works perfectly :)