writing information to a div

[gomzi]

hi,
I have written a small script that will display data in a div tag ...the data to be displayed will change every two seconds.

The problem that i am having with this script is that,
in internet explorer i get an error "expected )" [This error does not occur every time i run the script.say once in every 5 runs it appears. Try refreshing the page again and again].

in firefox, nothing gets displayed...i am stumped on that!!


The code :

var names;
var i = 0;
function displaynames(na me)
{
names = name.split("### ");
heading.style.v isibility="visi ble";
heading.style.d isplay = "block";
heading.innerTe xt = names[i];
i=i+1;
var t = setTimeout('sho wnames()',2000) ;
}
function shownames()
{
if (i<names.length )
{
heading.innerTe xt = names[i];
i=i+1;
var t = setTimeout('sho wnames()',2000) ;
}
else
{
i=0;
heading.innerTe xt = names[i];
i=i+1;
var t = setTimeout('sho wnames()',2000) ;
}


The input to displaynames is in this format -> "wow###yipe e"

any help would be appreciated...

thanks,
gomzi.

[gomzi]

hey guys...i think i have got a pretty good idea of whats going wrong here...

I have some strings like this-> windows xp 'microsoft' in the database..

so when am trying to display them, i get an error saying expected ')'

i.e. it wrongly considers the single quote as the end of the string...

is there anyway how i can overcome this?

[DutchKingCobra]

hi pal
first u are missin a }
at the very end!!!

and instead of using
i=i+1;
use
i++;
i can help u with it ,when i understand the way u want it.!
so do u have an textbox for entering names seperated by ###
and u want to write them in a div every 2 sec
Or
do u have an array of names?
and u want to write them in a div every 2 sec

im curious
peace

[gomzi]

hi pal
first u are missin a }
at the very end!!!

and instead of using
i=i+1;
use
i++;
i can help u with it ,when i understand the way u want it.!
so do u have an textbox for entering names seperated by ###
and u want to write them in a div every 2 sec
Or
do u have an array of names?
and u want to write them in a div every 2 sec

im curious
peace

thanks mate....
ya. i have the } at the end..forgot to copy it here.

i have an array of names. These names have been put into the array by separating them .... i.e. say tom###jerry has been put into two positions in an array , one containing tom and the other jerry.

[DutchKingCobra]

hi pal
eh could you post a bit of this array
im having trouble understanding it
is it like

names = new Array();
names[0]='tom';
names[1]='jerry';

or

names = new Array();
names[0]='tom###jerry';

which would be very weird
ps firefox does not support innerText use innerHTML instead
hahaha
well peace to u

[gomzi]

hi pal
eh could you post a bit of this array
im having trouble understanding it
is it like

names = new Array();
names[0]='tom';
names[1]='jerry';

or

names = new Array();
names[0]='tom###jerry';

which would be very weird
ps firefox does not support innerText use innerHTML instead
hahaha
well peace to u

yup..its of the first type.tried innerHTML. firefox didnt display that either!!

[DutchKingCobra]

so if im correct
u have an arra like this:

names = new Array();
names[0]='tom';
names[1]='jerry';

and u want to write it into a div or span like this

tom###jerry

every 2 sec?

[gomzi]

so if im correct
u have an arra like this:

names = new Array();
names[0]='tom';
names[1]='jerry';

and u want to write it into a div or span like this

tom###jerry

every 2 sec?

nope....its something like this...

initially i have this - > tom###jerry in a variable say var1 (string)

then,

i separate it into tom & jerry and put it into a variable named names which is an array...
something like what you guessed..
names = new Array();
names[0]='tom';
names[1]='jerry';

now, i want to display these two items alternatively every 2 seconds.

but the problem is that in case the string is something like say...

tom###je'rry'

then when i pass this string to the displaynames function,
i get an error that the expected ')' aint there.

[gomzi]

And one more thing....
The string can contain single quotes as i just showed...

or

double quotes, like -> tom###je"rry"

or

any other character for that matter...

so, is there a way of encoding the strings so that it wont create a problem in any case?

[DutchKingCobra]

hmmm thats a difficult

are the strings predefined or is it userinput?

take a look at this

<html>
<!-- Created on: 10-4-2007 -->
<head>
  <title>JavaScript : Generate A Array Tool</title>	
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="JavaScript : Generate A Array Tool">
<meta name="keywords" content="JavaScript : Generate A Array Tool">
<meta name="author" content="FJH de Hoog"> 
<script language="JavaScript1.2"> 
//Author : fjhdehoog
//use this code on 1 condition, leave the author comment intact ,thank you 
//leave empty 
var Thisarrayname='';
var mystring ='';
var Seperator='<br>';
count=0;

function startwait(){
state=document.getElementById('Progressspan')
state.style.backgroundColor='red';
state.innerHTML='Please Wait';
setTimeout('GetInput()',500);
} 
function waitFinished(){ 
state=document.getElementById('Progressspan')
state.style.backgroundColor='green'; 
state.innerHTML='Ready';
} 
function GetInput(){
Thisarrayname=generatearrayform.ArrayNameTB.value;
mystring = generatearrayform.ArrayElements.value;
//Check for input Thisarrayname.indexOf(' ')
if (Thisarrayname.indexOf(' ')==-1){}else{alert('No spaces allowed for Array Name.!!!');waitFinished();return false;}
if (Thisarrayname==''){alert('Field Array Name Is Empty!!!');waitFinished();return false;}else{}
if (mystring==''){alert('Field Array Elements Is Empty!!!');waitFinished();return false;}else{}
//trim left
while (mystring.substring(0,1) == ' '){
mystring = mystring.substring(1, mystring.length);} 
//trim right
while (mystring.substring(mystring.length-1, mystring.length) == ' '){
mystring = mystring.substring(0,mystring.length-1);}
//check first char ,if contains a number return false
isvalid=Thisarrayname.substring(0,1);
for (i=0;i<10;++i){
if (isvalid!=i){}else{alert('Invalid Array Name.\nCannot start with a number');waitFinished();return false;}
}		  
//
TheArrayGenerated.innerHTML='<font face="Fixedsys" color="#000000"><b><tt>'+Thisarrayname+'</tt></b></font><font color="#008000"> = </font>new <font color="#ff0000">Array</font><font color="#008000">();</font><br>';
//reset count
count=0; 
//call GenerateArray()
GenerateArray();

 }
function GenerateArray(){ 
//if the string is emmpty do nothing
if (mystring=='' || mystring==' '){/*alert ('mystring is empty');*/}
else { 
//get the first space
getspace=mystring.indexOf(' ')+1;
//if there is no space left , we assume it is the last word
if (getspace==0){
//get the remaining string length
xxx=mystring.length; 
//read the string from first char to its last

firstword=mystring.substring(0,xxx);
//****Trim left and right******** 
while (firstword.substring(0,1) == ' '){firstword = firstword.substring(1, firstword.length);}
while (firstword.substring(firstword.length-1, firstword.length) == ' '){firstword= firstword.substring(0,firstword.length-1);}
/***********/
//read from position xxx to it remaining length *** seems useless but its needed
newstring=mystring.substring(xxx,mystring.length);
//write the firstword to span
TheArrayGenerated.innerHTML+='<font face="Fixedsys" color="#000000"><b><tt>'+Thisarrayname+"</tt></b></font><font color='#008000'>[</font><font color='#ff00ff'>"+count+"</font><font color='#008000'>]</font>='"+firstword+"'<font color='#008000'>;</font>";
count++; 
//make sure mystring is empty
mystring='';
waitFinished();
}else{	
//if there is a space left ,read the string from the first char to the first space
firstword=mystring.substring(0,getspace); 
//then write it to span
//****Trim left and right******** 
while (firstword.substring(0,1) == ' '){firstword = firstword.substring(1, firstword.length);}
while (firstword.substring(firstword.length-1, firstword.length) == ' '){firstword= firstword.substring(0,firstword.length-1);}
/***********/
TheArrayGenerated.innerHTML+='<font face="Fixedsys" color="#000000"><b><tt>'+Thisarrayname+"</tt></b></font><font color='#008000'>[</font><font color='#ff00ff'>"+count+"</font><font color='#008000'>]</font>='"+firstword+"'<font color='#008000'>;</font>"+Seperator;
count++;
//read the string from the first space to the end and assign it to newstring
newstring=mystring.substring(getspace,mystring.length);
} 
//set the remaining string as mystring
mystring=newstring;	
//call GenerateArray() again bcuzz there are still words left
GenerateArray();
}
}
function Clearfields() {
generatearrayform.ArrayNameTB.value='';
generatearrayform.ArrayElements.value='';
}
</script>
<style>
.Btn{width:100%;}
.Progressview{width:100%;background-color:green;text-align:center;font-weight:bold;} 
.ArrayElementsInput{width:100%;font-family:georgia;color:blue;}
.ArrayNameTBInput{width:100%;font-family:tahoma;color:red;}
</style>
</head>
<body>

<table border=1 bgcolor="dodgerblue" bordercolor=#000000 summary="" align="center">
<form name="generatearrayform">
<tr>
<td colspan="3"><div style="text-align: center"><font color="#ffffff" size="3"><em><tt><b>JavaScript Generate A Array Tool By fjhdehoog</b></tt></em></font></div></td>
</tr>
<tr>
<td colspan="3"><font color="#ffffff"><tt>Enter the Array Name:</tt></font><br>
<input type="text" class="ArraynameTBInput" name="ArrayNameTB" maxlength="256" value="Example"><br>
<font color="#ffffff"><tt>Enter the Array elements seperated by a single space:</tt></font><br>
<textarea class="ArrayElementsInput" name="ArrayElements" rows="10">AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen</textarea><br></td>
</tr>
<tr>
<td width="33%"><input class="Btn" type="button" value="Generate Array" onclick="startwait()"></td>
<td width="33%"><input class="Btn" type="button" onclick="Clearfields()" value="Clear"></td>
<td width="33%"><span id="Progressspan" class="Progressview">Ready</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="white"><span id="TheArrayGenerated" ></span></td>
</tr>
</form>
</table>
</body>
</html>

and this

<html>
<!-- Created on: 14-4-2007 -->
<head>
  <title></title>
<script language="JavaScript1.2"> 
var i = 0;
function displaynames(){
heading=document.getElementById('mydiv');
names=document.getElementById('nameinput').value;
nextname = names.split("###");

if (nextname[i]==null){
heading.innerHTML = 'finished';
return false;
}else{
heading.innerHTML = nextname[i];

i++;
setTimeout('displaynames()',2000);
}
}

</script> 
</head>
<body onload="displaynames()">
<form>
<input type="text" id="nameinput" size="40" value="111##222###333###444###555"maxlength="256">

</form>
<div id="mydiv"></div>
</body>
</html>

i hope u gain some insight from it
because im a bit lost
i know what u mean but i cant get the point that there would be/get qoutes
in the string?
and why the ###?
instead of a single space?
peace m8

[acoder]

Escape the strings in your server-side script using backslash, i.e. replace all single quotes with:

\'

[gomzi]

hmmm thats a difficult

are the strings predefined or is it userinput?

take a look at this

<html>
<!-- Created on: 10-4-2007 -->
<head>
  <title>JavaScript : Generate A Array Tool</title>	
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="JavaScript : Generate A Array Tool">
<meta name="keywords" content="JavaScript : Generate A Array Tool">
<meta name="author" content="FJH de Hoog"> 
<script language="JavaScript1.2"> 
//Author : fjhdehoog
//use this code on 1 condition, leave the author comment intact ,thank you 
//leave empty 
var Thisarrayname='';
var mystring ='';
var Seperator='<br>';
count=0;

function startwait(){
state=document.getElementById('Progressspan')
state.style.backgroundColor='red';
state.innerHTML='Please Wait';
setTimeout('GetInput()',500);
} 
function waitFinished(){ 
state=document.getElementById('Progressspan')
state.style.backgroundColor='green'; 
state.innerHTML='Ready';
} 
function GetInput(){
Thisarrayname=generatearrayform.ArrayNameTB.value;
mystring = generatearrayform.ArrayElements.value;
//Check for input Thisarrayname.indexOf(' ')
if (Thisarrayname.indexOf(' ')==-1){}else{alert('No spaces allowed for Array Name.!!!');waitFinished();return false;}
if (Thisarrayname==''){alert('Field Array Name Is Empty!!!');waitFinished();return false;}else{}
if (mystring==''){alert('Field Array Elements Is Empty!!!');waitFinished();return false;}else{}
//trim left
while (mystring.substring(0,1) == ' '){
mystring = mystring.substring(1, mystring.length);} 
//trim right
while (mystring.substring(mystring.length-1, mystring.length) == ' '){
mystring = mystring.substring(0,mystring.length-1);}
//check first char ,if contains a number return false
isvalid=Thisarrayname.substring(0,1);
for (i=0;i<10;++i){
if (isvalid!=i){}else{alert('Invalid Array Name.\nCannot start with a number');waitFinished();return false;}
}		  
//
TheArrayGenerated.innerHTML='<font face="Fixedsys" color="#000000"><b><tt>'+Thisarrayname+'</tt></b></font><font color="#008000"> = </font>new <font color="#ff0000">Array</font><font color="#008000">();</font><br>';
//reset count
count=0; 
//call GenerateArray()
GenerateArray();

 }
