Mittwoch, Juli 27, 2005

A lookup example for city names

In example of implementing an AJAX action you can see how to load and display data fragments from a huge dataset on the server.

On the server, there is a big list of German towns and cities in the file orte.txt. If you would include this information into the page as a list of OPTION elements for a SELECT element you would have to download about 400.000 bytes of additional HTML code – too much. Instead a simple INPUT field is combined with the possibility to search in this dataset.

The WebService that implements this lookup functionality can be found in OrteLookUp.asmx and, again, has no AJAX specific implementations. The method gets one parameter passed that contains the first characters of a possible name of a city and returns up to 12 found entries of the list back to the client.

The connection to this WebService is done by using the proxy generator:

<script type="text/javascript" src="GetJavaScriptProxy.aspx?service=OrteLookup.asmx"></script>

This lookup method must be called in several situations: The code on the client that display the list and the completion of the current entered text is somewhat complex and most of the JavaScript of this page is about that. The call ajax.Start(LookupAction) that can be found several times starts the action.

The action itself is implemented very compact in one place and you can see that a not a lot of coding is necessary because the AJAX engine handles a lot.

var LookupAction = {
  delay: 100,
  prepare: function() { return (document.getElementById("inputField").value); },
  call: proxies.OrteLookup.OrteStartWith,
  finish: function (val) {
    var fld = document.getElementById("inputField");
    var dd = createDropdown(fld);
    FillDropdown(dd, val);
    if (isIE)
      NextDropdownEntry(fld);
  },
  onException: proxies.alertException
} // LookupAction

Looking at this script you can again see the actual flow of the action and there is no need to implement several JavaScript methods outside of the definition.

Kommentare:

Marco hat gesagt…

Do you have a sample page where we can see the complete page/sample?

Seems very solid!

Marco hat gesagt…

Just found it..

http://mathertel.devhost1.centron.net/CalcFactors/

Veselin hat gesagt…

Hi,
Your blog and you js libraries are very interesting and very powerful about AJAX. Congratulations :)

I try all of you examples and have one question: Is it possible to pass 2 (and more) parameters to SOAP Web Service via your js library? Because I was trying to does it, but library always send only one parameter (the value that prepare function return.

Did I make some mistake or it is limitation of library?


Regards

MatHertel hat gesagt…

I added a link to the sample WebSite at in the sidebar.

It's a ASP.NET Beta2 host and it will disapear in a few months so I will update this link then.

MatHertel hat gesagt…

The WebService layer can be used with multiple parameters, but the ajax engine "allows" only one right now.

But, I think that complex data can be easily passed as an XML document as you can see in the already online form sample.
I'll write on it soon, it's almost ready.

Veselin hat gesagt…

Thank you for answer :)

Yes, it is always posible to mask many parameters as one complex type and send it in one parameter.

But my problem is that I try to use already exist Web Service and don't want (or it is imposible) to change input parameters.

Also I was not sure is this my mistake or limitation, but now I know. :)