Focus and Document.getElementById issues

**zinjamaster** · 10-11-2007, 05:56 PM

1) Script Title:
DHTML Window Script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...ndow/index.htm
3) Describe problem:
I have issues with setting the value property of text boxes and also with focus and onChange events. In Firefox, most things work fine. I can set the focus using

Code:

document.getElementById('text1').focus();

However, in IE - the first time the page loads, it will work, but after that - no worky. I imagine it has something to do with the method I am using to render html.

I also can use the onChange event in Firefox with no issues - IE ignores the ENTER key after changing the value in the textbox, the TAB key works, but not the ENTER key.

Here is a brief rundown of how I am rendering the html:

I have references to my main javascript on a PHP script (index.php). Using the window.onload event (in allcarepos.js) , I execute a function to get things started. Here is some of my code (I hope it is enough to help figure this out)

file: index.php

Code:

echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>";
		echo "<html xmlns='http://www.w3.org/1999/xhtml'>";
		echo "<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' />";
		echo "<head>";
		
		echo "<link rel=\"stylesheet\" href=\"css/selrow.css\" type=\"text/css\">";
		echo "<link rel=\"stylesheet\" href=\"windowfiles/dhtmlwindow.css\" type=\"text/css\">";
		echo "<link rel=\"stylesheet\" href=\"modalfiles/modal.css\" type=\"text/css\">";
		echo "<link rel=\"stylesheet\" href=\"css/acpos.css\" type=\"text/css\">";
	
		
		echo "<script type='text/javascript' src='xmlhttp.js'></script>";
		echo "<script type='text/javascript' src='acpos_functions.js'></script>";
		echo "<script type='text/javascript' src='windowfiles/dhtmlwindow.js'></script>";
	    echo "<script type='text/javascript' src='modalfiles/modal.js'></script>";
	
		
		if ($_GET['req'] <> 'noregister')
		{
			echo "<script type='text/javaScript' src='allcarepos.js'></script>";
		}
		
		echo "</head>";
		
		echo "<body bgcolor=\"#B9D6F0\" leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\" scroll=\"no\">";
		echo "<table id=\"Table_01\" width=\"1024\" height=\"768\" 
			border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
		echo "<tr>";
		echo "<td colspan=\"7\">";
		echo "<img src=\"images/index_new_01.png\" width=\"1024\" height=\"122\"></td>";
		echo "</tr>";
		echo "<tr>";
		echo "<td rowspan=\"2\">";
		echo "<img src=\"images/index_new_02.png\" width=\"444\" height=\"646\"></td>";
		echo "<td>";
		echo "<img src=\"images/index_new_03.png\" width=\"133\" height=\"29\" 
			border=\"0\" alt=\"Cash Register\" onClick=\"javascript: viewregister();\"></a></td>";
		echo "<td>";
		echo "<a href=\"reports/reports.php?cmd=Init\",\"reports\",\"toolbar=no,
			scrollbars=yes,resizable=yes\"\" target=\"_blank\">
			<img src=\"images/index_new_04.png\" width=\"98\" height=\"29\" 
			border=\"0\" alt=\"Reports Menu\"></a></td>";
		echo "<td rowspan=\"2\">";
		echo "<img src=\"images/index_new_05.png\" width=\"4\" height=\"646\"</td>";
		echo "<td>";
		echo "<a href=\"admin/admin.php\" target=\"_self\">";
		echo "<img src=\"images/index_new_06.png\" width=\"89\" height=\"29\" 
			border=\"0\" alt=\"Administration\"></a></td>";
		echo "<td>";
		echo "<a href=\"index.php?req=logout\" target=\"_self\">
			<img src=\"images/index_new_07.png\" width=\"116\" height=\"29\" 
			border=\"0\" alt=\"Logout\"></a></td>";
		echo "<td rowspan=\"2\">";
		echo "<img src=\"images/index_new_08.png\" width=\"140\" height=\"646\"></td>";
		echo "</tr>";
		echo "<tr>";
		echo "<td colspan=\"2\">";
		echo "<img src=\"images/index_new_09.png\" width=\"231\" height=\"617\"></td>";
		echo "<td colspan=\"2\">";
		echo "<img src=\"images/index_new_10.png\" width=\"205\" height=\"617\"></td>";
		echo "</tr>";
		echo "</table>";
			
		echo "<div id='dialogdiv'>" 
			."<div style='height: 700px; float : right; width : 500px;'>"
			."</div></div>";   
		
		echo "</body>";
		echo "</html>";

file: allcarepos.js