function GenerateArray(){ 
//if the string is emmpty do nothing
if (mystring=='' || mystring==' '){/*alert ('mystring is empty');*/}
else { 
//get the first space
getspace=mystring.indexOf(' ')+1;
//if there is no space left , we assume it is the last word
if (getspace==0){
//get the remaining string length
xxx=mystring.length; 
//read the string from first char to its last

firstword=mystring.substring(0,xxx);
//****Trim left and right******** 
while (firstword.substring(0,1) == ' '){firstword = firstword.substring(1, firstword.length);}
while (firstword.substring(firstword.length-1, firstword.length) == ' '){firstword= firstword.substring(0,firstword.length-1);}
/***********/
//read from position xxx to it remaining length *** seems useless but its needed
newstring=mystring.substring(xxx,mystring.length);
//write the firstword to span
TheArrayGenerated.innerHTML+='<font face="Fixedsys" color="#000000"><b><tt>'+Thisarrayname+"</tt></b></font><font color='#008000'>[</font><font color='#ff00ff'>"+count+"</font><font color='#008000'>]</font>='"+firstword+"'<font color='#008000'>;</font>";
count++; 
//make sure mystring is empty
mystring='';
waitFinished();
}else{	
//if there is a space left ,read the string from the first char to the first space
firstword=mystring.substring(0,getspace); 
//then write it to span
//****Trim left and right******** 
while (firstword.substring(0,1) == ' '){firstword = firstword.substring(1, firstword.length);}
while (firstword.substring(firstword.length-1, firstword.length) == ' '){firstword= firstword.substring(0,firstword.length-1);}
/***********/
TheArrayGenerated.innerHTML+='<font face="Fixedsys" color="#000000"><b><tt>'+Thisarrayname+"</tt></b></font><font color='#008000'>[</font><font color='#ff00ff'>"+count+"</font><font color='#008000'>]</font>='"+firstword+"'<font color='#008000'>;</font>"+Seperator;
count++;
//read the string from the first space to the end and assign it to newstring
newstring=mystring.substring(getspace,mystring.length);
} 
//set the remaining string as mystring
mystring=newstring;	
//call GenerateArray() again bcuzz there are still words left
GenerateArray();
}
}
function Clearfields() {
generatearrayform.ArrayNameTB.value='';
generatearrayform.ArrayElements.value='';
}
</script>
<style>
.Btn{width:100%;}
.Progressview{width:100%;background-color:green;text-align:center;font-weight:bold;} 
.ArrayElementsInput{width:100%;font-family:georgia;color:blue;}
.ArrayNameTBInput{width:100%;font-family:tahoma;color:red;}
</style>
</head>
<body>

<table border=1 bgcolor="dodgerblue" bordercolor=#000000 summary="" align="center">
<form name="generatearrayform">
<tr>
<td colspan="3"><div style="text-align: center"><font color="#ffffff" size="3"><em><tt><b>JavaScript Generate A Array Tool By fjhdehoog</b></tt></em></font></div></td>
</tr>
<tr>
<td colspan="3"><font color="#ffffff"><tt>Enter the Array Name:</tt></font><br>
<input type="text" class="ArraynameTBInput" name="ArrayNameTB" maxlength="256" value="Example"><br>
<font color="#ffffff"><tt>Enter the Array elements seperated by a single space:</tt></font><br>
<textarea class="ArrayElementsInput" name="ArrayElements" rows="10">AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen</textarea><br></td>
</tr>
<tr>
<td width="33%"><input class="Btn" type="button" value="Generate Array" onclick="startwait()"></td>
<td width="33%"><input class="Btn" type="button" onclick="Clearfields()" value="Clear"></td>
<td width="33%"><span id="Progressspan" class="Progressview">Ready</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="white"><span id="TheArrayGenerated" ></span></td>
</tr>
</form>
</table>
</body>
</html>

and this

<html>
<!-- Created on: 14-4-2007 -->
<head>
  <title></title>
<script language="JavaScript1.2"> 
var i = 0;
function displaynames(){
heading=document.getElementById('mydiv');
names=document.getElementById('nameinput').value;
nextname = names.split("###");

if (nextname[i]==null){
heading.innerHTML = 'finished';
return false;
}else{
heading.innerHTML = nextname[i];

i++;
setTimeout('displaynames()',2000);
}
}

</script> 
</head>
<body onload="displaynames()">
<form>
<input type="text" id="nameinput" size="40" value="111##222###333###444###555"maxlength="256">

</form>
<div id="mydiv"></div>
</body>
</html>

i hope u gain some insight from it
because im a bit lost
i know what u mean but i cant get the point that there would be/get qoutes
in the string?
and why the ###?
instead of a single space?
peace m8

thanks man for posting the code so that i could understand as to how the thing works...

As far as the strings are concerned they are not predefined, they come from the database and can be anything.

m separating the strings by ### because i am sure that no string will contain three hashes together and hence can be a sure way of separating them in javascript.

[gomzi]

Escape the strings in your server-side script using backslash, i.e. replace all single quotes with:

\'

thanks acoder...

ya.m doing that as of now...but its just a temporary solution ........

i will start receiving errors if the string contains any other special character....

so is there any encoding technique that i can use?

[acoder]

You can perhaps use the escape function, but what other special characters cause errors?

[gomzi]

You can perhaps use the escape function, but what other special characters cause errors?

Even if a string contains a double quote i get this error.

i cannot use escape function because, the string that i am passing to the javascript function is through asp.net. I tried using server.htmlenco de available in .net, but it wasn't much helpful.