Menu
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:
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.
517
What browser are you using? This script works fine for me in Chrome, Firefox and IE6, giving me the alerts:
154
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:
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
