AJAX change page content

Question

I have used AJAX to successfully change the content of a web page. I can include another web page from my domain but the problem I have is making the hyperlinks to work. If the hyperlinks use relative addressing then that will not work relative to the page I am including it in so I was investigating php to parse the html tag as I read it in

I am using the following RegExp /href[\s]?=[\s\"\']+(.*?)[\"\']/im to find the href data but would like a pointer on how I can prefix a relative address.

I would like to replace a link href="./test1/page1.html"
on page http: // foo.bar.com/folder1/info1/data.html with href="http: // foo.bar.com/folder1/info1/./test1/page1.html"
then if I include the the page content of /folder1/info1/data.html in http://foo.bar.com/folder2/faraway/another.html the links on the embedded page will function correctly I was looking at using the php preg_replace function to do that but have very quickly come unstuck. If I am barking up the wrong tree and there is a more appropriate tool or approach can someone please point me in the right direction ;-). Maybe it can all be down in Javascript?

Answer 1

Why don´t you just use absolute paths?

Answer 2

If you're planning to do much more javascript on the page, you could use JQuery.

function make_absolute(base_path){
    $("#embedded a").each(function(){
        this.attr("href",
                  base_path + this.attr("href")
                  );
    });
}

Replace "#embedded" with the id of your embedded page.

This is nearly certainly overkill if you're not going to use javascript for anything else, but if you're planning to make a shiny dynamic ajaxy page, you might look into it.

Bonus: Doing ajax page loading with JQuery:

$("#embedded").load(page_you_want_to_load)

Answer 3

Taking ABentSpoon's response a step further, your jQuery selector can search for all anchor tags that start with a slash.

$('#embedded a[@href^=/]').each(function() {
    $(this).attr('href', baseUrl + $(this).attr('href'));
});

For more help with jQuery selectors, go here.

Answer 4

You guys have certainly helped me out here, many thanks. I think the regular expression I need would be /href[\s]?=[\s\"\']\./is as ABentSpoon pointed out "If it starts with a slash, that's absolute enough for most purposes". However I guess it would be a good excersise to enable reading pages from other sites. Luckily any of the pages I may wish to do this with are on a same site, and on same server.

To pick up on Jeroen comment of just using absolute paths, that is not really an option as there are many pages on this site. Also each page would get addressed differently (DNS) depending on where it'll be accessed from... internally or externally. If you give your links an absolute path you tie ALL of them to having that site DNS name. A problem when you find this changing all too regularly, or for that matter depatments feel the need to change thir subdirectory names, but that's another story. I wish to design this feature to be a little more flexible.

I will certainly read up about jQuery. Looks interesing, it's not something I've played with yet... more learning coming up ;-)

Thanks again for taking the time guys.