Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with Arrays

    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.

    Code:
    <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.

    Code:
    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!

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    store the current key into a global variable currentEmp in your funciton showEmployee.

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

    Code:
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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."

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    All you need to do is add currentEmp = key; into your function showEmployee like this:

    Code:
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still !

    Code:
    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;
    }

  • #6
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    play with this....

    Code:
    <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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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.

  • #8
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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.

    Code:
    <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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #9
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #11
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #13
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Da! Haha. I looked at that earlier but obviously bypassed the b-day. Anyway thanks for the help, I really appreciate it.

  • #14
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    you may try this DOM full solution:

    in index.html (the opner)
    PHP Code:
    <!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.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 
    newwinwindow.open('pop.html','nw');
    newwin.focus();
    }
    onload=set;
    </script>
    </head>
    <body>
    <div id="list">
    </div>
    </body>
    </html> 
    in pop.html (the pop-up window)

    PHP Code:
    <!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> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •