single id to fill out two divs in ajax ???

Question

fire eaters 0 Newbie Poster

12 Years Ago

textbox to search for employees

<div id="searchform">
    <div id = "courses">
        <form id="searchempform" name="searchempform"  method="post" "/> 
        <li> SEARCH <b>EMPLOYEES</b> &nbsp;<input type="text" name="searchemployees" class="textbox" [B]onkeyup="searchemp();[/B]" /> </li>
        </form>
    </div>

=======================================================
typed characters sent ... ajax call to another page look out for data

<script type="text/javascript">
	function [B]searchemp()[/B]
	{
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("results").innerHTML=xmlhttp.responseText;
		}
	  }
	 xmlhttp.open('GET','employeeajax.php?searchemployees='+document.searchempform.searchemployees.value,true);
     xmlhttp.send();
}
</script>

-----------------------------------------------------
using the sent characters .. searching the information using sql query

<?php

include("sql2.php");
 
           $searchemp = $_GET['searchemployees'];

           if(!empty($searchemp))
		   {
 
		  $sql="SELECT `empid`, `Rank`, `Name`, `serviceno` FROM `frsemployees` WHERE `Name` LIKE '".mysql_real_escape_string($searchemp)."%'";
		   $result = mysql_query("$sql") or die ("could not connebbbbct to database");
		   
		   
				echo'<select name="listbox" class="listbox" size="28" onclick = "[B]getinfo2(this.value);[/B] " >';
						while($row=mysql_fetch_array($result))
						{
						  $empid = $row[0];
						  $rank = $row[1];
						  $name = $row[2];
						  $Serviceno = $row[3];
			
						echo"<option value='$empid' class='b'> $Serviceno $rank  $name  </option>";
						}
						
                     echo '</select>'; 
		   }
?>

--------------------------------------------------------------
using the selected id again populating for another information

<script type="text/javascript">
	function [B]getinfo2(employeeinformation)[/B]
	 {
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("employeeinformation").innerHTML=xmlhttp.responseText;
		}
	  }
	 xmlhttp.open("GET","employeedetailsajax.php?id="+employeeinformation,true);

     xmlhttp.send();
     }
</script>

-----------------------------------------
look out for data using the clicked employees id

<?php

 include("sql2.php");

 $employeeserviceno = $_GET["id"];

 
 
    $sql1=  "SELECT frsemployees.photo, frsemployees.serviceno, frsemployees.Rank, frsemployees.Name
    FROM frsemployees WHERE frsemployees.empid = '$employeeserviceno' ";
	
	$result1 = mysql_query("$sql1") or die ("could not connebbbbct to database");
	
	while($row=mysql_fetch_array($result1))
						{
						  $empid = $row[0];
						  $rank = $row[1];
						  $name = $row[2];
						  $Serviceno = $row[3];
						  
		
  echo'<tr>';
   echo' <td width="122" rowspan="3"><center><img src=../img/5247.PNG height=140 width = 120 border="1" style="padding:3px;"></center>  </td>';
    echo"<td>SN: $rank </td>";
   echo'</tr>';
   echo'<tr>';
    echo"<td width=235>Rank:$name</td>";
   echo'</tr>';
   echo'<tr>';
    echo"<td >SNumber:$Serviceno</td>";
   echo'</tr>';

						  
						}
?>
</table>
------------------------------------------------------------------------
<div id="results">
</div>
<div id="employeeinformation">
</div>
<div id="coursesinf">
</div>

--------------------------------------
using [B]getinfo2(this.value);[/B] i want to populated a new result to a new div
for instance the result div is populated with the employees personal information, when clicked to his id..how can i click to his same id and populated his courses information to "coursesinfdiv"

javascript

Edited 12 Years Ago by fire eaters because: Added code tags. Please use them to format any code that you post.

4 Contributors
6 Replies
135 Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by Taywin

All 6 Replies

AleMonteiro 238 Can I pick my title?

12 Years Ago

In a <select> you must use the onChange event to do this kind of stuff. Because click event will be fired before the user select some option.

ddymacek 15 Posting Whiz

12 Years Ago

Since it appears that you are using the same 'id' to pull for the first set of employeeinformation and then want to also get additional info, just make another call at the end of getinfo2(); chain your requests together. not saying this is ideal, but should get the job done.

<script type="text/javascript">
	function getinfo2(employeeinformation)
	 {
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("employeeinformation").innerHTML=xmlhttp.responseText;
		}
	  }
	 xmlhttp.open("GET","employeedetailsajax.php?id="+employeeinformation,true);

     xmlhttp.send();
     // yet another request....
     get_course_info(employeeinformation);
     }
     
     function get_course_info(employeeinformation)
	 {
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("coursesinf").innerHTML=xmlhttp.responseText;
		}
	  }
	 xmlhttp.open("GET","coursesinfoajax.php?id="+employeeinformation,true);

     xmlhttp.send();
     }
</script>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

fire eaters 0 Newbie Poster · Answer 1 · 2011-09-15T01:10:24+00:00

In a <select> you must use the onChange event to do this kind of stuff. Because click event will be fired before the user select some option.

my problem is onchange= getinfo2(); will send the user selected id to the function getinfor2(employeesinformation) function... then this function will send the id to another file.

how can i use the same onchange = getinfor2(); id to populate antother div with some other information.

Taywin 312 Posting Virtuoso · Answer 2 · 2011-09-15T09:03:31+00:00

You could chain it using javascript calls as ddymacek, or you could do it on the server side. I prefer calling the info from the server side because it is being transferred once. What you need to do on your client side is to know how to break the response and put each piece into the correct places...

fire eaters 0 Newbie Poster · Answer 3 · 2011-09-23T16:33:03+00:00

fire eaters 0 Newbie Poster

12 Years Ago

doesnt work :(

Taywin 312 Posting Virtuoso · Answer 4 · 2011-09-23T20:06:50+00:00

What info you get back from the server? When you said "doesn't work," it means nothing to me. How would I know what "doesn't work" is? Could you give us a scenario from enter data and what you see afterward?

Also, do the chaining call using Ajax may not result the way you want. You should send the employee ID to the server once, and the server return all data you want to be displayed back. Then use JavaScript to populate the respond data in different places on the page. One way to deal with this is to use a delimiter. If you get the return value as "text" create a delimiter which will be used in split() string.

/*
On the server side, you collect all data and concatenate them as string
using --::-- as delimiter. Therefore you are supposed to have 2 of the
delimiter in your string.
i.e. "--::--ENG101--::--Instructor"
 This means there is no "results" data but has course info and employee info.
 The array result from splitting the respondText will be ["", "ENG101", "Instructor"]
*/
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  var tmpArr = xmlhttp.responseText;.split("--::--")  // your delimiter is --::--
  document.getElementById("results").innerHTML = tmpArr[0]
  document.getElementById("coursesinf") = tmpArr[1]
  document.getElementById("employeeinformation") = tmpArr[2]
}

single id to fill out two divs in ajax ???

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers