Solved

How can i get elements from an ajaxed page?

Posted on 2008-10-27
11
372 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This video discusses moving either the default database or any database to a new volume.
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

707 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

14 Experts available now in Live!

Get 1:1 Help Now