...

View Full Version : Help with Arrays



dlg0351
04-12-2005, 03:23 PM
I am creating an employee directory. When you click on the employees name their contact info is pulled from an external js file and displayed in a popup window.



<html>
<head>
<script type='text/javascript' src='employee.js'></script>
</head>

<body>

<a href="#" onclick="return showEmployee(0)">Smith, Joseph</a><br>
<a href="#" onclick="return showEmployee(1)">Smith, John</a><br>
<a href="#" onclick="return showEmployee(2)">Jordan, Michael</a><br>

</body>
</html>


I would like to add a next and previous button that will cycle through the employees in the popup window, but I am not sure how to display the next sequence in the array.

I was thinking that I would need to close the current popup window and recall the showEmployee function, but not sure how to increment the array.



var employees = [];
employees[0] = ["Joseph Smith", "555-1234", "jsmith@spam.net"];
employees[1] = ["John Smith", "555-4567", "johnsmith@spam.net"];
employees[2] = ["Michael Jordan", "555-8901", "air@yahoo.com"];

function showEmployee(key)
{
var emp = employees[key];
if(emp)
{
var newwin = window.open('','');
var html = '<html>\n<head>\n<title>' + emp[0] + '</title><script type=text/javascript src=employee.js></script></head>\n<body>\n<table>\n' +
'<tr><td>' + emp[0] + '</td></tr>\n' + //Name
'<tr><td>' + emp[1] + '</td></tr>\n' + //Phone
'<tr><td>' + emp[2] + '</td></tr>\n' + //Email
'</table>\n<form><input type="button" value="Previous" onclick="self.close(), showEmployee(???)"><input type="button" value="Next" onclick="self.close(), showEmployee(???)"></form>\n</body>\n</html>';
newwin.document.write(html);
newwin.document.close();
newwin.focus();
}
else
{
alert('Employee not found.');
}
return false;
}


Any help is greatly appreciated!

A1ien51
04-12-2005, 06:33 PM
store the current key into a global variable currentEmp in your funciton showEmployee.

Than all you would have to do is something like this:



var currentEmp = 0;
function GetNext(xDir){ //xDir should be 1 or -1
currentEmp += xDir;
//You can do check here to see if you are going over the array length
showEmployee(currentEmp);
}


That should get you started.

You could always do a popup check to see if the window is open. If it is, reuse it and bring to the front with focus. if not open, reopen it.

Eric

dlg0351
04-12-2005, 08:23 PM
If currentEmp = 0, and I am addint 1 to it won't it always remain 0?

I am not sure how to "store the current key into a global variable currentEmp in your funciton showEmployee."

A1ien51
04-12-2005, 08:28 PM
All you need to do is add currentEmp = key; into your function showEmployee like this:



