...

View Full Version : Javascript array question??



korssane
09-11-2011, 12:12 AM
Hi Peers,
I am capturing query data into different Javascript arrays and that is the only way i have for now...anyway ..i have what i want in JS arrrays >

is there a war to perform CRUD operations on those arrays :

my Arrays look like this :

A1 : EmpID / A2 : Name / A3: Fistanme..
A1[0] : 1 / A1[0] : Paul /A1[0] : Newman
A1[1] : 2 / A1[1] : Paul /A1[1] : Simon

i want to be able to display the information like and give the ability to create , update or delete the record based on the EmpID unique number:

EmpID / Name / Firstname
1 Paul Newman Update ( hyperlink) - Delete ( hyperlink)
2 Paul Simon Update ( hyperlink) - Delete ( hyperlink)


i am using Coldfusion CF 7 and i was told since i want to keep the data into JS array that the only way to do it is usinig JAvascript


any thoughts how can this be done./???

Thanks

xelawho
09-11-2011, 01:46 AM
once again, there's probably a fancier way of doing this, but is this what you're talking about?



<html>
<head>
</head>
<body>
<div id="links"></div>
<script type="text/javascript">
var names = [{EmpId:"1",name:"Paul",surname:"Newman"},{EmpId:"2",name:"Paul",surname:"Simon"}];
for (var i=0; i<names.length; i++) {
current=names[i];
document.getElementById("links").innerHTML +=current.EmpId+" "+current.name+" "+current.surname+" <a href=http://www.google.com>Update Link</a> " + "<br>";
}
</script>

</body>
</html>

korssane
09-11-2011, 03:17 AM
Hi xelawho,

Thanks for the quick reply . I would appreciate small explanation of what you wrote ..to undestand the logic behind...

i ll try it and let you know if this is what i want

I appreciate your help man..

xelawho
09-11-2011, 04:55 AM
mmm... let me see if I understand it

this bit:
var names = [{EmpId:"1",name:"Paul",surname:"Newman"}, EmpId:"2",name:"Paul",surname:"Simon"}];
sets up an array of objects

this bit:
for (var i=0; i<names.length; i++) {
loops through those objects

this bit:
current=names[i];
is just a bit of shorthand so you don't have to keep writing "names[i]" over and over

this bit:
document.getElementById("links").innerHTML +=current.EmpId+" "+current.name+" "+current.surname+" <a href=http://www.google.com>Update Link</a> " + "<br>";
finds the div called "links" and adds a string to it - the bits inside the quotes are text, the others are the attributes of the object being examined. The += makes sure that the string is added to the existing contents of the div rather than overwriting it.

korssane
09-11-2011, 04:13 PM
Hi xelawho,

thank you . Here whati am trying to do ..
let say i have 3 arrays one A1 holds IDs 2nd one A2 holds names and 3rd one A3 holds lastnames

Let suppose that A1[0] A2[0] A3[0] hols a signle record information
empid1 / name1 / lastname1

A1[1] A2[1] A3[1] holds 2 nd record :empid2 / name2 / lastname2

how can i get the same view you showed me in the last post

empid1 / name1 / lastname1 update link 1 ( with empid1 as variable)
empid2 / name2 / lastname2 update link 1 ( with empid2 as variable)..
....


i really appreciate your help bro..


Thanks

xelawho
09-11-2011, 05:38 PM
ah, three arrays. do they have names?

korssane
09-11-2011, 05:53 PM
Hi Xelawho,

ok here is my real scenario :

I have 4 arrays : PojectID, ProjectGate, ProjectGateName , ProjectgateDate

i have already those arrays ready in Javascript and data loaded into them .
what i want is :

1 - i have a Dropdownlist with list of PojectID
2- on PojectID item change, i should see all (ProjectGate, ProjectGateName and ProjectgateDate ) related to that PojectID
3- for each record generated i want to have hyperlink where i can pass projectID / ProjectGate variables to a forms where i ll be able to update the information..

Please, Let me know if i am unclear

thanks alot for the help !!

jmrker
09-11-2011, 06:12 PM
ah, three arrays. do they have names?

Seems like a design that is courting disaster. :eek:
Will be difficult to search and sorting will lead to total chaos. :rolleyes:

But, it is the OP's question.

Just a guess:


<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
var A1 = ['1111','2222','3333','4444'];
var A2 = ['John','Jacob','Jingle','Heimer'];
var A3 = ['Jones','Astor','Bell','Smith'];
var employee = []
for (var i=0; i<A1.length; i++) {
str = A1[i]+': '+A3[i]+', '+A2[i];
employee.push(str);
}
for (var i=0; i<employee.length; i++) { alert(employee[i]); }

</script>

</head>
<body>

</body>
</html>

xelawho
09-11-2011, 06:24 PM
jmrker: I am curious, not criticising - why not use concat here?



var A1 = ['1111','2222','3333','4444'];
var A2 = ['John','Jacob','Jingle','Heimer'];
var A3 = ['Jones','Astor','Bell','Smith'];
var employee = []
employee=employee.concat(A1,A2,A3);
alert(employee[6]);

korssane
09-11-2011, 06:50 PM
Hi Jmrker,

Thanks for that ... i think my scenario is more complex i guess..

thanks for the suggestion

xelawho
09-11-2011, 07:23 PM
I think I get it now. Well, probably not, but let's pretend.

Now assuming that your arrays are all the same length and each item in a "column" matches all the items in its "row", maybe this will help:


<html>
<head>
</head>
<body>

<div><form name="myform">
<select id="names" onChange="showRecord()"><option selected>Please choose a project</option></select>
</form>
</div>
<div id="links"></div>
<script type="text/javascript">
var ProjectID = ['London 1242','Istandbul 7896','Paris 3858'];
var ProjectGate = [{Place:'London'},{Place:'Istanbul'},{Place:'Paris'}];
var ProjectgateDate = [{date:'June 1'},{date:'Dec 3'},{date:'Apr 20'}];
for (var k=0; k<ProjectID.length; k++) {
var optn = document.createElement("OPTION");
optn.text = ProjectID[k];
document.myform.names.options.add(optn);
}

function showRecord(){
var a=document.getElementById("names").selectedIndex-1;
if (a==-1){
document.getElementById("links").innerHTML =""
} else {
document.getElementById("links").innerHTML ="Project ID: "+ProjectID[a]+"<br>Project Gate: "+ProjectGate[a].Place+"<br>Project Date: "+ProjectgateDate[a].date
}
}
</script>

</body>
</html>

jmrker
09-11-2011, 07:36 PM
jmrker: I am curious, not criticising - why not use concat here?



var A1 = ['1111','2222','3333','4444'];
var A2 = ['John','Jacob','Jingle','Heimer'];
var A3 = ['Jones','Astor','Bell','Smith'];
var employee = []
employee=employee.concat(A1,A2,A3);
alert(employee[6]);

No reason other than trying to keep the solution simple for the OP
since I'm not sure I really understand what they are trying to do! :eek:

korssane
09-12-2011, 01:19 AM
Hi xelawh,

I appreciate your time..How i ll change that if i have more than 1 ProjectGate by ProjectID
var ProjectID = [1,2,3,1];
var ProjectGate = [gate1, gate2,gate1,gate3];
var ProjectgateDate = [{date:'June 1'},{date:'Dec 3'},{date:'Apr 20'}, {date:'May20'}];

let say i chose Project 1 from the Dropdown:
i need to get only :

ProjectID : 1
gate1 / June 1
gate3 / May20




thanks..

xelawho
09-12-2011, 02:09 AM
now I'm REALLY confused...

there can be two projects with the same Id?

or one project can have various gates?

the way that it works now is all about position within the array - so I guess we need to know if for example in bit that you showed, if you choose the first choice (1) will you always want to see the 4th choice as well?

or it it more a case of checking if there are other entries with the same ID and if there are, showing them and their respective data, too?

korssane
09-12-2011, 02:26 AM
No a project keeps the same ID but it can have various gates?
gates : gate 1 to gate 3

example of records i may found in my table :


RecordId(unique) / projectid / gatename / gatedate
1/10/Gate1/01/01/2011
2/10/Gate2/03/01/2011
3/10/Gate3/04/15/2011
4/5/ Gate1/01/05/2011
5/5/ Gate2/03/10/2011
6/11/ Gate1/03/10/2011


as you van see project id = 10 has more than 1 gate ( gate1, 2 and 3)
project id = 5 has two gates and projectid=11 has only one gate .

in the dropdownlist , when i choose Distinct (projectid) i.e 10 it should give me only :
10
1/Gate1/01/01/2011
2/Gate2/03/01/2011
3/Gate3/04/15/2011


hope this is clear now...


Thanks !

xelawho
09-12-2011, 04:14 AM
well, it ain't pretty, but I do suspect it works...

I assumed some fields shouldn't be editable (they're the greyed out ones you can see in Firefox), but you can change that by deleting the readonly="readonly" bit



<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="UTF-8">
</head>
<body>
<style type="text/css">
div{
padding:0px 0px 3px 3px;
font-weight:bold;
}
.column{
float:left;
}
</style>
<form name="myform">
<div><select id="projects" onChange="showRecord()"><option selected>Please choose a project</option></select></div>
<div style="overflow:auto">
<div class="column"> Project ID:<br>
<div>
<input type="text" id="id1" readonly="readonly"></input>
</div>
<div>
<input type="text" id="id2" readonly="readonly"></input>
</div>
<div>
<input type="text" id="id3" readonly="readonly"></input>
</div>
</div>
<div class="column">
Project Gate:<br>
<div>
<input type="text" id="gate1" readonly="readonly"></input>
</div>
<div>
<input type="text" id="gate2" readonly="readonly"></input>
</div>
<div>
<input type="text" id="gate3" readonly="readonly"></input>
</div>
</div>
<div class="column"> Project Gate Date:<br>
<div>
<input type="text" id="date1"></input>
</div>
<div>
<input type="text" id="date2"></input>
</div>
<div>
<input type="text" id="date3"></input>
</div>
</div>
</div>
<div>Comments:<br>
<textarea id="comments" cols="50" rows="15"></textarea>
</div>
<input type="button" id="gate" value ="submit" onclick="javascript:alert('I don\'t know how to submit forms - you\'ll have to ask someone else')"></input>
<input type="button" id="gate" value ="clear form" onclick="clearBoxes(); clearList()"></input>
</form>
</div>
<div id="links"></div>
<script type="text/javascript">
var listcount=0;
var ProjectID = ["1","2","3","1"];
var ProjectGate = ["gate1", "gate2","gate1","gate3"];
var ProjectgateDate = [{date:'June 1'},{date:'Dec 3'},{date:'Apr 20'}, {date:'May 20'}];
for (var k=0; k<ProjectGate.length; k++) {
listcount++;
var optn = document.createElement("OPTION");
optn.text = "Project " +listcount;
document.myform.projects.options.add(optn);
}

function showRecord(){
var boxcount=0;
clearBoxes();
var a=document.getElementById("projects").selectedIndex-1;
var projID=ProjectID[a];
for (var k=0; k<ProjectID.length; k++) {
if (projID==ProjectID[k]) {
boxcount++;
document.getElementById("id"+boxcount).value=ProjectID[k];
document.getElementById("gate"+boxcount).value=ProjectGate[k];
document.getElementById("date"+boxcount).value=ProjectgateDate[k].date;
}
}
}

function clearBoxes () {
var elLength = document.myform.elements.length;
for (i=0; i<elLength; i++) {
els=document.myform.elements[i];
if (els.type=="text"||els.type=="textarea"){
els.value=""
}
}
}

function clearList () {
document.getElementById("projects").selectedIndex=0;
}
</script>
</body>
</html>

Kor
09-12-2011, 12:15 PM
Well, I suppose that you could re-arrange the array, at the server-side level, into an object before display the HTML code, so that your final arrangement should be a JSON object:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var data=[
// object START
{
'projectid':'10',
'gatename':{
'Gate1':{'RecordId':1,'gatedate':'01/01/2011'},
'Gate2':{'RecordId':2,'gatedate':'03/01/2011'},
'Gate3':{'RecordId':3,'gatedate':'04/15/2011'}
}
},
// object END
// object START
{
'projectid':'5',
'gatename':{
'Gate1':{'RecordId':4,'gatedate':'01/05/2011'},
'Gate2':{'RecordId':5,'gatedate':'03/10/2011'}
}
},
// object END
// object START
{
'projectid':'11',
'gatename':{
'Gate1':{'RecordId':6,'gatedate':'03/10/2011'}
}
}
// object END
]

function displayProject(pid){
var d, i=0, txt='';
while(d=data[i++]){
if(d.projectid==pid){
for(a in d.gatename){
txt+=(d.gatename[a].RecordId+' | '+a+' | '+d.gatename[a].gatedate+'<br>');
}
break
}
}
document.getElementById('mydiv').innerHTML=txt;
}
</script>

</head>
<body>
<form action="">
<select onchange="this.selectedIndex>0?displayProject(this.value):null;">
<option value="">- select a project id -</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</form>
<div id="mydiv"></div>
</body>
</html>

korssane
09-12-2011, 01:00 PM
Hi xelawho,

we're on the right path and thsnks for the time you spent to help me..

Is there a way to have number of field changing with number of element..I see that the dropt dopwn list for project id "1" shows only 3 rows ..is there a way the number of rows (fields ) change with number of gates related to the project ..

i tried to add 2 elements for project 1 but i still see 2 gates in the display

var ProjectID = ["1","2","3","1","1","1"];
var ProjectGate = ["gate1", "gate2","gate1","gate2","gate3","gate4"];
var ProjectgateDate = [{date:'June 1'},{date:'Dec 3'},{date:'Apr 20'}, {date:'May 20'}, {date:'June 20'},{date:'July 20'} ];


is there a way to add dynamic fields based on number of elements ?

thanks

xelawho
09-12-2011, 04:28 PM
there is. only problem is, I can't figure out how to reset the process, so changing the DDL makes the collection of text boxes grow and grow and grow :eek:

maybe someone who actually knows what they're doing might like to take a look...


<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="UTF-8">
</head>
<body>
<style type="text/css">
div{
font-weight:bold;

}
.column{
float:left;
}
</style>
<form name="myform">
<div><select id="projects" onChange="showRecord()"><option selected>Please choose a project</option></select></div>
<div id="wrapper" style="display:none">
<div id="columnwrap" style="width:100%; overflow:auto">
<div class="column" id ="col1"> Project ID:<br></div>
<div class="column" id ="col2">Project Gate:<br></div>
<div class="column" id ="col3"> Project Gate Date:<br></div>
</div>
<div>Comments:<br><textarea id="comments" cols="50" rows="15"></textarea></div>
<input type="button" id="gate" value ="submit" onclick="javascript:alert('I don\'t know how to submit forms - you\'ll have to ask someone else')"></input>
<input type="button" id="gate" value ="clear form" onclick="clearBoxes(); clearList()"></input>
</div>
</form>

<script type="text/javascript">
var listcount=0;
var ProjectID = ["1","2","3","1","1","1"];
var ProjectGate = ["gate1", "gate2","gate1","gate2","gate3","gate4"];
var ProjectgateDate = [{date:'June 1'},{date:'Dec 3'},{date:'Apr 20'}, {date:'May 20'}, {date:'June 20'},{date:'July 20'} ];

if (ProjectID.length==ProjectGate.length&&ProjectGate.length==ProjectgateDate.length) {
for (var k=0; k<ProjectGate.length; k++) {
listcount++;
var optn = document.createElement("OPTION");
optn.text = "Project " +listcount;
document.myform.projects.options.add(optn);
}

function showRecord(){
document.getElementById("wrapper").style.display="inline";
var boxcount=0;
clearBoxes();
var a=document.getElementById("projects").selectedIndex-1;
var projID=ProjectID[a];
for (var k=0; k<ProjectID.length; k++) {
if (projID==ProjectID[k]) {
boxcount++;
var idDiv=document.createElement('div');
idDiv.innerHTML ='<input type="text" id="id'+boxcount +'" readonly="readonly"></input>';
document.getElementById("col1").appendChild(idDiv);
var gateDiv = document.createElement('div');
gateDiv.innerHTML ='<div><input type="text" id="gate'+boxcount +'" readonly="readonly"></input></div>'
document.getElementById("col2").appendChild(gateDiv);
var dateDiv = document.createElement('div');
dateDiv.innerHTML='<div><input type="text" id="date'+boxcount +'"></input></div>'
document.getElementById("col3").appendChild(dateDiv);
document.getElementById("id"+boxcount).value=ProjectID[k];
document.getElementById("gate"+boxcount).value=ProjectGate[k];
document.getElementById("date"+boxcount).value=ProjectgateDate[k].date;
}
}
}

function clearBoxes () {
var elLength = document.myform.elements.length;
for (i=0; i<elLength; i++) {
els=document.myform.elements[i];
if (els.type=="text"||els.type=="textarea"){
els.value=""
}
}
}

function clearList () {
document.getElementById("projects").selectedIndex=0;
}
}</script>
</body>
</html>

xelawho
09-12-2011, 05:57 PM
never mind. nailed it :D

and I may have even learned something.

again, there are probably infinite ways to do this more elegantly...


<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="UTF-8">
</head>
<body>
<style type="text/css">
div{
font-weight:bold;

}
.column{
float:left;
width:12%
}
</style>
<form name="myform">
<div><select id="projects" onChange="showRecord()"><option selected>Please choose a project</option></select></div>
<div id="wrapper" style="display:none">
<div id="columnwrap" style="width:100%; overflow:auto">
<div style="width:100%; overflow:auto">
<div class="column">Project ID:</div><div class="column">Project Gate:</div><div class="column">Project Gate Date:</div></div>
<div class="column" id ="col1"> </div>
<div class="column" id ="col2"></div>
<div class="column" id ="col3"> </div>
</div>
<div>Comments:<br><textarea id="comments" cols="50" rows="15"></textarea></div>
<input type="button" id="gate" value ="submit" onclick="javascript:alert('I don\'t know how to submit forms - you\'ll have to ask someone else')"></input>
<input type="button" id="gate" value ="clear form" onclick="killNodes(); clearList()"></input>
</div>
</form>



<script type="text/javascript">
var listcount=0;
var ProjectID = ["1","2","3","1","1","1"];
var ProjectGate = ["gate1", "gate2","gate1","gate2","gate3","gate4"];
var ProjectgateDate = [{date:'June 1'},{date:'Dec 3'},{date:'Apr 20'}, {date:'May 20'}, {date:'June 20'},{date:'July 20'} ];

if (ProjectID.length==ProjectGate.length&&ProjectGate.length==ProjectgateDate.length) {
for (var k=0; k<ProjectGate.length; k++) {
listcount++;
var optn = document.createElement("OPTION");
optn.text = "Project " +listcount;
document.myform.projects.options.add(optn);
}

function showRecord(){
document.getElementById("wrapper").style.display="inline";
killNodes ();
var boxcount=0;
var a=document.getElementById("projects").selectedIndex-1;
var projID=ProjectID[a];
for (var k=0; k<ProjectID.length; k++) {
if (projID==ProjectID[k]) {
boxcount++;
var idDiv=document.createElement('div');
idDiv.innerHTML ='<input type="text" id="id'+boxcount +'" readonly="readonly"></input>';
document.getElementById("col1").appendChild(idDiv);
var gateDiv = document.createElement('div');
gateDiv.innerHTML ='<div><input type="text" id="gate'+boxcount +'" readonly="readonly"></input></div>'
document.getElementById("col2").appendChild(gateDiv);
var dateDiv = document.createElement('div');
dateDiv.innerHTML='<div><input type="text" id="date'+boxcount +'"></input></div>'
document.getElementById("col3").appendChild(dateDiv);
document.getElementById("id"+boxcount).value=ProjectID[k];
document.getElementById("gate"+boxcount).value=ProjectGate[k];
document.getElementById("date"+boxcount).value=ProjectgateDate[k].date;
}
}
}

function clearBoxes () {
var elLength = document.myform.elements.length;
for (i=0; i<elLength; i++) {
els=document.myform.elements[i];
if (els.type=="text"||els.type=="textarea"){
els.value=""
}
}
}

function killNodes () {
cols=["col1","col2","col3"];
for (i=0; i<cols.length; i++) {
col=cols[i];
var coltokill=document.getElementById(col);
if (coltokill.hasChildNodes() ){
while (coltokill.childNodes.length >= 1) {
coltokill.removeChild(coltokill.firstChild);
}
}
}
}

function clearList () {
document.getElementById("projects").selectedIndex=0;
document.getElementById("wrapper").style.display="none";
}
} else {alert("Corrupted data from source file. Please contact site administrator.")
}</script>
</body>
</html>

