[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 287
  • Last Modified:

How to : Display table and select a cell to return value from a div

I am hoping someone can help me with how to accomplish this.   I am a beginner with this stuff so please be patient.

I have cobbled together a web app for displaying client information using ajax.  When I locate a client by a unique id like contract_no  everything works fine.  On the server side I put the returned info into an xml file and then convert it into a table for display in a div.  It works exactly as I need it to.  (thanks to help from here!)  My problem is when my search criteria is last_name I may have multiple records I need to select from.  

What I need to do is take the returned records (choices), populate a table and show it to my user in what would be a, I guess, hidden div or popup.  (I have been playing with tinybox for days with no luck)  I need them to be able to select the cell that contains, lets say the correct john smith, and then run my selection function again with that contract_no and then close the div-popup- or whatever.

Any help on how to achieve this would be greatly appreciated.

Thank you

Charlie

0
Charlietn
Asked:
Charlietn
  • 12
  • 10
1 Solution
 
COBOLdinosaurCommented:
Just capture the innerHTML of the selected element with an onClick event that runs a function that closes the popup div and launches the new xmlhttp event:

<div onClick="myFunction(this.innerHTML)"> John Smith id:444</div>

Open in new window


You have not posted any code so I don't know what the actual stucture and contents look like, but I think you just have to parse out the data you need to make the unique identification, and then you are off to the races.
0
 
COBOLdinosaurCommented:
OOP!

Displaying the data.

Create the popup with these CSS properties:

#hiddenBox{position:absolute;top:100;left:100;z-index:10;display:none}
// add additional properties for dimensions and appearance as required.
// this assumes you have created the element with an id of 'hiddenBox'

Open in new window


when you want it to show use Javascript to change the display property value:

document.getElementById('hiddenBox').style.display='block';   //shows it
document.getElementById('hiddenBox').style.display='none';  // hides it again

Open in new window

0
 
CharlietnAuthor Commented:
so <div onClick="myFunction(this.innerHTML)"> John Smith id:444</div>  will automatically operate on the cell I am on regardelss of how many rows are in the table?

Thanks
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
COBOLdinosaurCommented:
Every element that has that onClick event will return its contents. So in this case the function would receive the string "John Smith id:444". The function would get the value in its parameter so:

function myFunction(x)
{
   alert(x);
}
Would display John Smith id:444

All the function has to do is parse out the part you need to run your selection processing.
0
 
CharlietnAuthor Commented:
I am lost.   I don't understand how to make <div onClick="myFunction(this.innerHTML)"> John Smith id:444</div>   work.

I am able to get the data and display the data as I needed.  It was easy as you suggested.  

This is the code that generates the table form the xml file.

 
function displayData2(response)  
    {  
    var xmlEl2 = response.getElementsByTagName("Client");
    var table = document.createElement("table");
    table.border = "0";
	table.width="90%";
	table.height="20%";
	table.backgroundColor = "#FFFFFFF";
	table.overflow="SCROLL";
	table.align="CENTER";
	var tbody = document.createElement("tbody");
    // Append the body to the table
    table.appendChild(tbody);
    var row = document.createElement("tr");
    // Append the row to the body
    tbody.appendChild(row);
    for (colHead = 0; colHead < xmlEl2[0].childNodes.length; colHead++) {
        if (xmlEl2[0].childNodes[colHead].nodeType != 1) {
            continue;
        }
        var tableHead = document.createElement("th");
        var colName = document.createTextNode(xmlEl2[0].childNodes[colHead].nodeName);
        tableHead.align="left"
		tableHead.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";
		tableHead.style.fontSize = "12px";
		tableHead.style.backgroundColor = "#FFFFFF";
		tableHead.appendChild(colName);
        row.appendChild(tableHead);
    }
    tbody.appendChild(row);
    // Create table row
    for (i = 0; i < xmlEl2.length; i++) {
        var row = document.createElement("tr");
        // Create the row/td elements
        for (j = 0; j < xmlEl2[i].childNodes.length; j++) {
            // Skip it if the type is not 1
            if (xmlEl2[i].childNodes[j].nodeType != 1) {
                continue;
            }

            // Insert the actual text/data from the XML document.
            var td = document.createElement("td");
            var lookitup = document.createTextNode(xmlEl2[i].childNodes[j].firstChild.nodeValue);
            if (i % 2) {
                td.style.backgroundColor = "#FFFFFF";
            }
            td.align="left"
			td.height="20%"
			td.overflow="auto"
			td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
            td.style.fontSize = "12px";
			td.style.fontweight = "BOLD";
			td.appendChild(lookitup);
            row.appendChild(td);
			//td.onclick="gogetit(this.innerHTML)";
        }
        tbody.appendChild(row);
		td.onclick="gogetit(this.innerHTML)";
    }
	document.getElementById("lookitup").innerHTML="";
    document.getElementById("lookitup").appendChild(table);
	document.getElementById('lookitup').style.display='block';   //shows it

Open in new window


I added the function call to gogetit() to the end of displaydata2.  

When it returns x it is ALL of the html for the entire table is returned.  I need just the value of column 1, Contract_no, for the row I select to be returned so I can do a lookup on the contract_no.  Is that possible?

This is that simple function:
 
function gogetit(x){  
alert(x)
/// where I will do the next ajax lookup based on the return
document.getElementById('lookitup').style.display='none';
}

Open in new window


This is a screenshot. screen shot
Thanks again

Charlie
0
 
COBOLdinosaurCommented:
I didn' realize you were dynamically building the table client side.  

I think you need to attach the event before you append the td to the tr

                        td.align="left"
			td.height="20%"
			td.overflow="auto"
			td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
                        td.style.fontSize = "12px";
			td.style.fontweight = "BOLD";
			td.onclick=function(){gogetit(this.innerHTML);}

Open in new window


The this was being applied to the wrong element.

If that does not work, you may have to add an id to each cell and pass that.  Then the function would have to get the innerHTML by referencing the id with document.getElementById('passedid').innerHTML
0
 
CharlietnAuthor Commented:
Not really sure how to do that.  I will play with it.

Thanks
0
 
CharlietnAuthor Commented:
If that does not work, you may have to add an id to each cell and pass that.  Then the function would have to get the innerHTML by referencing the id with document.getElementById('passedid').innerHTML
0
 
CharlietnAuthor Commented:
If that does not work, you may have to add an id to each cell and pass that.  Then the function would have to get the innerHTML by referencing the id with document.getElementById('passedid').innerHTML

Could you point out where to add the id.  I have tried for almost 2 days with no luck.  I even  built the table a different way from another question here but i still only get all the html returned not just the info in the cell or row I click.  

Thanks
0
 
COBOLdinosaurCommented:
setAttribute should work for the id:


td.setAttribute("id","cell1");
td.align="left";
td.height="20%";
td.overflow="auto";
td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
td.style.fontSize = "12px";
td.style.fontweight = "BOLD";
td.onclick=function(){gogetit(documentgetElementById('cell1').innerHTML);};

Open in new window


You might want to try using set attribute on any property that is not setting correctly.

For testing, I would leave out the styling stuff and concentrate on getting the innerHTML, and then add the styling after you have nailed down the functionality.
0
 
CharlietnAuthor Commented:
Sorry I am so clueless.  I really appreciate your help with this.  

I think I (we) am almost there


 
td.setAttribute("id","cell1");
td.align="left";
td.height="20%";
td.overflow="auto";
td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
td.style.fontSize = "12px";
td.style.fontweight = "BOLD";
td.onclick=function(){gogetit(documentgetElementById('cell1').innerHTML);};

Open in new window


Now when I click instead of all the html populating I get the Contract_no (what I need!!!) from the first cell of the 1st row only regardless of what cell I click on.  

Thank you !

 
0
 
COBOLdinosaurCommented:
You are giving each cell a unique id and using that in the function ... right?  If not the reference will be to the first occurrence of the id.

If they are unique, look at the source after the table is generated.  That might give us a clue where we have it wrong.
0
 
CharlietnAuthor Commented:
The source shows that EVERY cell in every row has the ID of cell1

<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">426292 </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Smith </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Gary </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Aiken </td>
<td id="cell1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">SC</td>
</tr>
<tr>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">317111 </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Smith </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Lester </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Apopka </td>
<td id="cell1" height="20%" align="left" style="background-color: rgb(255, 255, 255); font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">FL</td>

Thanks again
0
 
COBOLdinosaurCommented:
Okay I was thinking you might have done that.  I should have been clearer.  You need unique Ids so use the index values to create a one of a kind string:
cellID='R'+i+'C'+j;  // that should give you R1C1... R1C2.. R1C3...R2C1... etc
td.setAttribute("id",cellID);
td.align="left";
td.height="20%";
td.overflow="auto";
td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
td.style.fontSize = "12px";
td.style.fontweight = "BOLD";
td.onclick=function(){gogetit(documentgetElementById(cellID).innerHTML);};

Open in new window


Now the id should target just a single cell.  Sorry I didn't pickup on the fact you were using the literal.  
0
 
CharlietnAuthor Commented:
Yea, the literal <G>  I feel like a freakin idiot here, spent literally 10 hrs yesterday but I still cant get it to work even with your help.  

The html (firebug)for the table comes back like this, using only odd numbers for the R + C values if that matters  The ROC1 id is exactly what I need to return, the Contract_no 426292
 
<tr>
<td id="R0C1" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">426292 </td>
<td id="R0C3" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Smith </td>
<td id="R0C5" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Gary </td>
<td id="R0C7" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">Aiken </td>
<td id="R0C9" height="20%" align="left" style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: 12px;">SC</td>

Open in new window


gogetit is returning the last value in the last row of the table.  In this case it is the state=KY
 screen shot
gogetit is as you suggested
 
function gogetit(x) 
alert(x);
document.getElementById('lookitup').style.display='none';

Open in new window


I checked it with several record sets, the last value of the last row every time.

Thanks again

Charlie  
0
 
COBOLdinosaurCommented:
OOOOOOOOOOOOPS!

td.onclick=function(){gogetit(documentgetElementById(this.id).innerHTML);};

Open in new window


cellID is still set to the value of the last id generate.  I think I need more coffee.
0
 
CharlietnAuthor Commented:
I owe you a POT full.  Thanks so much it works great.    I have a quick (for you) question.

I need to change the gogetit function to trigger a new lookup.  
 
function gogetit(x)
document.getElementById('lookitup').style.display='none'; 
document.getElementById('searchFor').value=x;

Open in new window


This does not work.  after I hide the table it does nothing.   Is there a proper syntax.  

Should I post a new question?

Thanks again
0
 
COBOLdinosaurCommented:
I assume that 'lookitup' is the id of the table, or the container it is in and 'searchFor' is the id of a form element. If that is the case, then the form element should be displaying the text we received from the cell.

However if 'searchFor' is the name of a forms element, then you should use document.forms.formname.searchFor.value to populate it (replacing formname with the name of the form) or use 'searchFor' as the id of the form element.

If 'searchFor' is not a form element you may not have a value property, and you need to put x into the innerHTML.
0
 
CharlietnAuthor Commented:
THANKS!!!!!   Ever in the Asheville, NC - Knoxville, TN area I owe you dinner.
let me know c.derosa.tn@gmail.com

0
 
CharlietnAuthor Commented:
Wonderful Wonderful Wonderful.  Thanks again
0
 
COBOLdinosaurCommented:
Glad I could help.

Thanks for the dinner offer, but I have not been to the U. S. in a long time.

BTW it is not good to post your email like that.  It can get picked up by spambots and you end up with hundreds of emails you really don't want.  You might want to ask Community Support to edit that address out.
0
 
CharlietnAuthor Commented:
Thanks for the tip.  

Again I really appreciate your patience in helping me
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 12
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now