Request action on change and get no action. Help

crussell · September 12th, 2007, 11:11 AM

I have a problem. I am creating a form on this form there is a need for two autocomplete controls. The first control is the state this is done using scriptaculous and is working fine. The next is city the list of cities is of course dependent on the state. I have tried several variations but I can't get the first control to fire a change event. I have tried many variations but I will include only two here so you can get a feel of what I have tried.

Attempt 1:
I have tried several variations on this theme, set up a listener, use the prototype observe, etc

Code:

var txtState =
{
    var StateElement;

    init:
    {
        StateElement = Document.getElementById("txtState");
        StateElement.onchange = StateChangeHandler();
    }


}

//Handle the change event for the state text box
function stateChangeHandler()
{
/****************I Can't get here************/
    //Set up Ajax Request Object
    try //Normal Browsers
    {
        var requester = new XMLHTTPRequest();
    }
    catch(error)
    {
        try //Microsoft Browsers
        {
            var requester = nex ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(error)//Browser can not use Ajax
        {
            var requester = null;
        }
    }

Attempt 2:
After a while I thought that maybe I could use scriptaculous options this is my current run down that line.

Code:

var stateText =
{


    init:
    {

    //Here I took this declaration out of the HTML cleaner this way
        var stateCompleter = new Ajax.Autocompleter("txtState", "state_complete", "PScripts/autoCompleteStateHandler.php", {afterUpdateElement:stateChangeHandler()});

        stateChangeHandler);
    }


}

//Handle the change event for the state text box
function stateChangeHandler(input,item)
{/******************************* Still Can't get here ***************************/
    //Set up Ajax Request Object
   new Ajax.Request(
      "PScripts/list_cities.state="+input), //$F will get the value in the txtState control
      {
        method:"get",
        onComplete:function(xhr){
        citiesXML=xhr.response.xml;
        setCity(citiesXML);
      }
}


function setCity(cityData)
{
    cityArray = $A(cityData);
}

Core.start("stateText");// This is just an window onload listner