0

I have an html file that looks basically like...

<style>
    some css
</style>

<h1>...</h1>
<p>...</p>
<form>
    ...
</form>

<script>
    some javascript
</script>

I can successfully load this into a div using...

$('#signup').load('path/to/html');

The content is loaded, the javascript executes, but the css doesn't load in the HEAD section and is therefore invalid markup.

I know I can load a separate css file using something like...

$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
    "rel": "stylesheet",
    "type": "text/css",
    "href": "url/to.css"
});

...shown at https://stackoverflow.com/a/1948571/1024808 . But I can't figure out how to load the css AND the HTML using only one page call. I had an idea of using the .load() methods option to "specify a portion of the remote document to be inserted". http://api.jquery.com/load/ . But that then discards the rest of the document and would require a second page load, AFAIK.

Thanks

Community
  • 1
  • 1
Isius
  • 6,712
  • 2
  • 22
  • 31
  • 3
    Dynamically loaded html should have relevant css applied automatically. I think your problem lies elsewhere – Adam Rackis Dec 23 '11 at 01:41
  • Could potentially be a selectivity problem as well. – Kenaniah Dec 23 '11 at 01:43
  • @AdamRackis is right. Your CSS isn't correct, your HTML is malformed, or some other issue. – djlumley Dec 23 '11 at 01:45
  • From everything I read it does but is "non compliant". Last thing I need is a browser breaking it later. According to the spec – Isius Dec 23 '11 at 01:45

1 Answers1

0

use live :Attach an event handler for all elements which match the current selector, now and in the future.

Dot Freelancer
  • 4,083
  • 3
  • 28
  • 50