CSS, JQuery, PHP and Caching: Best practices?

You should check out the http://groups.google.com/group/jquery-en. The list is very active, and there was recently a http://groups.google.com/group/jquery-en/browse_thread/thread/3d5f3ebd49158822/b256cef9f7dc6f4c thread.

I doubt that it is a best practice, but I've had a similar problem with IE hanging onto old information a little too tightly and uncritically. I solved it by tossing in some unique garbage in a harmless or unexamined place, like a text string representing the current second in the unix epoch. Naturally, I assigned blame to IE in a comment nearby.

I don't know that there's a single "best practice" that answers when to use PHP vs. Javascript. I tackle this issue at work all the time—I'm the frontend (Javascript[jQuery]/CSS/HTML) guy, and I work closely with the backend (PHP/MySQL/server) guy on rich web apps. So we answer the "Who handles X?" question several times a day, and always on a case-by-case basis (though it's rare that we need to give it more than a moment's thought). Here are some of our guiding principles: 1.a. Any page should work well with JS and CSS off (a.k.a. the 10-second accessibility test). So the HTML source (i.e. the output of the PHP script) should contain as much meaningful stuff as possible. This basically means that some things always need to be handled by PHP, period, even if Javascript would be easier or feel "smarter." 1.b. The flipside to the previous rule is that the HTML (as delivered by the server/PHP) should contain as little non-meaningful content as possible. Obviously any realistic webpage will have a bunch of semantically meaningless tags for the sake of design. But if a given element is specific to JS functionality, it probably ought to be created with JS (for purposes of web standards, but also just so you can easily tweak that element or its role if/when you change the way your JS works). 2.a. Some things that PHP probably ought to handle according to rule 1—I'm thinking in particular of sorting database records on the fly—create non-negligible overhead for the server. It's often not enough to really matter, but for a key page on a popular site you don't want to be doing big sorts or complicated queries again and again. So these are places we outsource that overhead to the client by building the functionality in JS instead. 2.b. And the flipside: Sometimes the JS is what creates the overhead—I'm thinking here of complicated conditional DOM transformations and/or things that affect the page in a visually significant way—and your users end up seeing flashes of ugly while they wait for the JS to do its thing on page load. So sometimes in those places where we handle the HTML structure in the PHP even though it's Javascript specific. All that said, the short answer—and I realize I'm skipping the part of your question about the IE cache (because who ever knows with IE?), but this will solve that problem—is that I would probably handle adding those mouseover divs with jQuery (rule 1.b. applies, rule 2.b. doesn't). Something like:for(i=1;i<=monthDays;i++) $('#graph'+graphNumber+'_container').append('<a class="daylink" id="'+monthName+i+'"></a>');

Neither IE nor any other browser I'm aware of caches pages in the piecemeal way you're describing (caching just the contents of the HEAD element). Browsers will cache external resource files (CSS, JavaScript, etc.) in many cases, but as for the contents of the actual HTML page, it's either cached as a whole or not. That's exactly what I thought until I tested the page in IE. Perhaps something else is going on, but the scenario was: Load the page, get 18 hover links because it was the 18th day of this month, so the PHP loop ran 18 times. Each of those 18 links were positioned with CSS, also created with a PHP loop and inserted in the HEAD tag. View source on the generated page to see what I mean, except today you'll see 20 CSS declarations. Then, I loaded a page with 31 days and when I viewed source I still only saw 18 CSS declarations in IE. Loading the exact same page after closing and opening IE and clearing cache, and I get the proper 31 CSS declarations.

So this is really what happened?1. You loaded the 18-day page. Viewing source showed 18 CSS declarations in the HEAD, and 18 links in the BODY. 2. You navigated to the 30-day page. Viewing source showed the 18 CSS declarations from step (1) in the HEAD, but 30 new links in the BODY. 3. You closed the browser, re-opened it, and cleared your cache. 4. You navigated to the same 30-day page as in step (2). Viewing source showed 30 CSS declarations in the HEAD and 30 links in the BODY.If this is true, I have to say it's pretty astonishing. You're sure your $_SESSION variables are correct throughout all this? Something in the PHP being crossed-up between the part that generates the CSS and the part that generates the graphs is the only explanation I can think of that's at all consistent with this behavior, in my experience. Perhaps the session variables are getting set inconsistently in the navigation between steps (1) and (2), but step (3) resets things back to a good state. Just a shot in the dark...

letourneau; that's the exact scenario. I'll re-examine the SESSION variables since obviously something is going wrong. Thanks!