I've got a page and I need to rewrite the page with another template using jQuery. I must stay on the same page so loading with another template using "/TemplateName" or "?alttemplate=TemplateName" in the url is not an option. I can't go to a different url because I use jQuery Address. I load different pages dynamically with url's that are after the #. So in fact I'm always on the same page, but the content is changed by loading a different template. So my question is how can I rewrite a complete page using jQuery? After the page is rewritten the rewrite code still needs to be availble so it can rewrite to the next template again. Any suggestions?
You can load content from an other page by using jQuery load. Using load is probably not a very efficient way of doing this but it all depends a little on what exactly you are trying to do.
I've looked at jQuery load, but you can only load you html into another div. I somehow need to replace all the html of the page with the new html instead of inserting it in a div. The html from the other template already has the head and body tag.
I guess just changing the body of the html page is enough? If it is you can just do $('body').load('foo/bar.aspx'). If you need to adjust the new template before loading it you should be able to make an ajax call to the page. This should return the markup if I am correct.
Thanks for the info. I decided not to rewrite the complete html, but load the <head> and <body> tag with the html from the other page. Here is my code:
<script type="text/javascript">
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);
function handleChange(event) {
//Get the url and remove the ! at the beginning.
var url = SWFAddress.getPath().substr(1);
if (url != '' && url != '/') {
loadPage(url);
}
}
function loadPage(url) {
//This post get's the url of the page we need to download.
$.post(SWFAddress.getBaseURL() + '/base/Digibiz/GetHtmlUrl/', { url: encodeURIComponent(url) }, function (htmlUrl) {
//Download the page to get the html.
$.get(htmlUrl, function (html) {
//TODO remove previous added head content.
//Get the head element from the downloaded html and add it to this head.
var headHtml = /<head.*?>([\s\S]*)<\/head>/.exec(html)[1];
$("head").append(headHtml);
//Get all the content of the load div from the downloaded html (= all content) and place it in our load div.
//I first tried to place the body from the downloaded html in the body of this page, but it gave some error with SWFAddress.
var load = /<div id="load".*?>([\s\S]*)<\/div>/.exec(html)[1];
$("#load").html(load);
//Get the title from the downloaded html and set it.
var title = /<title.*?>([\s\S]*)<\/title>/.exec(headHtml)[1];
SWFAddress.setTitle(title);
});
});
}
</script>
As you can see in the code there's a TODO which says I need to remove the elements I previously added to the head. Does anybody have an idea how I can do that? I download the head of a page which has a title and meta data. If I download another page I need to remove the first title and meta data before appending the new title and meta data. Any idea how I can do that? Sometimes it's not just the title and meta data, but also a stylesheet so it's flexible.
$('meta').remove() won't work because it will only delete all the meta tags, but the downloaded head can also contain style and script tags. It's variable per template/page I try to download. So somehow I need to remember all the tags I added from the previous downloaded template/page and remove those before I insert the head tag of another downloaded template/page. I can't just clear the complete head like I do with the body, because it would also delete the javascript used to download another head and body tag. You understand :).
Use jQuery to load a page with another template
Hello,
I've got a page and I need to rewrite the page with another template using jQuery. I must stay on the same page so loading with another template using "/TemplateName" or "?alttemplate=TemplateName" in the url is not an option. I can't go to a different url because I use jQuery Address. I load different pages dynamically with url's that are after the #. So in fact I'm always on the same page, but the content is changed by loading a different template. So my question is how can I rewrite a complete page using jQuery? After the page is rewritten the rewrite code still needs to be availble so it can rewrite to the next template again. Any suggestions?
For the people who think this is not SEO frienly I use the AJAX crawlable technique from Google: http://code.google.com/web/ajaxcrawling/docs/getting-started.html.
Jeroen
You can load content from an other page by using jQuery load. Using load is probably not a very efficient way of doing this but it all depends a little on what exactly you are trying to do.
I've looked at jQuery load, but you can only load you html into another div. I somehow need to replace all the html of the page with the new html instead of inserting it in a div. The html from the other template already has the head and body tag.
Jeroen
You might want to take a look at this:
http://stackoverflow.com/questions/4297877/what-other-options-for-replacing-entire-html-document-via-w3c-dom
I guess just changing the body of the html page is enough? If it is you can just do $('body').load('foo/bar.aspx'). If you need to adjust the new template before loading it you should be able to make an ajax call to the page. This should return the markup if I am correct.
Thanks for the info. I decided not to rewrite the complete html, but load the <head> and <body> tag with the html from the other page. Here is my code:
<script type="text/javascript"> SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange); function handleChange(event) { //Get the url and remove the ! at the beginning. var url = SWFAddress.getPath().substr(1); if (url != '' && url != '/') { loadPage(url); } } function loadPage(url) { //This post get's the url of the page we need to download. $.post(SWFAddress.getBaseURL() + '/base/Digibiz/GetHtmlUrl/', { url: encodeURIComponent(url) }, function (htmlUrl) { //Download the page to get the html. $.get(htmlUrl, function (html) { //TODO remove previous added head content. //Get the head element from the downloaded html and add it to this head. var headHtml = /<head.*?>([\s\S]*)<\/head>/.exec(html)[1]; $("head").append(headHtml); //Get all the content of the load div from the downloaded html (= all content) and place it in our load div. //I first tried to place the body from the downloaded html in the body of this page, but it gave some error with SWFAddress. var load = /<div id="load".*?>([\s\S]*)<\/div>/.exec(html)[1]; $("#load").html(load); //Get the title from the downloaded html and set it. var title = /<title.*?>([\s\S]*)<\/title>/.exec(headHtml)[1]; SWFAddress.setTitle(title); }); }); } </script>Jeroen
As you can see in the code there's a TODO which says I need to remove the elements I previously added to the head. Does anybody have an idea how I can do that? I download the head of a page which has a title and meta data. If I download another page I need to remove the first title and meta data before appending the new title and meta data. Any idea how I can do that? Sometimes it's not just the title and meta data, but also a stylesheet so it's flexible.
Jeroen
I might not understand your task, but a simple $('meta').remove() will remove all <meta> from the doc.
Here's a nice tool to experiment with: js + jQuery http://jsbin.com (besides Firebug)
Cheers
Hi Jonas,
Thanks for the tool seems very useful :).
$('meta').remove() won't work because it will only delete all the meta tags, but the downloaded head can also contain style and script tags. It's variable per template/page I try to download. So somehow I need to remember all the tags I added from the previous downloaded template/page and remove those before I insert the head tag of another downloaded template/page. I can't just clear the complete head like I do with the body, because it would also delete the javascript used to download another head and body tag. You understand :).
Jeroen
Hi Jeroen,
ah, yes, I kinda figured it was something I missed :) .
Can you add a class on your existing tags? In that case you could do a filtered remove with the :not selector:
http://jsbin.com/ocudi3/11/edit
Hi Jonas,
That sounds like a great idea! I'll give it a try and let you know if it works :). Thanks.
Jeroen
Hi Jonas,
I've just tested your sample at it works perfect :). Thanks!
Jeroen
Cool, jQuery rocks,
Cheers
Jonas
try http://hashbang.envoyat.com/ it uses umbraco and documents how to do exactly this.
is working on a reply...