Section: Bottom of script (outputs the register html and makes some buttons)

Code:

if (!gotstoreinfo)
{
	getstoreinfo();
	if (gotstoreinfo)
	{
		window.onload=viewregister;
	}
	else
	{
		window.location = "index.php?req=noregister";
	}
}

// @writedocument
	document.write('<div id="register" class="register" style="' + cssRegister + '">'+
               '<table border="0" cellspacing="0" cellpadding="1" style="' + cssRegister + '">' +
               '<tr><td colspan="' + Width + '"align="right" class="titlebar" style="' + cssTitleBar + '">' +
   			   'Current User: ' + currentuser +
               '</td></tr>' +
               '<tr>' +
			   '<td colspan="7" align="center">' +
   			   '<div id="regstatus" style="' + cssStatus + '"></div>' +
              
			   '<div id="regdisplay" style="' + cssDisplay + '"></div>' +
			  
   			   '<div id="regsubtotal" style="' + cssSubTotal + '"></div>' +
   			   '<div id="regtaxamount" style="' + cssSubTotal + '"></div>' +
   			   '<div id="reginput" style="' + cssInput + '"></div>' +
			   '<div id="regtotal" style="' + cssTotal + '"></div>' +
			   '<div style="width:100%;height:10px;position:relative;top:0px;left:0px;"></div>' +
               '</td><td colspan="4" align="center"><div id="RxSign" style="' + cssRxSign + '"></div>' +
			   '<div style="width:100%;height:50px;position:relative;top:0px;left:0px;"></div></td></tr>' + 
			   '<tr>' + makebuttons() +  '</tr></table></div>');

	if(DOM)
	{
		obj = document.getElementById('register');
	}
	else if(IE4)
	{
		obj = document.all.register;
	}
	if(obj)
	{
		sobj = obj.style;
	}

Same file - this is where I have my createwindow function:

Code:

function createwindow(parameters)
{
	dialogopen=true;
	var divid = parameters['divid'];
	var title = parameters['title'];
	var text = parameters['text'];
	var width = "width=" + parameters['width'] + "px";
	var height = "height=" + parameters['height'] + "px";
	var resize = "resize=" + parameters['resize'];
	var scrolling = "scrolling=" + parameters['scrolling'];
	var center = "center=" + parameters['center'];
	var settings = "'" + width + "," + height + "," + resize + "," + scrolling + "," + center + "'";
	var mydiv = document.getElementById(divid);	
	var firstinput = parameters['firstinput'];
	var myhtml = "";
	myhtml+= ' <form action="" onsubmit="return false;" name="dialogform" id="dialogform" class="dialog">';
	myhtml+= ' <table id="dialogtable" cellspacing="0">';
	
	myhtml+= parameters['html'];				  
				  
	myhtml+=	'</table>';
	myhtml+=	'</form>';
	
	mydiv.innerHTML=myhtml;
	dialog=dhtmlwindow.open('mywin', 'div', divid, title, settings);
		
	document.getElementById(firstinput).value="";
	document.getElementById(firstinput).focus();
	
}

Those last two lines don't work (except the first time the page loads) in IE, but work consistently in Firefox

Same file - a sample call to the createwindow function:

Code:

winparameters = {
								divid:		"dialogdiv",
								title:		"Receive on Account",
								text:		"Enter Account Name",
								width:		250,
								height:		200,
								center:		1,
								resize:		0,
								scrolling:	0,
								html:		'<input type="text" size="30" tabindex="1" name="text1" value="" id="text1" maxlength="30"' +
											'class="dialogform" onChange="ROA(this);"  />'+
											'<br>' +
											'Medicaid?<input type="checkbox" class="bigcheck" id="sig" name="sig" tabindex="1" />' +
											'<br>' +
											'<input type="Submit" value="OK" class="dialogbutton" onClick="ROA(this);" />' +
											'<input type="button" value="Cancel" class="dialogbutton" onClick="killwindow();" />',
											
								firstinput:	"text1"
							}
		
		createwindow(winparameters);

What am I doing wrong? Thanks in advance for any help. If it wasn't for the ActiveX support - I would have my users use FF, but I have to have support for IE.

Thanks,

LJ Wilson

**ddadmin** · 10-12-2007, 12:06 AM

This might be due to the fact that your form IDs become duplicated when you use the "div" option of the DHTML window widget to grab its contents:

Code:

mydiv.innerHTML=myhtml;
dialog=dhtmlwindow.open('mywin', 'div', divid, title, settings);
		
document.getElementById(firstinput).value="";
document.getElementById(firstinput).focus();

This occurs because what the script does is copy the contents of mydiv on the page into the DHTML window. If this is the problem, try using the "inline" option instead, and directly feed the dynamically created HTML variable into it, something like:

Code:

dialog=dhtmlwindow.open('mywin', 'inline', divHTML, title, settings);

Assuming "divHTML" is the variable containing the HTML to render.

**zinjamaster** · 10-12-2007, 02:18 PM

ddadmin,

Thanks for the reply - that did nothing to help. It still displays and looks the same, but it probably more efficient. I removed the div declaration from index.php and changed the method to "inline" in my js file. IE still will not process the form using the ENTER key and focus does not get applied to the first form element (except the first time the page loads). Firefox also has the issue of not executing the:

Code:

document.getElementById('text1').value="";

I have also tried using:

Code:

document.forms.dialogform.text1.value="";

to no avail. Any other ideas? This is very frustrating and I am thinking it must have something to do with that document.write I am doing in my js script, but I have done similar things before without issues.

Thanks in advance!,

LJ Wilson

**ddadmin** · 10-14-2007, 06:13 AM

I ran some tests. Try adding a slight delay before trying to select the textbox in IE. For example, the following works even after the initial load (click on the link):

Code:

<script type="text/javascript">

var data='<form id="testform"><input type="text" id="test" size="40"/></form>'

function testwindow(thevalue){
var inlinewin=dhtmlwindow.open("broadcastbox", "inline", data, "#2: Broadcast Title", "width=300px,height=120px,left=150px,top=10px,resize=1,scrolling=0", "recal")
document.getElementById("test").value=thevalue
setTimeout('document.getElementById("test").select()', 100)
}

testwindow('Bob')

</script>

<a href="#" onClick="testwindow('Jane'); return false">Show Window</a>

**zinjamaster** · 11-06-2007, 03:40 PM

That didn't work either. I found out something that will make the input element receive the focus everytime in IE. If I add:

Code:

alert(element.value);

right before I try to set the focus - it works (after I acknowledge the alert).

Here is what I am using:

Code:

// @createwindow
function createwindow(parameters)
{
	dialogopen=true;
	var divid = parameters['divid'];
	var title = parameters['title'];
	var text = parameters['text'];
	var width = "width=" + parameters['width'] + "px";
	var height = "height=" + parameters['height'] + "px";
	var resize = "resize=" + parameters['resize'];
	var scrolling = "scrolling=" + parameters['scrolling'];
	var center = "center=" + parameters['center'];
	var settings = "'" + width + "," + height + "," + resize + "," + scrolling + "," + center + "'";
	//var mydiv = document.getElementById(divid);	
	var firstinput = parameters['firstinput'];
	var myhtml = "";
	myhtml+= ' <form action="" onsubmit="return false;" name="dialogform" id="dialogform" class="dialog">';
	myhtml+= ' <table id="dialogtable" cellspacing="0">';
	
	myhtml+= parameters['html'];				  
				  
	myhtml+=	'</table>';
	myhtml+=	'</form>';
	
	//mydiv.innerHTML=myhtml;
	dialog=dhtmlwindow.open("mywin", "inline", myhtml, title, settings);
		
	var element = document.getElementById('text1');
	alert(element.value);
	element.value="";
	element.focus();
	//document.getElementById('text1')..focus();
	//setTimeout('document.getElementById("text1").select()', 100)
	
}

Obviously, I cannot have that alert in there for production, but it does make it get the focus everytime in IE. I was hoping that this would help you troubleshoot the problem. I have come up empty.

Thanks!

LJ Wilson

**ddadmin** · 11-06-2007, 09:39 PM

The alert() is what creates a delay, so the solution I had posted should also work:

Code:

setTimeout('document.getElementById("test").select()', 100)

Try changing 100 to a larger number then, such as 1000 (to create a 1 second delay).

Also, are you using the latest version 1.1 of the script? It contains an enhancement to the script dealing with inline DIV content.

**zinjamaster** · 11-07-2007, 08:35 PM

You were right. That delay did work as soon as I put it in the right place. I had it below the focus() call previously (DOH!). Anyway, thanks for the advice - what changes were made in the newer version?

LJ

**ddadmin** · 11-07-2007, 11:13 PM

Originally Posted by zinjamaster

What changes were made in the newer version?
LJ

Here you go: http://www.dynamicdrive.com/dynamici.../changelog.txt

Thread: Focus and Document.getElementById issues

Thread Tools

Search Thread

Focus and Document.getElementById issues

Bookmarks

Bookmarks

Posting Permissions