Solved

How can i get elements from an ajaxed page?

Posted on 2008-10-27
11
377 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…

863 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now