• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 236
  • Last Modified:

call text - ajax

I have a system, that show information in <div> when the mouse over each button. The information come from txt files, that I create for each button.
I did a test of the system, but the response is very slow.  I call the txt files in this line:
onmouseover="getData('websites.txt', 'targetDiv')"
'websites.txt' contains this text 'veja a nossa gama de websites'.
If I want to call the text ''veja a nossa gama de websites'' directly in this line: onmouseover="getData('websites.txt', 'targetDiv')". How I do?
Like: onmouseover="getData('veja a nossa gama de websites', 'targetDiv')"
HTML CODE
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv')"/></a></div>
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv')"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv')"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv')"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv')"/></a></div>
</div><!--cx_botoes_sup-->
 
AJAX CODE
<script language = "javascript">
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID); 
          XMLHttpRequestObject.open("GET", dataSource); 
 
          XMLHttpRequestObject.onreadystatechange = function() 
          { 
            if (XMLHttpRequestObject.readyState == 4 && 
              XMLHttpRequestObject.status == 200) { 
                obj.innerHTML = XMLHttpRequestObject.responseText; 
            } 
          } 
 
          XMLHttpRequestObject.send(null); 
        }
      }
</script>

Open in new window

0
Pedro Chagas
Asked:
Pedro Chagas
  • 6
  • 3
1 Solution
 
quincydudeCommented:
If the text is not really long and need to be stored in a file at server side, you do not need to use AJAX at all.

May be something like below is efficient



<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
        <div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('veja a nossa gama de websites', 'targetDiv')"/></a></div>
 
 
//javascript function
 
function getData(dataTxt, divID)
{
  var obj = document.getElementById(divID);
  obj.innerHTML = dataTxt;
}
 
 
 
</div>

Open in new window

0
 
hieloCommented:
try "caching" your messages at load time - ex:

<script>
var websitesData={};
window.onload=function(){
  getData('websites.txt');
  getData('logotipos.txt');
//...
};
 
 
//then in getData, you need to save the ajax response in websitesData:
var websitesData[ key ] = httpobj. responseText;
 
so the only other thing you would need to do at the BEGINNING of getData is:
function dataSource(dataSource,divID){
  var key = dataSource.replace('.txt','');//remove the file extension
  if(typeof(websitesData[key]) != undefined )
  {
   document.getElementById(divID).innerHTML = websitesData[key];
  return;
  }
 /*here you need to continue what you already had in place, which is to make the ajax request and upon completion update websitesData NOT your target div. Why, because you "cached" your data upon page load so you do not need to fetch content again. Now when you mouseover, the data should be in websitesData. */
}
</script>

Open in new window

0
 
hieloCommented:

<script language = "javascript">
var websitesData={};
window.onload=function(){
  getData('websites.txt');
  getData('logotipos.txt');
  getData('hosting.txt');
  getData('marketing.txt');
  getData('ferramentas.txt');
  getData('consulting.txt');
};
 
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
  		var key = dataSource.replace('.txt','');//remove the file extension
  		if(typeof(websitesData[key]) != "undefined" )
  		{
   			document.getElementById(divID).innerHTML = websitesData[key];
  		return;
  		}
 
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
 
		//make sure that you have a valid obj reference
		if(!obj)
			alert("Specified divID may not exist. Check again");
		else
		{
			if(typeof(obj.onmouseout)=="undefined")
			{
				var temp=obj.innerHTML;
				obj.onmouseout=function(){obj.innerHTML=temp;};
			}
          	XMLHttpRequestObject.open("GET", dataSource, true); 
 
          	XMLHttpRequestObject.onreadystatechange = function() 
          	{ 
          	  if (XMLHttpRequestObject.readyState == 4 && 
          	    XMLHttpRequestObject.status == 200) { 
          	      websites[ key ] = XMLHttpRequestObject.responseText; 
          	  } 
          	} 
 		
          	XMLHttpRequestObject.send(null); 
		}
        }
      }
</script>
 
HTML CODE
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv')"/></a></div>
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv')"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv')"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv')"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv')"/></a></div>
</div><!--cx_botoes_sup-->

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Pedro ChagasWebmasterAuthor Commented:
I try the example of hielo, but some error ocurred like you can see in the attached image.
error.jpg
0
 
hieloCommented:
try:
<script language = "javascript">
var websitesData={};
window.onload=function(){
  getData('websites.txt');
  getData('logotipos.txt');
  getData('hosting.txt');
  getData('marketing.txt');
  getData('ferramentas.txt');
  getData('consulting.txt');
};
 
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
  		var key = dataSource.replace('.txt','');//remove the file extension
  		if(typeof(websitesData[key]) != "undefined" )
  		{	
			var obj=document.getElementById(divID);
			if( !obj)
			{
				alert("Specified divID may not exist. Check again");
				return;
			}
			else if(typeof(obj.onmouseout)=="undefined")
			{
				var temp=obj.innerHTML;
				obj.onmouseout=function(){obj.innerHTML=temp;};
			}
   			obj.innerHTML = websitesData[key];
  		return;
  		}
 
        if(XMLHttpRequestObject) 
	   {
          	XMLHttpRequestObject.open("GET", dataSource, true); 
 
          	XMLHttpRequestObject.onreadystatechange = function() 
          	{ 
          	  if (XMLHttpRequestObject.readyState == 4 && 
          	    XMLHttpRequestObject.status == 200) { 
          	      websites[ key ] = XMLHttpRequestObject.responseText; 
          	  } 
          	} 
          	XMLHttpRequestObject.send(null); 
        }
      }
</script>
 
HTML CODE
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv')"/></a></div>
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv')"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv')"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv')"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv')"/></a></div>
</div><!--cx_botoes_sup-->

Open in new window

0
 
Pedro ChagasWebmasterAuthor Commented:
Disappeared the previous error, now giving another error at the top of the page as seen in the picture.
error2.jpg
0
 
hieloCommented:
>>now giving another error at the top of the page as seen in the picture
If you are referring to those numbers, it must be your php. What I gave you would NOT cause those numbers to appear there.
0
 
Pedro ChagasWebmasterAuthor Commented:
But even with those numbers at the top of the page code does not work!
Do you thing with simple javascript I can do this?
0
 
hieloCommented:
sorry. line 52(after you remove those other lines/numbers)  should be:
 websitesData[ key ] = XMLHttpRequestObject.responseText;

NOT:
 websites[ key ] = XMLHttpRequestObject.responseText;
0
 
hieloCommented:
Why the lousy grade?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now