AJAX script help

[goocharlton]

I have a function in my PHP script that I use to filter content by HTML tag id when the item changes in the drop down menu as seen below:

<?php
echo '...';
echo '<div id="filter"><form style="padding:0;margin:0;">Filter: <select name="collection" onchange="filter(\'albums\',\'reload\',this.value)">';
echo '...';
?>

 

The javascript variable that I am using for the onchange event is:

filter('{item}','{reloadElement}',this.value)

where:

• {item} = a variable that is used to define what part of the filter.php script to run
  
• {reloadElement} = defines what HTML tag by id to reload(using ajax)
  
• this.value = just grabs the id that the drop down menu item is holding
  

 

For example:

filter('album','content',this.value)

The following runs the 'album' part of the filter.php script and used 'this.value' to to grab content from the database then it reloads the HTML tag with id 'content' using AJAX.

 

The AJAX script that I am using is:

var xmlHttp

function filter(type,reloadElement,value)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
	{
	alert ("Browser does not support HTTP Request")
	return
	}
var url="filter.php"
url=url+"?type="+type
url=url+"&value="+value
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{ 
	document.getElementById(reloadElement).innerHTML=xmlHttp.responseText 
	} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
	{
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
	}
catch (e)
	{
	//Internet Explorer
	try
		{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
	catch (e)
		{
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
return xmlHttp;
}

 

Which then calls filter.php to grab the new content to be reloaded.

 

My problem is with getting the {reloadElement} to be the tag id that is reloaded by the AJAX script.

Somehow I need to get:

.getElementById(reloadElement).

as seen in the stateChanged function to be defined by the middle variable in the filter funtion.

 

How do I achieve this?

[xtopolis]

You can't use this.id ?

[goocharlton]

You can't use this.id ?

 

Sorry mate, i'm fairly new to this. Could you please expand on what you said.

[xtopolis]

I'm not 100% sure you can use it in that context(directly),

but you pass it the parameter: this.value

 

so can't you change

filter('{item}','{reloadElement}',this.value)

to

filter('{item}',this.id,this.value)

 

?  Haven't tested it, but if that doesn't work, I'll take a look codewise.

Or am I not reading the question thoroughly enough?

[goocharlton]

Thanks but you don't understand what I am asking.

 

I am defining 'reloadElement' to the HTML tag id that I want it to replace, not the tag id in which it is in.

 

Using filter('{item}',this.id,this.value) is defining reloadElement to the HTML tag in which it is in, where as using filter('{item}','{reloadElement}',this.value) I am able to define {reloadElement} every time I insert the function.

 

Do you understand?

[xtopolis]

Oh, I think I understand now.

 

Why not move the stateChanged function into the filter() function so it can have access to that variable?  or leave it as is, and define the reloadElement in the global scope..?

 

To be more clear, the variable reloadElement is only visible to filter because of the rules of variable scope.  You could either: pass it as an argument in: xmlHttp.onreadystatechange=stateChanged(reloadElement), and that might work

 

or move that whole function (stateChanged) into filter.

 

 

Am I understanding you correctly, or still missing it?