View RSS Feed

molendijk

[jQuery-append] includes HTML as well as JS

Rate this Entry
1.
Create a string that is the JS-equivant of the DD Anylink standalone menu (or of any standalone menu) with the help of a good HTML-to-JS-converter. Make sure that all JS and CSS are made inline before conversion. Name the string included_js.
2.
Create a script like this:
Code:
<script>
var included_js = STRING, where STRING represents the string you just created.
</script>
(in the Anylink-case, STRING representsw THIS) and put the script in a HTML-file. Put it just after the body tag.

3.
Add another script (to the HTML-file), after the body tag (and after the preceding script) having this:
Code:
<script>
$("body").append(included_js)
</script>
Of course, the HTML-file should also have
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
at the top
4.
Open the file. You'll notice that the HTML-file shows a well functioning menu (Anylink, in our case). This shows that jQuery-append does not only bring in HTML, but also JS (and CSS).
5.
If you don't want the menu to show on page load, but on click, we should not have:
Code:
<script>
$("body").append(included_js)
</script>
but:
Code:
<script>
$("body").append('<div style="display: none">'+included_js+'<\/div>')
</script>
and then lines like:
Code:
<a href="javascript: void(0)" onclick="$('#jquery_include').empty(); $('#jquery_include').append(included_js); return false">append string</a>
<div id="jquery_include" style="position: relative; width:500px;"></div>
That's what I'have done in the DEMO page.
5.
The string can be 'emptied' by doing:
Code:
<a href="javascript: void(0)" onclick="$('#jquery_include').empty(); return false">remove string</a>
6.
What this show is that jQuery-append can be forced to act like some sort of asynchronous document.write. Of course, finding an elegant way of creating STRING (other than using a HTML-to_JS-converter and without spoiling things) is another matter.
===
Arie.

Submit "[jQuery-append] includes HTML as well as JS" to del.icio.us Submit "[jQuery-append] includes HTML as well as JS" to StumbleUpon Submit "[jQuery-append] includes HTML as well as JS" to Google Submit "[jQuery-append] includes HTML as well as JS" to Digg

Updated 08-20-2012 at 12:26 AM by molendijk (Correction)

Tags: None Add / Edit Tags
Categories
Post a JavaScript

Comments