[RESOLVED] Fill Down Textbox Values

[bftrs2]

Fang helped me out a lot by showing me a simple slick fill down script but I'm having trouble implementing it in to the MooGrid I'm using to display the data.

The error message I get is "aObj[down[col]] is undefined" and I believe the error comes from the script not finding the correct table and column to work with. I'm new to DOM tree navigation and wondered if someone could give me a hand.

The page I'm building is located here:
http://bftrs2.mainvista.com/test/test.html

And the external js file that builds the grid is here:
http://bftrs2.mainvista.com/test/jav..._compressed.js

I appreciate your taking the time to look at it!

[bftrs2]

Looking over the code further I find that the dynamic table isn't a table, but a series of DIVs to display the data in a grid (that's how they get the fixed columns/rows and the double scrolling going so well).


So now my question is how to fill down the value of the last inputted textbox in a column of divs? My example has dynamic number of divs to make the columns/rows.

[Fang]

/*  Fill Down */
window.onload=function() {
var aObj = document.getElementsByTagName('input');
var i = aObj.length; 
while(i--) { 
    if(aObj[i].type=='text') {
        aObj[i].onchange = function() {lastChoice(this.name);};
        }
    else {
        aObj[i].onclick = function() {fillDown(this);};
        }
    }
};

function lastChoice(ref) {
var needle = /grade(\d+)_(\d+)$/i;
ref.match(needle);
down[(RegExp.$2)] = RegExp.$1;
}	

var down = [];
function fillDown(obj) {
// button column
var aObj = document.getElementsByName('copy');
var len = aObj.length; 
for(var i=0; i<len; i++) {
if(aObj[i]==obj) {
    var col = i;
    break;
    }
}
// fill
var aObj = document.getElementsByTagName('input');
var len = aObj.length; 
var idx = down[col];
var lastName = 'grade'+idx+'_'+col;
var val = document.getElementsByName(lastName)[0].value;
for(var i=0, count=0; i<len; i++) {
    if(aObj[i].name==lastName) {
        aObj[i].value = val;
        lastName = 'grade'+(++idx)+'_'+col; 
        }
    }
}
/* End Fill Down */

[bftrs2]

This is brilliant! Thanks!

Upon putting the script on my page it worked first try in FF with no errors; however, it's not working in IE8 and I'm not getting an error code to give me a clue where to look.

I'll do a little research and see if I can figure out the problem but I'd love some ideas of where to start.

Again, brilliant script, thanks!

[Fang]

It's the order of loading.
Change the window.onload=function() to:

/*  Fill Down */
function initFillDown() {
var aObj = document.getElementsByTagName('input');
var i = aObj.length; 
while(i--) { 
    if(aObj[i].type=='text') {
        aObj[i].onchange = function() {lastChoice(this.name);};
        }
    else {
        aObj[i].onclick = function() {fillDown(this);};
        }
    }
}

and

		window.addEvent("domready", function(event) {
			var myGrid = new MooGrid("demoDiv", {
				allowGridResize : true, 
				allowColumnResize : true, 
				allowSelections : true, 
				allowMultipleSelections : true, 
				fixedCols : 7, 
				srcType : "json_local", 
				// xml_remote : "data_v2.xml", 
				// xml_local : $("srcXml").value, 
				// json_remote : "data_json_v2.txt", 
				json_local : jsonData
			});
		initFillDown();
		});

[bftrs2]

Thanks for saving me a few hours of debugging!

Really nice code, simple and even someone who is not that good at JavaScript can read it and understand it!

=D

[bftrs2]

With more testing I find it won't work with a 0 as a value but does work well with other odd things like 10.4

[Fang]

works OK in my test document. Have you changed the default values of the inputs?
Try with onblur

function initFillDown() {
var aObj = document.getElementsByTagName('input');
var i = aObj.length; 
while(i--) { 
    if(aObj[i].type=='text') {
        aObj[i].onblur = function() {lastChoice(this.name);};
        }
    else {
        aObj[i].onclick = function() {fillDown(this);};
        }
    }
}

