Question

I’m trying to implement a “as-simple-as-possible” solution for loading pages in the background. I pretty much just want to replace certain elements within my html, with ones coming from the ajax stub. I’ve of course run into the standard problems of:

1. JavaScript Dependencies
2. Styling Dependencies
3. Setting Title

My AJAX stub is fairly simple — actually, it’s the entire page, put into tags not named head or body (jQuery/browser doesn’t like parsing these nodes). For instance:

<html-stub>
    <head-stub>
        <title>Page Title</title>
        <script type="text/javascript" src="somescript"></script>
        <link rel="stylesheet" type="text/css" href="somestylesheet">
    </head-stub>
    <article>Some Content to replace in the origin document</article>
</html-stub>

Is it safe/practical/completely stupid to do something like:

var stub = $(ajaxHTML);
var head = $(document).find('head');

// empty the current head -- later on we'll just empty things like title
head.empty();

// add all the crap
stub.find('stub-head').children().appendTo(head);

Or this is just a really bad idea? I’ve tested in modern browsers and it seems to work ok, are there also pitfalls in older browsers?

Answer 1

I don’t see a problem with what you’re doing. You could potentially do it simpler with JS or jquery templating. Also assuming you’ve taken into account SEO and accessibility with this approach.