function showEmployee(key)
{
var emp = employees[key];
currentEmp = key;
.....


When the script runs it will place the current value into your global variable and that is why it will not stay at 0. It will update each time showEmployee is called.

Eric

dlg0351
04-12-2005, 08:40 PM
Still :confused:!



var employees = [];
employees[0] = ["Joseph Smith", "555-1234", "jsmith@spam.net"];
employees[1] = ["John Smith", "555-4567", "johnsmith@spam.net"];
employees[2] = ["Michael Jordan", "555-8901", "air@yahoo.com"];

var currentEmp = 0;
function GetNext(xDir){ //xDir should be 1 or -1
currentEmp += xDir;
//You can do check here to see if you are going over the array length
showEmployee(currentEmp);
}

function showEmployee(key)
{
var emp = employees[key];
currentEmp = key;
if(emp)
{
var newwin = window.open('','');
var html = '<html>\n<head>\n<title>' + emp[0] + '</title><script type=text/javascript src=employee.js></script></head>\n<body>\n<table>\n' +
'<tr><td>' + emp[0] + '</td></tr>\n' + //Name
'<tr><td>' + emp[1] + '</td></tr>\n' + //Phone
'<tr><td>' + emp[2] + '</td></tr>\n' + //Email
'</table>\n<form><input type="button" value="Next" onclick="self.close(),getNext(1);"></form>\n</body>\n</html>';
newwin.document.write(html);
newwin.document.close();
newwin.focus();
}
else
{
alert('Employee not found.');
}
return false;
}

A1ien51
04-12-2005, 08:53 PM
play with this....



<script>
var employees = [];
employees[0] = ["Joseph Smith", "555-1234", "jsmith@spam.net"];
employees[1] = ["John Smith", "555-4567", "johnsmith@spam.net"];
employees[2] = ["Michael Jordan", "555-8901", "air@yahoo.com"];

var currentEmp = -1;
function GetNext(xDir){ //xDir should be 1 or -1
currentEmp += xDir;
if(currentEmp>=employees.length)currentEmp=0;
else if(currentEmp<0)currentEmp=employees.length - 1;
showEmployee(currentEmp);
}

var newwin = false;
function showEmployee(key)
{
var emp = employees[key];
currentEmp = key;
if(emp)
{
if(!newwin || newwin.closed){
newwin = window.open('','');
}
else{
newwin.focus();
}
var html = "<html><head></head><body>"+emp[0]+"</body></html>";
newwin.document.write(html);
newwin.document.close();
newwin.focus();
}
else
{
alert('Employee not found.');
}
return false;
}
</script>

<input type="button" name="b1" value="<" onclick="GetNext(-1)">
<input type="button" name="b2" value=">" onclick="GetNext(1)">



Also when you are writing out that script into the new window. You need to break it up (e.g. <script> ~~ <scr" + "ipt...) so the page render does not pick it up.

Eric

dlg0351
04-12-2005, 09:08 PM
Oh man! Now I am even more confused. Because the employee directory part is going to be pretty large I was using an external js file to store the array and the function that will open the popup window. I also want the next and previous buttons to appear in the popup as well.

This following code works (no errors) but the currentEmp variable is not icrementing by one, it is just becoming one.



var employees = [];
employees[0] = ["Joseph Smith", "555-1234", "jsmith@spam.net"];
employees[1] = ["John Smith", "555-4567", "johnsmith@spam.net"];
employees[2] = ["Michael Jordan", "555-8901", "air@yahoo.com"];

var currentEmp = 0;
function GetNext(xDir){ //xDir should be 1 or -1
currentEmp += xDir;
//You can do check here to see if you are going over the array length
showEmployee(currentEmp);
}

function showEmployee(key)
{
var emp = employees[key];
currentEmp = key;
if(emp)
{
var newwin = window.open('','');
var html = '<html>\n<head>\n<title>' + emp[0] + '</title><script type=text/javascript src=employee.js></script></head>\n<body>\n<table>\n' +
'<tr><td>' + emp[0] + '</td></tr>\n' + //Name
'<tr><td>' + emp[1] + '</td></tr>\n' + //Phone
'<tr><td>' + emp[2] + '</td></tr>\n' + //Email
'</table>\n<form><input type="button" value="Next" onclick="self.close(),GetNext(1);"></form>\n</body>\n</html>';
newwin.document.write(html);
newwin.document.close();
newwin.focus();
}
else
{
alert('Employee not found.');
}
return false;
}


By the way, I really appreciate you helping me out.

A1ien51
04-12-2005, 09:20 PM
next....

You are not going to need to js file in the pop up. You are only going to need it in the parent window.



<script>
var employees = [];
employees[0] = ["Joseph Smith", "555-1234", "jsmith@spam.net"];
employees[1] = ["John Smith", "555-4567", "johnsmith@spam.net"];
employees[2] = ["Michael Jordan", "555-8901", "air@yahoo.com"];

var currentEmp = -1;
function GetNext(xDir){ //xDir should be 1 or -1
currentEmp += xDir;
if(currentEmp>=employees.length)currentEmp=0;
else if(currentEmp<0)currentEmp=employees.length - 1;
showEmployee(currentEmp);
}

var newwin = false;
function showEmployee(key)
{
var emp = employees[key];
currentEmp = key;
if(emp)
{
if(!newwin || newwin.closed){
newwin = window.open('','');
}
else{
newwin.focus();
}
var html = '<html>\n<head>\n<title>' + emp[0] + '</title></head>\n<body>\n<table>\n' +
'<tr><td>' + emp[0] + '</td></tr>\n' + //Name
'<tr><td>' + emp[1] + '</td></tr>\n' + //Phone
'<tr><td>' + emp[2] + '</td></tr>\n' + //Email
'</table>\n<form><input type="button" value="Next" onclick="window.opener.GetNext(1);"></form>\n</body>\n</html>';
newwin.document.write(html);
newwin.document.close();
newwin.focus();
}
else
{
alert('Employee not found.');
}
return false;
}
</script>

<input type="button" name="b1" value="<" onclick="GetNext(-1)">
<input type="button" name="b2" value=">" onclick="GetNext(1)">



See how I changed the function to call the function in the parent? It makes your life easier....

Eric

dlg0351
04-12-2005, 09:27 PM
ummm...I don't quit understand it yet, but I really appraciate your help. I feel better knowing that you wrote a book on Javascript and are not some 14 yr old kid, you;re not a 14 year old kid are you? haha! thanks anyway if if you are younger than me, lol.

A1ien51
04-12-2005, 09:38 PM
What don't you understand exactly, maybe I could help expalin it.

If you understand this statement below, you know my age..
My car insurance dropped since I hit that magical number.

Eric

dlg0351
04-12-2005, 09:47 PM
Well, I am at my day job now which is accounting so I will have to look at it tonight line by line. I understand the logic most of the time, but not the syntax most of the time, lol.

The magical age? Hmmm, I am 29 so I assume you are older than me because as far as I know my insurance has never dropped, lol.

A1ien51
04-12-2005, 09:54 PM
I am younger by a few years....You can always click on people's names and they may have their birthday sitting there in their profile! Something for you to look at in the future.

Eric

dlg0351
04-12-2005, 09:58 PM
Da! Haha. I looked at that earlier but obviously bypassed the b-day. Anyway thanks for the help, I really appreciate it.

Kor
04-13-2005, 11:08 AM
you may try this DOM full solution:

in index.html (the opner)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
var employees = new Array();
employees[0] = ['Joseph Smith','555-1234','jsmith@spam.net'];
employees[1] = ['John Smith','555-4567','johnsmith@spam.net'];
employees[2] = ['Michael Jordan','555-8901','air@yahoo.com'];
employees[3] = ['Stephen King','565-7675','horror@hotmail.com'];
var mid = ', ';
var oTxt= new Array();
function set(){
for(var i=0;i<employees.length;i++){
var txt = employees[i][0].split(' ');
oTxt[i] = txt[1]+mid+txt[0];
}
oTxt.sort()
var root=document.getElementById('list');
for(var i=0;i<oTxt.length;i++){
var oA = document.createElement('a')
oA.setAttribute('href','#')
oA.onclick=function(){showEmployee(this);return false}
var oBr = document.createElement('br')
oA.appendChild(document.createTextNode(oTxt[i]));
root.appendChild(oA);
root.appendChild(oBr)
}
}
function showEmployee(r){
for(var i=0;i<oTxt.length;i++){
if(oTxt[i]==r.firstChild.data){ind=i;break}
}
var r = r.firstChild.data.split(', ');
for(var i=0;i<employees.length;i++){
if((employees[i][0].indexOf(r[0])>-1)&&(employees[i][0].indexOf(r[1])>-1)){
tx=employees[i].join();
;break
}
}
var newwin= window.open('pop.html','nw');
newwin.focus();
}
onload=set;
</script>
</head>
<body>
<div id="list">
</div>
</body>
</html>


in pop.html (the pop-up window)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
onload= function(){
var root = document.getElementsByTagName('body')[0];
var oSpan = document.createElement('span');
oSpan.appendChild(document.createTextNode(opener.tx));
root.appendChild(oSpan);
for (var i=0;i<3;i++){
root.appendChild(document.createElement('br'));
}
var oSpan1 = document.createElement('span');
var oT1 = document.createTextNode('previous ');
oSpan1.style.cursor='pointer';
oSpan1.onclick = function(){
slideT('-1')
}
oSpan1.appendChild(oT1);
var oSpan2 = document.createElement('span');
var oT2 = document.createTextNode(' next');
oSpan2.style.cursor='pointer';
oSpan2.onclick = function(){
slideT('1')
}
oSpan2.appendChild(oT2);
root.appendChild(oSpan1);
root.appendChild(oSpan2)
document.title=opener.tx
ii=opener.ind;
}
function slideT(q){
ii=ii+Number(q);
if(ii==opener.oTxt.length){ii=0}
if(ii==-1){ii=opener.oTxt.length-1}
var v=opener.oTxt[ii].split(', ');
for(var i=0;i<opener.oTxt.length;i++){
if((opener.employees[i][0].indexOf(v[0])>-1)&&(opener.employees[i][0].indexOf(v[1])>-1)){
var nTxt = opener.employees[i].join();
document.title=opener.employees[i];
break
}
}
var root = document.getElementsByTagName('body')[0].getElementsByTagName('span')[0]
root.firstChild.data = nTxt;
}
</script>
</head>
<body>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum