multiple ajax on one page

[tyutghf]

I have an ajax call on a page

<select name='category' style='display: inline' onchange="filterResults(this.value)">
<div id='listresults'></div>

var xmlhttp

function filterResults(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="categorydropdown.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("listresults").innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

This then populates another dropdown based on that selection.

How do I repeat tyhis so that I can have multiple dropdowns on the page
i.e.

<select name='category2' style='display: inline' onchange="filterResults(this.value)">
<div id='listresults'></div>

I ried duplicating the javascript above to create function filterResults2 then call it on the onchange but I get the error filterResults2 is not defined.

 

[feherke]

Hi

I ried duplicating the javascript above

And why not posted that ? Is pointless to post the good code while another piece is crashing.

create function filterResults2

Anyway, forget it. This is wrong approach. Just pass a distinctive parameter in the URL, so categorydropdown.asp to know what the JavaScript expects. And of course, adjust the filterResults() parameter list so it also get the distinctive parameter to know which [tt]select[/tt] called it.

By the way, [tt]div[/tt] is not allowed inside the [tt]select[/tt] tags. Personally I prefer to send back JSON to the [tt]XMLHttpRequest[/tt] and create the [tt]option[/tt] elements programmatically.


Feherke.

http://free.rootshell.be/~feherke/

 

[ljwilson]

You should also check out jQuery's Ajax methods. They are much cleaner, faster to code and give you lots of options for how you want the call to be made.

If you do use jQuery, do your event binding in your code behind javascript file and not in the html

onchange="filterResults(this.value)"