[bftrs2]

That fixed it! I switched onchange to onblur and now it accepts 0 as a value.

Many thanks!

[bftrs2]

One more question Fang....if I wanted to use the id (which are the same as the name) rather than the name would I simply change:

/*  Fill Down */
	function initFillDown() {
	var aObj = document.getElementsByTagName('input');
	var i = aObj.length; 
	while(i--) { 
	    if(aObj[i].type=='text') {
		aObj[i].onblur = function() {lastChoice(this.id);};
		}
	    else {
		aObj[i].onclick = function() {fillDown(this);};
		}
	    }
	};
	
	function lastChoice(ref) {
	var needle = /grade(\d+)_(\d+)$/i;
	ref.match(needle);
	down[(RegExp.$2)] = RegExp.$1;
	}	
	
	var down = [];
	function fillDown(obj) {
	// button column
	var aObj = document.getElementsByName('copy');
	var len = aObj.length; 
	for(var i=0; i<len; i++) {
	if(aObj[i]==obj) {
	    var col = i;
	    break;
	    }
	}
	// fill
	var aObj = document.getElementsByTagName('input');
	var len = aObj.length; 
	var idx = down[col];
	var lastName = 'grade'+idx+'_'+col;
	var val = document.getElementById(lastName)[0].value;
	for(var i=0, count=0; i<len; i++) {
	    if(aObj[i].id==lastName) {
		aObj[i].value = val;
		lastName = 'grade'+(++idx)+'_'+col; 
		}
	    }
	}
	/* End Fill Down */

When I tried this initially I was getting the error getElementById(lastName)[0] is undefined.

[Fang]

Why add id when name is already unique?
It probably won't work as the reference, in this case, to this returns the name and not an object reference.

[bftrs2]

I wanted to switch to id because I already have some php written that uses a different name that I'd like to use with it. I can see if I can change the name referenced in the php to match what is used here. Thanks!

[bftrs2]

For those that may be interested, here's the code changed to handle the id attribute instead of the name attribute. It's running good now:

/*  Fill Down */
	function initFillDown() {
		var aObj = document.getElementsByTagName('input');
		var i = aObj.length; 
		while(i--) { 
			if(aObj[i].type=='text') {   // onchange to onblur (some instances onchange wasn't allowing a 0 as a value)
			    aObj[i].onblur = function() {lastChoice(this.id);};  // changed this.name to this.id
			} else {
			    aObj[i].onclick = function() {fillDown(this);};
			}
		}
	};
	
	function lastChoice(ref) {
		var needle = /points(\d+)_(\d+)$/i;
		ref.match(needle);
		down[(RegExp.$2)] = RegExp.$1;
	}	
	
	var down = [];
	function fillDown(obj) {
		// button column
		var aObj = document.getElementsByName('copy');
		var len = aObj.length; 
		for(var i=0; i<len; i++) {
			if(aObj[i]==obj) {
			    var col = i;
			    break;
			}
		}
		// fill
		var aObj = document.getElementsByTagName('input');
		var len = aObj.length; 
		var idx = down[col];
		var lastName = 'points'+idx+'_'+col;
		var val = document.getElementById(lastName).value;  // changed document.getElementsByName[0] to document.getElementsById
		for(var i=0, count=0; i<len; i++) {
			if(aObj[i].id==lastName) {   // changed aObj[i].name to aObj[i].id
			    aObj[i].value = val;
			    lastName = 'points'+(++idx)+'_'+col; 
			}
		}
	}
	/* End Fill Down */

[bftrs2]

Oh, I almost forgot, a big THANK YOU for your help. I wouldn't have been able to write this script from scratch so I really appreciate you're taking the time to work with me. I'm starting to understand a little better JavaScript and jquery, but I have a super long way to go =)