Regading getElementById

[priya pratheepp]

Hello friends

In my form I am using two things..one using AJAX and another using jquery.

Both are working fine...

Problem is both are displying in one place..I want to display it in different locations...

I used <div id="txtHintGrade"></div>
<div id="txtHint"></div>


txtHindGrade for first
document.getElementById("txtHindGrade").innerHTML=xmlHttp.responseText;
<span id=\"txtHindGrade\"></span>

and

txtHint for the second
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
<span id=\"txtHint\"></span>


Both are displaying in one place where txtHint is given

please help

thanks

[Bear Bibeault]

I'm not sure what it is you mean. If the spans are right near each other, and one is empty, the non-empty span will appear in the same place as the other would have.

You can use Firebug in Firefox to view the actual HTML element structure and see exactly what is happening with the HTML.

[priya pratheepp]

Thank you Bear

I opened in Firefox .I can't find any error message




when you select Staff_grade the combo box is displaying in the same place where empid is displaying...


thanks
[ May 14, 2008: Message edited by: priya pratheepp ]

[Bear Bibeault]

Originally posted by priya pratheepp:
I opened in Firefox .I can't find any error message

I didn't say anything about error messages. Using Firebug you can inspect the HTML structure after your code is executed and see which span the text has been added to.

[Eric Pascarello]

Might be better to show the exact code so we can understand what you are talking about.

Eric

[priya pratheepp]

In my form i have employee Id and grade.

When i type the employee id , if the id is already in database then it will be displayed near to employee id text box

When i select grade then all the grade above i selected should be displayed in next row of the table next to reporting to row...


for employee id

out.println("ltTD>ltinput type=\"Text\" name=\"empID\" value=\""+""+"\" onkeyups=\"showID(this.value)\">ltspan id=\"empid1\">lt/span>lt/TD>");

ltscript src="newemp.js">lt/script>

var xmlHttp
 
function showID(str)
{
if (str.length==0)
  { 
  document.getElementById("empid1").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="getID.jsp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("empid1").innerHTML=xmlHttp.responseText;
}
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;

}For the grade drop down box

out.println("ltdiv id=\"txtGrading\">lt/div>"); 

here i want to disply the drop down box

ltdiv id="txtGrading">lt/div>

out.println("ltSelect name=\"staff_grade\" onchange=\"showHintGrade(this.value)\" >");

calling side

ltscript type="text/javascript" src="grading.js">lt/script> 

grading.js



Code:

var xmlHttp
var s = new Array(50);
function showHintGrade(str)
{
if (str.length==0)
  { 
  document.getElementById("txtGrading").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="GetHint1.jsp";
url=url+"?q="+str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtGrading").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;}

thanks in advance
[ May 14, 2008: Message edited by: priya pratheepp ]

[Eric Pascarello]

You can not have the same function name! When you repeat the function in the page, it overrides the first one. Change the second stateChanged function to a different name and set that new name to the onreadystatechange. Something more descriptive like stateChangedGrade would work.

Eric

[priya pratheepp]

Hi Eric

You are really great .A thousand thanks to you......

Working fine....



Again thanks a lot