PHP, Ajax, CSS Site Architecture Question

Hello, and if this is incredibly stupid, please forgive me!

I'm proficient with PHP, and not so much with Javascript and Ajax (BTW, Ajax is great!). I've got Ajax working, and understand the overall concepts. No problem there. The real problem I'm having is this...

- I'm creating a play website for learning.
- I have one main page (all CSS, no tables, etc.)
- One left-hand <div> with menu options, and another right-hand <div> that will contain the contents of the "page" selected in the menu. The basic idea is to create a website that has zero refreshes, via Ajax. Each content page that appears in the right-hand <div> is in it's own PHP page.

So far, this works just fine. The problem(s) I'm running into came about when I created a <form>. The form appears just fine in the content <div>, however, I found that all of my form-specific CSS code in the content PHP file was ignored, dropped, whatever. When I moved this CSS code to the original page (index.php) everything worked as expected.

So, Question #1: Is there a way to nest CSS within the PHP file retrieved by Ajax? BTW, the PHP is some PHP and some HTML, etc., the <?PHP and ?> do not encompass all of the code in the file. Right now, it seems as if ALL of the CSS code must be available when the initial page is loaded. This doesn't seem right.

Within the above mentioned <form> I have a list of countries. The "onchange" event on the <select> object is to trigger a javascript function that will lead to an Ajax call to get a list of States, Provinces, etc. when the Country changes. The javascript function, "foo" is in the PHP file that creates the <form>. The error I'm getting says that "foo" is not found, and the error line listed is in my "index.php" file rather than the file that was loaded via Ajax.

Basically, this is the same problem (I think) with my architecture. I really want the content <div> to be CSS'd, and Javascript'able on it's own, isolated as it were.

Keep in mind, all I want to accomplish is a complete site with no refreshes.

If this is not clear, I apologize. I'm happy to clear up anything that is fuzzy.

Thanks in advance,
B.

How are you adding the code to the page? Using innerHTML?

Eric

Yes, I'm using innerHTML for the return elements/text/results.

I'm not sure if my above ramblings were very clear. If you have ideas, thanks in advance for sharing.

Anyone have any thoughts on organizing a site so that all of the CSS code does not need to be read in at the beginning for a "refreshless" site?

Anyone have any thoughts on organizing a site so that all of the CSS code does not need to be read in at the beginning for a "refreshless" site?

You can try the following:
1. get the updated content from the server via XHR
2. find all css tags like <link rel="stylesheet" type="text/css" href="mycss.css">
3. insert them into HEAD tag of your document if they do not exist
As i recall, that worked for sure in IE and FF. Not 100% sure regarding Opera, Safari, etc

If the simple solution won't work, then you can try loading the CSS files via XSR and create the actual stylesheets objects via DOM API

BTW, with such site you would face the "back button/bookmark" problem, which is a tough nut anyway...

Thanks for the input. I'll research the X** technologies and see how they fit my needs.

Also, I realize that this technique will produce forward/back issues, however, my concept is more of a web-application than a web site, and as such the idea of forward/back goes away (at least I think/hope so).

Thanks again for your input.

How large of a CSS file are you dealing with? Is inline style in the external files an option?

With out seeing the foo function it is hard to tell what the problem may be.
If you could post the HTML / Javascript output by your PHP script maybe we could help.

The CSS file is rather large and I feel that inline code, although necessary at times defeats the purpose of separating style and content.

What I'm looking for is a method to keep the styles separate from the content throughout an entire site. Perhaps an external CSS file for the site as a whole, and then a series of separate CSS files for each of the "pages" that are called in via AJAX.

It seems that browsers parse the CSS file at the beginning, and that makes sense. However, it also seems as if the browsers are not parsing the CSS files that are brought in as a result of an AJAX call.

Since I only have one "real" page read at the beginning, I suppose I could have all of my separate CSS files listed and parsed at the very beginning (not a horrible work-around), but this might make things quite slow at load time.

What I'm really looking for is a means of forcing the browser to parse a CSS file that is downloaded as a result of making an AJAX call.

As I said previously, I'm playing with this idea and looking for ideas to create a refresh-less site, akin to a web application rather than a group of pages.

Does this help?

Thanks again for all of everyone's input.

Would alternative style sheets be something you could use.
Enabling the one you need for the content.

Interesting idea rwedge. If I had an index.php page as a root with one <div> for menu options, and a second <div> for the contents of each of the menu options (where each menu option was an AJAX call to bring in a new page), how would I select and then use "alternative" style sheets if I needed one for each of the possible menu options?

As I said above, it seems that the style sheets are read in during the load of the original file (like index.php). Each ajax call brings in a new "page" into the content <div>, but I haven't been able to get the browser to refresh the style sheet.

Right now, I think I need to have all of my style sheets for the entire site/application when loading the initial page (index.php). The problem then becomes one of managing the namespace of the various elements, styles, etc. Of course these can be maintained by establishing naming rules, but a namespace would be helpful as well.

I'm a bit wordy, but how do you use/implement alternative style sheets?

Thanks again to everyone with their thoughts and ideas.