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! :)

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. — David
– David, Commented Nov 28, 2010 at 15:09

SLaks · Accepted Answer · 2010-11-28 22:08:51Z

2

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();)

answered Nov 28, 2010 at 22:08

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

iamchriswick Over a year ago

Ok, so the correct code would then be $ (Shadowbox.clearCache(); Shadowbox.setup();).appendTo('#photo-gallery'); ?

SLaks Over a year ago

@Prodac: No, it wouldn't. Do you know what the two lines are?

iamchriswick Over a year ago

@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 Over a year ago

As I said in the answer, you should replace your bad line. jsfiddle.net/SLaks/aQyJM

SLaks Over a year ago

@Prodac: appendTo is used to add HTML elements to other HTML elements. You're calling Javascript methods, which are not connected to HTML elements.

|

Mike Samuel · Accepted Answer · 2010-11-28 15:14:38Z

2

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

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

to

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

answered Nov 28, 2010 at 15:14

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

3 Comments

iamchriswick Over a year ago

@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 Over a year ago

@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 Over a year ago

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 :)

Collectives™ on Stack Overflow

Embedding Javascript in html document

2 Answers 2

14 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related