Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

focus();

Posted on 2008-11-18
2
Medium Priority
?
336 Views
Last Modified: 2012-05-05
I can not get two functions to work at once.
I try to get information with ajax and put it in a div, and focus the input box, but it will not focus the input box.
I need both actions to happen.
<html>
<head>
<link href="../../include/chat.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function doall(){
doWork();
focusit();
}
function focusit(){
document.chathtmlform.inputText.focus()
}
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById('outputText').innerHTML += httpObject.responseText;
}
}
// Implement business logic
function doWork(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "../../chat.php?inputText="
+document.getElementById('inputText').value, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;
 
 
//check see if enter was pressed.
function checkEnter(e){ //e is event object passed from function invocation
var characterCode
 
if(e && e.which){ //if which property of event object is supported (NN4)
e = e
characterCode = e.which //character code is contained in NN4's which property
}
else{
e = event
characterCode = e.keyCode //character code is contained in IE's keyCode property
}
 
if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
doall();
}
 
}
//-->
</script>
</head>
<body>
 
<div id="outputText">
Welcome to Gates of Anrah.<br/>
Play fair and have fun!
<div id="chatform">
<form name="chathtmlform" id="chathtmlform" onSubmit='return false;'>
<input type="text" name="inputText" id="inputText" onKeyUp='checkEnter(event)' autocomplete="off"/>
<input type="button" onclick="doall()" value="Chat"/><br/>
<a href="../../chat.php?log=logout">Log Out</a>
</div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:Unspoken1
2 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 22990471
try setting the focus AFTER you get the response and allow for a small delay. Save this as test.html and try it.
<html>
<head>
<link href="../../include/chat.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function doall(){
	doWork();
}
function focusit(){
	document.getElementById("inputText").focus();
}
// Get the HTTP Object
function getHTTPObject(){
	if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) return new XMLHttpRequest();
	else {
		alert("Your browser does not support AJAX.");
		return null;
	}
}
// Change the value of the outputText field
function setOutput(){
	if(httpObject.readyState == 4){
		document.getElementById('outputText').innerHTML += httpObject.responseText;
		setTimeout("focusit()",100);
	}
}
// Implement business logic
function doWork(){
	httpObject = getHTTPObject();
	if (httpObject != null) {
		httpObject.open("GET", "../../chat.php?inputText="+document.getElementById('inputText').value, true);
		httpObject.send(null);
		httpObject.onreadystatechange = setOutput;
	}
}
var httpObject = null;
 
 
//check see if enter was pressed.
function checkEnter(e){ //e is event object passed from function invocation
	var characterCode
 
	if(e && e.which){ //if which property of event object is supported (NN4)
		e = e
		characterCode = e.which //character code is contained in NN4's which property
	}
	else{
		e = event
	characterCode = e.keyCode //character code is contained in IE's keyCode property
	}
 
	if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
		doall();
	} 
}
//-->
</script>
</head>
<body>
 
<div id="outputText">
Welcome to Gates of Anrah.<br/>
Play fair and have fun!
<div id="chatform">
<form name="chathtmlform" id="chathtmlform" onsubmit='return false;'>
<input type="text" name="inputText" id="inputText" onKeyUp='checkEnter(event)' autocomplete="off"/>
<input type="button" onclick="doall()" value="Chat"/><br/>
<a href="../../chat.php?log=logout">Log Out</a>
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 2

Author Closing Comment

by:Unspoken1
ID: 31518072
Thanks, that was perfect, I wonder why you have to have a timeout between those two function calls?
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question