0

I'm working on a project where the client wants to have existing pages dynamically loaded into a single page. That's no problem, but the styling is not working as it should when the pages are loaded as standalone files on the existing site. Is there a way to extract the CSS link from each page and have it dynamically applied to the viewer page?

Here's a copy of the function I wrote out to call the external pages into the viewer page:

$(function () {
    $('a.dock-item2').click(function () { // click on an anchor with the dock-item2 class
        $("#page").remove();             // remove what's in the viewer already
        var href = $(this).attr('href'); // grab the external file path and name
        $('<div id="page" />').load(href, function () { // create a new div and load 
            // the page content
            $(this).hide()               // just stuff to make a nice transition...
                .appendTo('#viewer')
                .fadeIn(1000);
        });
        return false;
    })
});

I'd like to apply it strictly to the div in question... but maybe that isn't the best thing to do. Should I consider loading this stuff into an iframe instead? Maybe it's just Friday and I can't think rationally anymore.

ankitkanojia
  • 3,072
  • 4
  • 22
  • 35

2 Answers2

0

Getting non-body tags (tags that do not exist within the body) from remote pages is difficult/impossible with jQuery's ajax features. That being said, if this is the case you can setup a PHP script locally to act as the middle man. It can read the contents of the page, find the css file, and then return that or even return the contents of the css file itself - you then could dynamically place it on your page. This shouldn't be too difficult, especially if you use something like phpQuery to grab the <script> tag, or even PHPSimpleHTMLDOMParser, which is similar to phpQuery.

All hypothetical, but it just might work ;) Of course if you just wanted to load iframes, you could. This would keep all links operable within the iframe.

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • I was thinking that PHP might be the better solution here but I was just trying to see if there was a js workaround. Meh, no big deal... gives me something to work on this weekend when I get bored! Thanks for the help!! –  Jun 26 '09 at 18:11
  • Check this previous answer too: http://stackoverflow.com/questions/1050333/jquery-ajax-parse-response-text/1050344#1050344 – Sampson Jun 26 '09 at 18:29
  • thanks for the link. I guess it really does help to RTFM and not ask silly questions. ;) –  Jun 26 '09 at 19:47
  • Manuals are often times large :) It helps having a couple friends who've been around the block a time or two who can save you the trouble of having to digg through the manuals. – Sampson Jun 27 '09 at 00:23
  • Good Point. I downloaded the code for the DOM Parser that you recommended. I'll give it a shot. Thanks again for your help! –  Jun 30 '09 at 13:21
0

Not using JavaScript. Maybe in php using fopen fwrite functions, but I certainly think that comes with a lot of overhead.

Elzo Valugi
  • 27,240
  • 15
  • 95
  • 114