Soo Close with thid editable (data grid) Data Table 1

timgerr · Jun 19, 2007

Hey all, I have been wanting to create a on the fly editable data table so I have done so. I have so me little things that I need to do like remove divs that are not needed anymore. This code work in FireFox and IE but the formating is wrong in IE, Can someone take a look at this and let me know what I am doing wrong?
If you click on a box, you can edit the information on the fly. In FF all is good, in IE the boxes shift.

Here is the code

Code:

<html>
	<head>
		<title>Grid v.01</title>

		
		<style type="text/css">
			
			.t1, .t2, .t3, .t4, .c1, .c2, .c3, .c4, .yes, .no {
				display: block;
				float: left;
				width:1000px;
				padding:1px;
				margin:2px;
			}
			.t1, .t2, .t3, .t4 {
				width: 200px;	
				background-color:#8FABFF;
				font-weight:bold;				
			}
			.t3 {
				width: 100px;
			}
			.t4 {
				width: 100px;
			}
			.c1, .c2, .c3, .c4{
				width: 200px;
				background-color:#DBF4FF;
			}
			.c3 {
				width: 100px;
			}
			.c4 {
				width: 100px;
			}
			.yes {
				width:100px;						
			}
			.no {
				width:30px;
			}
			br {
				clear: left;
			}
			

		</style>
		<script type="text/javascript" src="../prototype.js"></script>
		<script type="text/javascript">
			
			var elemets = {
			/*
			 * This is the top div that will house 2 seperate divs, 1 is visibal and that other is hidden.
			 */
				newTopElement : function(divID, container) 
				{
					// Creating the top div
					var e = document.createElement("DIV");
					e.id = divID;
					$(container).appendChild(e);				
				},
				newChildElement : function(divID,container,cName,Info)
				{
					/*
					 * Creating the first div, this will have the innerHTML populated with data from the database
					 */
					var e = document.createElement("DIV");
					e.id = divID;												// This is the div id
					e.className = cName;			
					e.onclick = function() {HideMe(divID)};						// This is the call name
					$(container).appendChild(e);								// Appending the information to the parent div
					$(divID).innerHTML = Info;									// This is what will be displayed
					/*
					 * This dive is hidden and will house a textbox when pressed.
					 */
					var b = document.createElement("DIV");
					b.id = divID + 'change';
					//b.className = cName;
					b.style.display = "none";
					$(container).appendChild(b);				
				},
				newBreak : function(container)
				{
					var e = document.createElement("BR");						// Creating the break element
					$(container).appendChild(e);
				}
			}
			
			
			function init(what)
			{	
				/*
				 * I am going to create the datagrid (tabledata) on the fly
				 * elemets.newChildElement(ne+'M',ne,'c1', what.tools[x].manufacturer);
				 * ne+M is the name of the new div for that element
				 * ne is the name if the parent element
				 * c1 is the name of the class
				 */
				var x = 0;
				while(x < what.tools.length){
					var ne = 'r' + x;	
					elemets.newTopElement(ne,'container');
					elemets.newChildElement(ne+'M',ne,'c1', what.tools[x].manufacturer);
					elemets.newChildElement(ne+'N',ne,'c2', what.tools[x].name);
					elemets.newChildElement(ne+'V',ne,'c3', what.tools[x].version);
					elemets.newChildElement(ne+'E',ne,'c4', what.tools[x].experence);	
					elemets.newBreak(ne);	
					x++;
				}
			}
			
			function HideMe(what)
			{
				var tempHold = $(what).innerHTML;
				//$(what).innerHTML = '';
				$(what).style.display = 'none';
				$(what + 'change').style.display = 'block';
				
				var d = document.createElement('Input');
				d.setAttribute("type","text");
				d.setAttribute("class", $(what).className);
				d.setAttribute("value", $(what).innerHTML);
				d.setAttribute("id", what + 'temptext');
				d.onblur = function() {updateData(what)};
				$(what + 'change').appendChild(d);
								
			}
			
			function updateData(what)
			{
				// First thing that I have to do is get the parent ID so I can make sure I delete the correct child ID
				var a = document.getElementById(what).parentNode ;		
				// I am now taking what is in the text box and adding it to the innerhtml of the hidden div
				$(what).innerHTML = ($F(what + 'temptext'));
				// I am now hidding the textbox.
				$(what + 'temptext').style.display = 'none';
				// I am now unhiding the div
				$(what).style.display = 'block'
				
				// Finish working with the data located in 
				
			}
			
			var data = { "tools" : [
										{"manufacturer":"Microsoft","name":"windows server","version":"15874","experence":"Expert"},
										{"manufacturer":"Microsoft","name":"Visio","version":"Pro","experence":"Good"},
										{"manufacturer":"Telelogic","name":"Doors","version":"8.55d","experence":"Good"}
									]}
		</script>		
	</head>
	<body onload="init(data)">
		<h1>Click on a box</h1>
		<div id="masterHeader">
			<div class="t1">Manufacturer </div>
			<div class="t2">Name</div>
			<div class="t3">Version</div>
			<div class="t4">Experience</div>
			<br />
		</div>
		<div id="container">
			
			</div>
		</div>
		<br/>
		<br/>
		<br/>

		<div id="putHere">Put Here</div>
		
	</body>
</html>

Thanks again.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

BillyRayPreachersSon · Jun 19, 2007

Which version of IE is it broken in? 5? 6? 7?

What version of Prototype are you using?

Do you have a URL? It would be a lot easier to debug than downloading Prototype.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

timgerr · Jun 20, 2007

Here is an example of the script:

http://www.gsecurityone.com/grid_example/

Thanks,
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

The wrapping is occuring in IE because when you change the className here (highlighted)

Code:

         function HideMe(what)
         {
            var objRegExp = /[E]document.getElementById/;
            document.getElementById(what).style.display = 'none';
            document.getElementById(what + 'change').style.display = 'block';
            if(objRegExp.test(what)){
               var s = document.createElement('Select');
               [!]s.setAttribute("class", document.getElementById(what).className);[/!]
               s.onblur = function() {updateData(what)};

IE is only taking the first declaration of the classname, where FF is adding/overwriting as it hits more declarations of the same class.

Take .c1:

Code:

			.t1, .t2, .t3, .t4, [!].c1[/!], .c2, .c3, .c4, .yes, .no {
				display: block;
				float: left;
				width:1000px;
				padding:1px;
				margin:2px;
			}



			[!].c1[/!], .c2, .c3, .c4{
				width: 200px;
				background-color:#DBF4FF;
			}
			.c3 {
				width: 100px;
			}
			.c4 {
				width: 100px;
			}

When I looked at the elements in IE, they don't inherit the background-color and they are 1000px wide, proof that only the top declaration of the class is getting applied in IE.

[monkey]

<.

ggriffit · Jun 20, 2007

There is a good sample of this type of thing at

http://builder.com.com/5100-6370_14-5533726-1-1.html

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/

timgerr · Jun 20, 2007

OK so IE doubles the class element? Is there a way to have IE inherent like FF?

Thanks for the help,
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

Well you can make new classes for the input elements by combining what you need and assign the className to that new class

example .c1 becomes this:

Code:

.c1Input {
   display: block;
   float: left;
   padding:1px;
   margin:2px;
   width: 200px;
   background-color:#DBF4FF;
}

Then assign the classname like this:

Code:

function HideMe(what)
{
   var tempHold = $(what).innerHTML;
   //$(what).innerHTML = '';
   $(what).style.display = 'none';
   $(what + 'change').style.display = 'block';
   
   var d = document.createElement('Input');
   d.setAttribute("type","text");
   [!]d.setAttribute("class", $(what).className + "Input");[/!]
   d.setAttribute("value", $(what).innerHTML);
   d.setAttribute("id", what + 'temptext');
   d.onblur = function() {updateData(what)};
   $(what + 'change').appendChild(d);
}

<.

timgerr · Jun 20, 2007

Thanks for the help but I am getting the same problem.

http://www.gsecurityone.com/grid_example/

Thanks
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

Remove what I have striked-out from your css.

Code:

.t1, .t2, .t3, .t4, .c1, .c2, .c3, .c4, .yes, .no[s], .c1Input, .c2Input, .c3Input, .c4Input[/s] {
				display: block;
				float: left;
				width:1200px;
				padding:1px;
				margin:2px;
			}

You only want one class declaration for the input

[monkey]

<.

timgerr · Jun 20, 2007

I have made the changes and I am getting the same problem.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

I'll take a look into it, it's kinda hard for me to test because I don't have Prototype.js

[monkey]

<.

timgerr · Jun 20, 2007

Thanks,

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

Ok I did download prototype.js and here's what I did to get it to work in IE.

For some reason, changing the className with setAttribute was not working in IE, so instead, I set the class name AFTER the input gets appended to the rest of the page.

Code:

            function HideMe(what)
            {
                var tempHold = $(what).innerHTML;
                //$(what).innerHTML = '';
                $(what).style.display = 'none';
                $(what + 'change').style.display = 'block';
                
                var d = document.createElement('Input');
                d.setAttribute("type","text");
                [s]d.setAttribute("class", $(what).className + "Input");[/s]
                d.setAttribute("value", $(what).innerHTML);
                d.setAttribute("id", what + 'temptext');
                d.onblur = function() {updateData(what)};
                $(what + 'change').appendChild(d);
                [!]d.className = $(what).className + "Input";[/!]
            }

<.

timgerr · Jun 20, 2007

OMG OMG OMG OMG OMG........ OMG OMG OMG....... (happy self moment ----> HERE <-----)

I am unable to tell you how much I want to kiss you right now.

Thanks for all the help, yet again I have learned so much from you.

May I ask you why adding the class to the bottom worked?

Thanks again...
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

I will also tell you this. The way the code is now, you can create infinite amounts of text boxes.

Since you create a new text box when you click on the div hide it when you do your update, you keep creating new textboxes and never get rid of old ones.

So you want to do this:

Code:

            function updateData(what)
            {
                // First thing that I have to do is get the parent ID so I can make sure I delete the correct child ID
                var a = document.getElementById(what).parentNode ;        
                // I am now taking what is in the text box and adding it to the innerhtml of the hidden div
                $(what).innerHTML = ($F(what + 'temptext'));
                // I am now hidding the textbox.
                [!]$(what + 'temptext').parentNode.removeChild($(what + 'temptext'));[/!]
                [s]$(what + 'temptext').style.display = 'none';[/s]
                // I am now unhiding the div
                $(what).style.display = 'block'
                
                // Finish working with the data located in 
                
            }

<.

timgerr · Jun 20, 2007

Yea I was going to do that when I solved this problem

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

Dude please don't want to kiss me, unless you are a female, and you're hot. [smile]

May I ask you why adding the class to the bottom worked?

The .setAttribute method is quirky when it comes to IE, just blame Microsoft anytime something that should work doesn't.

[monkey]

<.

timgerr · Jun 20, 2007

Dude please don't want to kiss me, unless you are a female, and you're hot.

For all the help that you have given me I can be

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 20, 2007

<.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Soo Close with thid editable (data grid) Data Table 1

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor