Solved

How can i get elements from an ajaxed page?

Posted on 2008-10-27
11
379 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 

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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
AJAX can not access elements returned in array 21 73
JavaScript parse form with colon separated values 2 77
ASP.NET MVC Jquery 17 60
alert before form submission 6 40
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

773 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