Dynamic title with Ajax Content

[onigetoc]

1) Script Title:

2) Script URL (http://www.dynamicdrive.com/dynamici...jaxcontent.htm):

3) Describe problem: get dynamic Title in browser.

Hi, I looking for a way to make the browser title change as you load ajax page

i find a interesting script here that change title with a form, i though that is something we can work with and create a onload event or i don't know, i'm not very hot with Ajax.
http://www.toutjavascript.com/main/gorun.php3?s=titre

When i'm looking for it fort a script that will load my main content with the title in the browser but mixed with php. The php give me the title and it would be send to the java to modify the browser title every time i load a page from Ajax Content.

------------------------------------------------
This is a update post for the resulting script....

Hi,

Thank you very much for the help. i want to show you the result, this is a test page only: http://www.tonpodcast.com/indexajaxbegin2.php
for the future website www.tonpodcast.com

Here the complete ajax code if you want to update the Ajax content script.
You will see the loading animation and the title change in the browser.
i have no credit for these modification, only great help from this forum.

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid,title){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid,title)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid,title){
 if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
  document.getElementById(containerid).innerHTML=page_request.responseText;
  document.title = title;
 }

 else {
  document.getElementById(containerid).innerHTML = '<div align=center><img src="images/ajax-loader.gif"><br>Chargement de la page...';
 }
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Cheer

[thetestingsite]

I believe it can be done using document.title, but not sure how in this case. You could probably place this in your php files to get the effect that you are looking for, not sure if it will work but worth a shot.

<script type="text/javascript">

document.title = "Your Title of the PHP Page Here";

</script>

Hope this helps.

[onigetoc]

Hi, i already try this one and it seem to not working.

But i'm not 100% if i did it correctly. if a place this litle script in the index page, do the php called from a page in the main colum will do the work. i don't know.

Should a place the java script inside the page loaded ??

Not sure how to do it right.

Thank you for the reply

I believe it can be done using document.title, but not sure how in this case. You could probably place this in your php files to get the effect that you are looking for, not sure if it will work but worth a shot.

<script type="text/javascript">

document.title = "Your Title of the PHP Page Here";

</script>

Hope this helps.

[thetestingsite]

Well; as I said in my previous post, you would want to place the script in the pages being called by the AJAX content script. So if you were calling external.php, you would place the script I posted in external .php.

Hope this helps.

[onigetoc]

mmmmmm..
It's working for the external.php web page alone but not inside the ajax content site. the title do not appear.

I tried with no php just to test if this can be the problem and it's not that.

i loaded in the external page the litle script a talk in my first post about the form to submit the title in the browser and it's working.
it's should definitly have a way to do that

[tech_support]

Try this:

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid,title){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid,title)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid,title){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
document.title = title
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

and:

<a href="javascript:ajaxpage('test.htm', 'contentarea','My Title');">test</a>
<div id="contentarea"></div>

[onigetoc]

I modified this poste, after thinking more, it will working your way.

But how can i get a title in the Home page at the begining?

Ho, i had a modified version to add Loading gif but i can't make it work with the new .js script

 else {
   document.getElementById(containerid).innerHTML = '<div align=center><img src="images/ajax-loader.gif"><br>Chargement de la page...';
 }
}

Any idea

Thank's

[thetestingsite]

If I understand you correctly, all you should have to do is place the text for the title between the HTML <title> tags.

Hope this helps.

//Added Later: In response to your second question, try this modified script (basically it is the same as what tech_support posted above, but with the addition of the loading image):

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid,title){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid,title)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid,title){
 if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
  document.getElementById(containerid).innerHTML=page_request.responseText;
  document.title = title;
 }

 else {
  document.getElementById(containerid).innerHTML = '<div align=center><img src="images/ajax-loader.gif"><br>Chargement de la page...';
 }
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

Notice the part in red, this is what needs to be editted/added.
Hope this helps.

[onigetoc]

Finally i just have to put the php or smarty there to make it work.

<a href="javascript:ajaxpage('test.htm', 'contentarea','<{$link.title}>');">test</a>
<div id="contentarea"></div>

but in the home page i got undefined in the title, how can we change undefined for Mysite.com ?

And my loading gif before the page doesn't work anymore

 else {
   document.getElementById(containerid).innerHTML = '<div align=center><img src="images/ajax-loader.gif"><br>Chargement de la page...';
 }
}

If someone can help, after that i will post all the code to help other people who want it. (the loading animation with the dynamic title for Ajax Content)

Thank you

[onigetoc]

Hi, i'm not very good add Javascript and Ajax and i can't find out where to place again this line for the loading.gif animation before the result inside this js file

 else {
   document.getElementById(containerid).innerHTML = '<div align=center><img src="images/ajax-loader.gif"><br>Chargement de la page...';
 }
}

How Adding loading gif inside this js code? any idea?

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid,title){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid,title)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid,title){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
document.title = title
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Thank you