Home/ Questions/Q 109761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T02:07:13+00:00

I have the following file file: <html> <head> <title></title> <script type=text/javascript src=/Prototype.js></script> <script type=text/javascript>

  • 0

I have the following file file:

<html> <head> <title></title>  <script type='text/javascript' src='/Prototype.js'></script> <script type='text/javascript'> function load_content() {   new Ajax.PeriodicalUpdater('content', '/UpdatedContent/,   {     method: 'post',     frequency: 5   });    //var fileref = document.createElement('link');   //fileref.setAttribute('rel', 'stylesheet');   //fileref.setAttribute('type', 'text/css');   //fileref.setAttribute('href', filename); } </script>  </head>  <body>  <div id='content'></div>  <script type='text/javascript'>     load_content(); </script>  </body> </html>

Content from UpdatedContent is supposed to be loaded into the ‘content’ div every 5 seconds. What’s weird is that the HTML is loaded but the section at the top of the loaded page is completely stripped out when it gets inserted into ‘content’

The loaded page is essentially this:

<style type='text/css'>   ... lots of css here ... </style>  ... lots of HTML here ...

There are no , ,

Can CSS not be injected directly into a div?? Is there some reason either the Prototype framework or the browser’s DOM is stripping out the CSS?

How can I include the CSS without making a separate call??

As you can see from the given main file, the page would be completely blank without anything loaded in the ‘content’ div. This is intentional. I am basically wanting to use this as a structure on which to dynamically load updating content on an interval, so that the page doesn’t have to completely reload to do a refresh of the data.

And no, I can’t just hard code the CSS into the above file as the CSS will be changing too.

Edit: Regarding yaauie’s response… now I know why it’s happening, since I’m passing style and content in one single piece. If I separate the CSS into a separate file that can be loaded, how would I then load this via AJAX (preferrably using Prototype) and then, more importantly, set that CSS as the style sheet for the page content?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. The <style> tag is only allowed in the <head> of HTML and XHTML, not the <body> or any of its descendants. Web browsers tend to be fairly forgiving of this in the initial parsing of a document, but when changing innerHTML I would expect that the browser would ignore any <style> elements because that type of element is not expected there.

    As a workaround, would it be possible to use inline-CSS in your response, that is use the style='' attribute of the HTML elements you’re passing?

    EDIT: To add the CSS to the <head> would require one of two things:

    • Two round trips to your server:
    • A response that includes both and can be parsed before being inserted

    In this case, I would recommend encoding your two parts into a JSON object before sending. Your callback on the AJAX action should split these and attach them to their appropriate locations (style first to avoid screen jitter)

    {'style':'\ndiv#ajax7373 a {\n  color:#fff;\n  text-decoration:underline;\n  font-weight:bold;\n  \n}\ndiv#ajax7373 {\n  background-color:#ff1cae;\n  color:#ff6ccf;\n}','object':'\n<div id=\'#ajax7373\'>\n\tThere is the contents of your div and a <a href=\'#\'>link<\/a>\n<\/div>\n'}

    That said, I find it hard to believe that the app favors style/content sepration so strongly and is employing a method where the style must generated by the content. Why not style the whole domain, including the expected return of your AJAX requests? Are the AJAX requested items really going to have enough variance in structure/style to warrant this?

    • 0