niralsoni
09-12-2011, 05:59 PM
Try this solution....



<HTML>
<BODY>
<FORM METHOD=POST ACTION="">
Select Project <SELECT NAME="cmbProjects" onchange="showDetails(this.value)">
<OPTION VALUE="-1">Select</OPTION>
</SELECT>
<BR><BR>
Project Details
<TABLE id="tblDetails" border="1" cellspacing="0" cellpadding="3">
<TR>
<TH>Record Id</TH>
<TH>Project Id</TH>
<TH>Gate Name</TH>
<TH>Gate Date</TH>
</TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
var RecordId = [1,2,3,4,5,6];
var projectid = [10,10,10,5,5,11];
var gatename = ['Gate1','Gate2','Gate3','Gate1','Gate2','Gate1'];
var gatedate = ['01/01/2011', '03/01/2011', '04/15/2011', '01/05/2011', '03/10/2011', '03/10/2011'];

var uniqueProjectIds = [], opt, temp = [];
for(var i = 0; i < projectid.length; i++) {
if(uniqueProjectIds[projectid[i]] == null) {
uniqueProjectIds[projectid[i]] = [];
opt = document.createElement('option');
opt.text = projectid[i];
opt.value = projectid[i];
document.forms[0].cmbProjects.add(opt);
}
temp = uniqueProjectIds[projectid[i]];
temp.push(i);
uniqueProjectIds[projectid[i]] = temp;
}

function showDetails(val) {
var tbl = document.getElementById('tblDetails');
while(tbl.rows.length != 1) {
tbl.tBodies[0].deleteRow(tbl.rows.length-1);
}
if(val != '-1') {
var dtls = uniqueProjectIds[val];
for(var i = 0; i < dtls.length; i++) {
var row = tbl.tBodies[0].insertRow(tbl.rows.length);
row.insertCell(0).innerHTML = RecordId[dtls[i]];
row.insertCell(1).innerHTML = projectid[dtls[i]];
row.insertCell(2).innerHTML = gatename[dtls[i]];
row.insertCell(3).innerHTML = gatedate[dtls[i]];
}
}
}
//-->
</SCRIPT>
</BODY>
</HTML>


Thanks & Regards,
Niral Soni

xelawho
09-12-2011, 06:16 PM
Nice, but I get a "not enough arguments" error at line 32 in FF

where were you yesterday? ;)

korssane
09-12-2011, 06:56 PM
Niralsoni & xelawho,

you are both amazing . That was exactly what i was looking at..
thanks so much for your time and your patience with me...

Have a great day !!

korssane
09-12-2011, 06:58 PM
The not enough argument happens only when using Mozzila and not IE ?
On IE it does show the resul but there is a warning that might not work properly ...any fix for that experts ?

xelawho
09-12-2011, 07:11 PM
that's right. If you change this line:
document.forms[0].cmbProjects.add(opt);

in niralsoni's code to
document.forms[0].cmbProjects.add(opt,undefined);

it seems to work fine in both :thumbsup:

korssane
09-12-2011, 07:24 PM
it did the trick

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum