AJAX/Xml/PHP Problem!!

llnova · April 2, 2009

Hello,

I'm making a dynamic dropdown list that will show "vereniging". each "vereniging" has multiple teams in it. I am trying to get the teams to populate the list according to the "vereniging" selected.

I made a script that works for one "vereniging" and a team. Now i am trying to put it in a loop so i can get more input forms. To keep the lines sepparate for the teams on one row I start with a 10 and the last box will be 13. The next line will start with 20 and ends with 23 so, 10 and 12 will be the "vereniging" and the teams have to be shown in 11 and 13.

I think i modyfied the script correctly to do this. But Firefox gives the error VerenigingList = NULL. In the AJAX Code it points out to line 42: var selectedverid = VerenigingList.options[VerenigingList.selectedIndex].value;

I can't find the problem:confused:

<html>

<head>
	<title></title>
	<script src="js/AjaxCode.js"></script>
</head>


<h2>Kies Vereniging & Team </h2>

<div align="left"><br>
<?
include 'connect.php';
for ($t=1;$t<=10;$t++)
{
$keus=$t*10;
$volgende = $keus + 1;
echo $keus."<BR>";
echo $volgende."<BR>";

?>
Selecteer Vereniging:  Select Team:
  <br>


<select name="VerenigingList" id="keus" + "<? print("$keus"); ?>" onChange="return VerenigingListOnChange(<? print("$keus"); ?>)"> 	

<script>
//var kul = "keus" + "<? print("$keus"); ?>"
//alert(kul);
</script>
 <?php

$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

mysql_select_db($database, $conn);
$query  = "SELECT * from vereniging";
$result = mysql_query($query);

while($row = mysql_fetch_assoc($result))
{ 
echo '<option value="' . $row['verid'] . '">' . $row['vernaam'] . '</option>';
}	

?>
  </select>
   <select name="teamList" id="select" . "<? print("$volgende"); ?>" >
      </select>
  <br>
  <br>

Selecteer Vereniging:  Select Team:
  <br>
<?
$keus = $keus + 2;
$volgende = $keus + 1;
echo $volgende;
echo $keus;
?>

  <select name="VerenigingList" id="keus" . "<? print("$keus"); ?>" onChange="return VerenigingListOnChange(<? print("$keus"); ?>)">
    <?php


$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

mysql_select_db($database, $conn);
$query  = "SELECT * from vereniging";
$result = mysql_query($query);

while($row = mysql_fetch_assoc($result))
{ 
echo '<option value="' . $row['verid'] . '">' . $row['vernaam'] . '</option>';
}	



?>
      </select> 
	<select name="teamList" id="keus" . "<? print("$volgende"); ?>" >
  </select>
  <br><br>
<?
}
?>


</div>

    </div>
</html>

My Xml:

<?php

    

    Header("Content-type: text/xml"); 
   
$filter = $_GET['filter'];
$keus = $_GET['keus'];
$xml = '';
$isvereniging = 1;
   


include 'connect.php';

mysql_select_db($database, $conn);
$query  = "SELECT teamid, teamnaam, verid from team where verid = '$filter'";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result))
{ 
	if ($isvereniging == 1)
	{
	$xml = $xml . '<vereniging name="' . $row['verid'] . "keus=$keus" . '">';
	}

	$xml = $xml . '<teem id="' . $row['teamid'] . '">' . $row['teamnaam'] . '</teem>';
	$isvereniging = $isvereniging + 1;
}	
$xml = $xml . '</vereniging>';

if ($isvereniging == 1)
{
        $xml = $xml . '<vereniging name="none">';
        $xml = $xml . '<teem id="0">Geen team gevonden</teem>';
        $xml = $xml . '</vereniging>';
}

  
echo( $xml );
?>

And AJAX:


var XmlHttpObj;
var selectstatus;


function CreateXmlHttpObj()
{

try
{
	XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
	try
	{
		XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
	} 
	catch(oc)
	{
		XmlHttpObj = null;
	}
}

if(!XmlHttpObj && typeof XMLHttpRequest != "undefined") 
{
	XmlHttpObj = new XMLHttpRequest();
}
}


function VerenigingListOnChange(gekozen) 
{
	var knurft = "keus" + gekozen;
	var gekozen = gekozen + 1;
	var knarft = "keus" + gekozen;

    var VerenigingList = document.getElementById(knurft);
    
    
    var selectedverid = VerenigingList.options[VerenigingList.selectedIndex].value;
    
    
    var requestUrl;
    
    requestUrl = "xml_data_provider.php" + "?filter=" + encodeURIComponent(selectedverid) + "&keus=" + encodeURIComponent(knarft);
    
    
CreateXmlHttpObj();


if(XmlHttpObj)
{
        
	XmlHttpObj.onreadystatechange = StateChangeHandler;


	XmlHttpObj.open("GET", requestUrl,  true);


	XmlHttpObj.send(null);		
}
}


function StateChangeHandler()
{

if(XmlHttpObj.readyState == 4)
{

	if(XmlHttpObj.status == 200)
	{

			var root=XmlHttpObj.responseXML.documentElement;
			var node=root.getElementByTagName('vereniging')[0];
			var lurkie=node.getAttribute("keus");
		PopulateteamList(root,lurkie);
	}
	else
	{
		alert("problem retrieving data from the server, status code: "  + XmlHttpObj.status);
	}
}
}


function PopulateteamList(TeamNode,lijstje)
{
    var teamList = document.getElementById(lijstje);

for (var count = teamList.options.length-1; count >-1; count--)
{
	teamList.options[count] = null;
}

var teamNodes = TeamNode.getElementsByTagName('teem');
var idValue;
var textValue; 
var optionItem;

for (var count = 0; count < teamNodes.length; count++)
{
   		textValue = GetInnerText(teamNodes[count]);
	idValue = teamNodes[count].getAttribute("id");
	optionItem = new Option( textValue, idValue,  false, false);
	teamList.options[teamList.length] = optionItem;
}
}

function GetInnerText (node)
{
 return (node.textContent || node.innerText || node.text) ;
}

Thanks in advance

llnova · April 2, 2009

Nobody ???

xtopolis · April 3, 2009

Before trying to copy/paste your code...

It's telling you that it's getting null for the verenigingList... so first test to see why it's not correctly getting that element.

Your Ajax:

var VerenigingList = document.getElementById(knurft);

Debug that line, make sure the function wrapper receives your gekozen variable, and then that it successfully combines:

var knurft = "keus" + gekozen;

So, see why that's evaluating to NULL and then ask more questions.

llnova · April 3, 2009

The var knurft is working, If I put a alert(knurft); above

var VerenigingList = document.getElementById(knurft);

it gives the good output that is expected

But it doesn't get it in the document.getElementById for some reason and why I cant figure out...

llnova · April 3, 2009

I fixed the NULL problem but there is another one;

	

var node=root.getElementByTagName('vereniging')[0];

with the error root.getElementByTagName is not a function

Thanks in advance

xtopolis · April 3, 2009

getElementsByTagName

Elements not Element

and if it gives you trouble, change root -> document

llnova · April 7, 2009

Well thnx xtopolis that problems fixed. And i fixed 2 myself but there is a new one!

node.getAttribute is not a function

var root=XmlHttpObj.responseXML.documentElement;

//window.alert(root);

var node=root.getElementsByTagName("vereniging");

//window.alert(node);

var lurkie=node.getAttribute('keus');

is pointed out by firefox

Any further help would be appreciated

xtopolis · April 8, 2009

It looks like you're getting XML back as the response, but trying to parse it as you would with HTML. If that's the case, the getAttribute() function is not appropriate here.

See this site: http://www.hiteshagrawal.com/javascript/javascript-parsing-xml-in-javascript

Specifically line 33~ish in the code which talks about referencing attributes in XML via Javascript.

Reading that website might help you better parse and understand what you're doing with your XML data. If my assumptions above are incorrect, let me know, I don't have time to copy/paste/test your code at the moment.

Sign In

AJAX/Xml/PHP Problem!!

Recommended Posts

llnova

Link to comment

Share on other sites

llnova

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

llnova

Link to comment

Share on other sites

llnova

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

llnova

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information