Loading entire page in AJAX div

[wendyp]

Hi - *very* new to AJAX. I'm using Joomla (which I'm new to, too), with Docman.

I created a Joomla module to pick up a list of categories and sub-categories using AJAX.

This worked perfectly until I turned Joomla's friendly URL's on.

Now the entire page loads in my little search box. Not good.

Here's the URL:

http://www.hoarecords.com/go/docman/cat_view/53-arizona

Pages other than the Docman pages are OK. And even the first docman page is ok. For example, here is the first page my search box would take you to:

http://www.hoarecords.com/go/index.php?option=com_docman&task=cat_view&gid=37&Itemid=53

(it is not in friendly URL format - that doesn't seem to matter because if I used the "Association Records" menu choice and drill down through the categories, the same thing happens.)

If you click on the "Meeting Agendas" category on the right, you'll see it does the same thing.

So I've determined that somehow the whole page is getting loaded into my AJAX responseText and it only happens with friendly URL's. So something in Joomla's friendly URL code is getting into my little search box.

Here's the code:

<?     
     echo "<form name=sel>\n";
     echo "<div id=states><select>\n";
     echo "<option value='0'>============</option> \n" ;
     echo "</select></div>\n";
     
     echo "<div id=cities><select>\n";
     echo "<option value='0'>=== none ===</option> \n" ;
     echo "</select></div>\n";
     echo "</form>";
?>
<script language=Javascript>
function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
};

function dochange(src, val) {
     var req = Inint_AJAX();
     req.onreadystatechange = function () { 
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText; //return value
               } 
          }
     };
     req.open("GET", "state.php?data="+src+"&val="+val); //make connection
     req.setRequestHeader("Content-Type", "application/x-[URL unfurl="true"]www-form-urlencoded;charset=iso-8859-1");[/URL] // set Header
     req.send(null); //send value
}
function gotodocs(gid, itemid) {
  location.replace("index.php?option=com_docman&task=cat_view&gid="+gid+"&Itemid="+itemid);
}
document.onactivate=dochange('states', -1);  // value in first dropdown
</script>


STATE.PHP

(code to connect to db)
    mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");  
     
     if ($data=='states') {  // first dropdown
          echo "<select name='states' onChange=\"dochange('cities', this.value)\">\n";
          echo "<option value='0'>- Select State -</option>\n";
          $result=mysql_db_query($dbname,"select `id`, `name` from jos_categories WHERE `parent_id` =0 AND `section` = 'com_docman' order by `name`");
          while(list($id, $name)=mysql_fetch_array($result)){
               echo "<option value=\"$id\" >$name</option> \n" ;
          }
     } else if ($data=='cities') { // second dropdown
          echo "<select name='cities' onChange=\"gotodocs(this.value, $val)\">\n";
          $result=mysql_db_query($dbname,"SELECT `id`, `name` FROM jos_categories WHERE `parent_id` = " . $val . " ORDER BY `name`");
           
          if (mysql_num_rows($result)) { 
            echo "<option value='0'>- Select HOA -</option>\n";
          } else {
            echo "<option value='0'>---- none ----</option>\n";
          }              
          while(list($id, $name)=mysql_fetch_array($result)){       
               echo "<option value=\"$id\" >$name</option>\n" ;
          }
     } 
     echo "</select>\n"; 
?>

Is there a way to confine my search box to just my search box and not pick up other AJAX responses?

Or am I totally off-base on what's happening?

Thanks for any help.
/Wendy