Solved

How can i get elements from an ajaxed page?

Posted on 2008-10-27
11
381 Views
Last Modified: 2009-12-16
Hello  i have a select drop down box that is display using httpxml ajax method so when trying to ajaxed other part of the page based on the drop down value  i can't get the drop box value ! even if i use the method document.getElementById("section").value it didn't get it as it not exist!
Here are the code take a look
thanks in advance.
main section 
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Audiominds</title>
<style type="text/css">
.style1 {
	border: 1px solid #FFFFFF;
	border-collapse:collapse;
}
.font {
	color: #dddddd;
	font-family: Tahoma;
	font-size: small;
}
.box {
	color: #999999;
	font-family: Tahoma;
	font-size: small;
	background:black;
	border: 1px solid #4E4868;
}
a:link {
	color: #E7DBB1;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999999;
}
a:hover {
text-decoration:underline;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
</style>
</head>
<?php include('includes/get.php') ?>
<body style="background-color: #000000">
 
 
 
<table align="center" style="width: 700px" cellspacing="4" cellpadding="3" class="style1">
	<tr>
		<td>
		<!--start in-main table-->
		<table class="font" style="width: 100%" cellspacing="3" cellpadding="2">
	<tr>
		<td style="width: 511px" >
		<img alt="Audiominds logo -load content" src="image/logocontent.jpg" width="450" height="78" onclick="get('index')"/></td>
		<td align="center"><div id="notification"></div>
		&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" style="border-bottom:thin;border-bottom-style:dotted; border-bottom-color:#555555;color:black;border-top:thin;border-top-style:dotted; border-top-color:#555555"><div align="right" id="mainsection"></div></td>
	</tr>
	<tr>
		<td colspan="2">
		<div id="subcategory"></div></td>
	</tr>
	<tr>
		<td colspan="2"><table  cellpadding="3"  cellspacing="3" width="100%" class="style1"><tr><td><div id="content"></div></td></tr></table></td>
	</tr>
	<tr>
		<td align="right" style="border-top:thin" colspan="2"><a href="http://www.audiominds.net"><strong>www.audiominds.net</strong></a><strong> -admin 
		panel application soft version 1.0</strong>0</td>
	</tr>
</table>
 
		<!--end in-main table-->
		
		</td>
	</tr>
</table>
 
 
</body>
 
</html>
 
 
 
 
 
ajax code
------------------------
<script type="text/javascript">
var xmlHttp
var strprod
 
function get(section)
 
{ 
		if ( section == "index" )
		{
		var page="default"
		var url="verifyindex.php?sid=" + Math.random()+"&page="+page
		xmlHttp=GetXmlHttpObject(setcategory)
		xmlHttp.open("GET", url , true)
		xmlHttp.send(null)
		}
		//--------------------------------------------------------------------------
		//--------------------------------------------------------------------------
		if ( section == "subcategory" )
		{
		var subcategory;
		subcategory=document.getElementById("boxcategory").value ; 
		var url="verifyindex.php?sid=" + Math.random()+"&page=subcategory&id="+subcategory ;
		xmlHttp=GetXmlHttpObject(setsubcategory)
		xmlHttp.open("GET", url , true)
		xmlHttp.send(null)
		}
		
} 
 
 
 
function setcategory() 
{
	if (xmlHttp.readyState==3 || xmlHttp.readyState==2 || xmlHttp.readyState==1)
	{ 
	document.getElementById("notification").innerHTML="<img src=image/ajax-loader.gif>";
	}
 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{ 
		document.getElementById("notification").innerHTML="Category loaded";
		document.getElementById("content").innerHTML="<font color=FF0000>Please select a category to proceed!</font>";
		document.getElementById("mainsection").innerHTML=xmlHttp.responseText
	} 
} 
//############################################################################################
 
 
function setsubcategory() 
{
	if (xmlHttp.readyState==3 || xmlHttp.readyState==2 || xmlHttp.readyState==1)
	{ 
	document.getElementById("notification").innerHTML="<img src=image/ajax-loader.gif>";
	}
	
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{ 
		document.getElementById("notification").innerHTML="Subcategory loaded";
		document.getElementById("content").innerHTML="<font color=FF0000>Please select a subcategory to proceed!</font>";
		document.getElementById("subcategory").innerHTML=xmlHttp.responseText
	} 
} 
//#############################################################################################
 
 
 
 
 
 
 
 
function GetXmlHttpObject(handler)
{ 
var objXmlHttp=null
 
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera") 
return 
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{ 
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
} 
try
{ 
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler 
return objXmlHttp
} 
catch(e)
{ 
alert("Error. Scripting for ActiveX might be disabled") 
return 
} 
} 
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler 
return objXmlHttp
}
}
</script>
 
 
 
 
 
 
------------------------
php code 
--------------------------
<?php
session_start();
include_once("includes/sql.php");
if ( $_GET['page'] == "default" )
{
?>
<table class="font" width="100%"><tr><td align="left"> <b>ADD CONTENT | ADD CATEGORY | ADD SUBCATEGORY</b></td>
<td align="right">
<select class="box" id="boxcategory" onchange="get('subcategory')">
<option >Select a category</option>
<?php
//get the category from database
$sqlcategory=sql("tblitems");
while($rowcategory=mysql_fetch_array($sqlcategory))
{?>
<option value"<?php echo $rowcategory['id']; ?>" ><?php echo $rowcategory['name']; ?> </option>
<?php }?>
</select>
</td></tr></table>
 
<?php
}
?>
 
<!--------------------------------------------------------------------------------------------------------------------------SUBCATEGORY-->
 
<?php
if ( $_GET['page'] == "subcategory" )
{
?>
	<table border="1" class="font"  cellpadding="3" cellspacing="3" bgcolor="#666666" style="border-collapse:collapse "><tr>
	<?php echo "<td>testing </td>"; ?>
	<?php 
	$sqlsubcategory=sql("tblvalues" , "parent_id='$_GET[id]' ");
	while($rowsubcategory=mysql_fetch_array($sqlsubcategory))
		{
		?>
		<td><b><?php echo $rowsubcategory['name'] ; ?></b></td>
		<?php
		}
		?>
	</tr></table>
 
<?php
}
?>

Open in new window

0
Comment
Question by:Audiominds
  • 6
  • 5
11 Comments
 
LVL 4

Expert Comment

by:GO-87
ID: 22814581
At first glance, I think there is an = sign missing in your PHP code here:
<option value"<?php echo $rowcategory['id']; ?>" >
should probably be
<option value="<?php echo $rowcategory['id']; ?>" > 
 
Have you viewed the source HTML that is generated by your PHP page? Does the Select drop down look healthy?
0
 

Author Comment

by:Audiominds
ID: 22814807
The page is displayed correctly ! but i did'nt find a way to get the value of drop down box labeled id="category"
0
 
LVL 4

Expert Comment

by:GO-87
ID: 22814906
I might be missing something ... but I can't seem to find any id="category" in your code.
Do you mean boxcategory?
Did you try adding the = sign?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Audiominds
ID: 22814934
yes boxcategory what do you mean by sign ! ?
0
 
LVL 4

Expert Comment

by:GO-87
ID: 22815204
If you re-read my first post, I've suggested that you insert an equals sign into your PHP code, after the word Value. It appears on line 225 of the code snippet.
I also suggested that you inspect the source HTML (in other the words, the code) of the generated page, to see whether it looks reasonable. You might notice a glaring omission.
 
0
 

Author Comment

by:Audiominds
ID: 22815709
for used this equal sign its only an echo string !
0
 
LVL 4

Expert Comment

by:GO-87
ID: 22816760
If you take a CAREFUL look at the following URL, you'll see that the HTML SELECT tag needs to have an equals sign after the VALUE:
http://www.w3schools.com/TAGS/tag_select.asp
so for example this would work:
<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value ="opel">Opel</option>
  <option value ="audi">Audi</option>
</select>
but this would not:
<select>
  <option value "volvo">Volvo</option>
  <option value "saab">Saab</option>
  <option value "opel">Opel</option>
  <option value "audi">Audi</option>
</select>
Do you see the difference?
Now assuming your categories are
id = 1, name = One
id = 2, name = Two
id = 3, name = Three
then your code on line 225 will generate something like this:
<select class="box" id="boxcategory" onchange="get('subcategory')">
  <option >Select a category</option>
  <option value "1">One</option>
  <option value "2">Two</option>
  <option value "3">Three</option>
</select>  
which will not work the way you want it to. You need to have equals signs.
0
 

Author Comment

by:Audiominds
ID: 22820190
Man if you look carefully in my code i didn't miss any = sign if that the case please show me where is there any other real method to get this ajaxed select be retrieved by other ajax request ?
0
 
LVL 4

Accepted Solution

by:
GO-87 earned 500 total points
ID: 22820407
Audiominds,
I am trying to help you. I see the following line in your code snippet:
<option value"<?php echo $rowcategory['id']; ?>" >
If you dispute that the above line appears in your code, then perhaps one of us needs spectacles.
I suggested that you start by changing the above line into this:
<option value="<?php echo $rowcategory['id']; ?>" >
by inserting an equals sign. If you disagree with my suggestion then that's your prerogative.
Good luck.
0
 

Author Comment

by:Audiominds
ID: 22820735
Thanks man appreciated sorry for any missunderstanding
0
 
LVL 4

Expert Comment

by:GO-87
ID: 22821095
No worries ... I didn't mean for you to award me all the points, I merely wanted you to confirm whether you'd tried my suggestion.
Thank you for the points though ;-) and I hope your solution works.
G
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Hello World !, Thanks : My Sincere thanks to @Michael Male who encouraged me to write an article on this in my  blog (http://scribblejava.wordpress.com). Introduction:       There are several technical issues a developer may face in his…
Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

839 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