Change <div> content from 2 (or more) different functions

Hi,

I got a question, obviously, or I wouldn’t be posting it here… :slight_smile:

On my page I have a <div id=“content”></div>

On page load it is populated by some default content with on top a drop-down select box. When you select an item from that list (which implies filtering the content) An script is called through AJAX changing the content of the div.

Now the content itself is here and there clickable to and should also change the <div id=“content”> but from a different AJAX function. This doesn’t seem to work at the moment. I probably do something wrong, but I’m not even sure if it’s possible.

Here’s some code:
In the <header> of my page I got:

<script type="text/javascript">					
function loadXML_post(postvars,url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(postvars);
xmlhttp.send();
}

function GetTickets(filter)
{
postvars="filter="+filter;
loadXML_post(postvars,"/includes/ajax/gettickets.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
});
}

function OpenTicket(ticket)
{
postvars="ticket="+ticket;
loadXML_post(postvars,"/includes/ajax/openticket.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
});
}
</script>

The <div id=“content”>:

$main .= '<div id="content">';
$main .= GetAllTickets();	//default get all the tickets available.
$main .= '</div>'; <!-- content -->	

GetAllTickets() is a php function returning an html string <table>…balblabla…</table> with data from a MySQL db.
Above the table I have:

$tickets ='<form class="filter" action="">
<select name="viewfilter" id="dropdown" onChange="GetTickets(this.value)">'.GetSubjects($subject).'</select>
</form>';

Which is a dropdown list used for filtering table contents. GetSubjects() return the items for that dropdown retrieved from DB.
In the table are some entries:

<td class="title">
<a class="tickets" href="" onClick="OpenTicket('.$result1['id'].')">'.$result1['title'].'</a>
</td>

When people click on one of them the <div id=“content”> should be populated with that data, hiding the previous table. But I always keep on getting the table that is loaded by default (on page load)

Any thoughts?

thx,
Koen

bloody h***

forgot the #

<td class="title">

<a class="tickets" href="" onClick="OpenTicket('.$result1['id'].')">'.$result1['title'].'</a>

</td>

this solves my issue…