jquery selector problem with script tags

Question

I'm attempting to select all <script type="text/html"> tags in a page. I use <script> tags to store HTML templates, similar to how John Resig does it. For some reason, the following jquery selector doesn't seem to be selecting anything:

$("script[type*=html]").each(function() {
    alert("Found script "+this.id);
});

This markup is in the BODY of the HTML document:

<body>
    <script id="filter-search" type="text/html">
        <dt>Search</dt>
        <dd><input type="text"/></dd>
    </script>
</body>

I've also tried putting it into the HEAD of the HTML document, and it is still not found. No alert is ever shown.

If I instead change my code to this:

$("script[type*=javascript]").each(function() {
    alert("Found script "+this.id);
});

Then it finds only the scripts in the HEAD that have a src to an external file. Scripts in the actual page are not found. For instance, with the following in HEAD:

<head>
    <script type="text/javascript" src="jquery.js" id="jquery"></script> 
    <script type="text/javascript" src="jquery-ui.js" id="ui"></script> 
    <script type="text/javascript" id="custom">
        $(document).ready( function() {
            $("script[type*=javascript]").each(function() {
                alert("Found script "+this.id);
            });         
            $("script[type*=html]").each(function() {
                alert("Found TEMPLATE script "+this.id);
            });         
        });
    </script> 
    <script id="filter-test" type="text/html">
        <dt>Test</dt>
    </script>
</head>
<body>
    <script id="filter-search" type="text/html">
        <dt>Search</dt>
        <dd><input type="text"/></dd>
    </script>
</body>

I get the following alerts:

Found script jquery
Found script ui

The custom and filter-test scripts in the HEAD are not selected, nor is the filter-search script in the body tag.

Is this the expected behavior? Why does this not work? I can work around it, but it is annoying that it doesn't work.

EDIT: It turns out this actually does work fine using the example above. In my situation, the jquery code was in an external Javascript module, and it was definitely not working. When I moved the code into a script tag on the page itself it worked. I still haven't figured out why it wouldn't work in the external file, but will report back here if I get around to solving it at some point.

If I run your script with jQuery 1.4.2 on chrome, all desired id's are alerted — jAndy
– jAndy, Commented May 7, 2010 at 9:48
@tauren I've recently had a similar problem. Please could you try an experiment: change text/html to something else (suggest text/template) and see if this then works with your external script... — UpTheCreek
– UpTheCreek, Commented Mar 21, 2012 at 18:17

majackson · Accepted Answer · 2010-05-07 09:53:33Z

2

What browser are you using? This script works fine for me in Chrome, Firefox and IE6, giving me the alerts:

Found script jquery
Found script ui
Found script custom
Found TEMPLATE script filter-test
Found TEMPLATE script filter-search

answered May 7, 2010 at 9:53

majackson

2,9936 gold badges23 silver badges38 bronze badges

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

1 Comment

Tauren Over a year ago

I've got it working too when I put the code right into a jquery ready closure in the HTML itself. I was testing the code running from within an external javascript module that was being imported instead of exactly the script in my question. Still don't understand why it doesn't work when running from an external script module. I'll have to look into that more sometime. But at least it does work from a local script. Thanks for testing it!

jcl · Accepted Answer · 2012-11-26 10:47:23Z

1

The problem you were having with an external script is likely due to load order. To maximize responsiveness, the browser starts loading and executing scripts as they are encountered in the page, before the page is even fully downloaded and parsed. So if you have a script linked in the head element, it will probably not be able to access parts of the DOM specified further down the page, like your custom script tags.

Two possible solutions:

Rearrange the script tags so that the custom tags come before the scripts that use them.
Wrap your scripts with something that waits for the DOM to be loaded (like the jQuery $() shortcut).

answered Nov 26, 2012 at 10:47

jcl

7316 silver badges5 bronze badges

Collectives™ on Stack Overflow

jquery selector problem with script tags

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related