I’m trying to get ajax navigation working so here’s what I tried:
$('nav a').on('click', function() {
$.ajax({
url: this.href,
success: function(data) {
$('#content').html( $(data).find('#content').html() );
}
});
});
The problem is since everything is relatively linked none of my links or imgs work. To make it even worse it tries to load all the imgs even the ones I’m not using (automatic img preloading) and the relative path to my logo is incorrect for some pages.
If I change all the src and href occurences then run it through regex to to find and replace all bad paths then change the attrs back to src and href will it work?
Here’s what I mean.
$('nav a').on('click', function() {
var href = this.href
$.ajax({
url: this.href,
success: function(data) {
var html = data.replace(/href/g, 'hrefhref')
.replace(/src/g, 'srcsrc');
$('#content').html(
$(html).find('#content').html().replace(/hrefhref/g, 'href')
.replace(/srcsrc/g, 'src')
.replace(/href=\.\/'/g, "href='" + href)
.replace(/href=\.\/"/g, 'href="' + href)
.replace(/src=\.\/'/g, "src='" + href)
.replace(/src=\.\/"/g, 'src="' + href)
);
}
});
});
My question is: Is there any way to make it work if paths dont start with a dot?
Of course it shouldn’t change anything if the href or src attr is on another domain or already absolutely pathed
Also will this always work across all browsers, will having an attr hrefhref and srcsrc ever get stripped out when being parsed.
Use the
BASEelement in the set up. That way, you can develop locally and you can put it on the server. The only thing you’d have to change is your href in theBASEelement.http://www.w3.org/TR/html401/struct/links.html#h-12.4
Or see the “dreaded and woeful” W3Schools explanation too: http://www.w3schools.com/TAGS/tag_base.asp