[jQuery-append] includes HTML as well as JS
by
, 08-20-2012 at 12:07 AM (40816 Views)
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:
(in the Anylink-case, STRING representsw THIS) and put the script in a HTML-file. Put it just after the body tag.Code:<script> var included_js = STRING, where STRING represents the string you just created. </script>
3.
Add another script (to the HTML-file), after the body tag (and after the preceding script) having this:
Of course, the HTML-file should also haveCode:<script> $("body").append(included_js) </script>
at the topCode:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
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:
but:Code:<script> $("body").append(included_js) </script>
and then lines like:Code:<script> $("body").append('<div style="display: none">'+included_js+'<\/div>') </script>
That's what I'have done in the DEMO page.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>
5.
The string can be 'emptied' by doing:
6.Code:<a href="javascript: void(0)" onclick="$('#jquery_include').empty(); return false">remove string</a>
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.