Hi Mat,
1) You're defining towncity like this:
var towncity = window.towncity = new Array();
That creates both a local variable named towncity and a window property
(global variable) of the same name. Is that what you want? Do you need to
use towncity outside this code? If not, I would change it to:
var towncity = [];
2) In the .each() inside your ajax callback you have this code:
towncity = $(this).text();
That *replaces* the towncity variable with the text of the single XML
element for the current iteration of .each() - so it's no longer an array
but is now a simple text string. It doesn't sound like that's what you want,
is it?
To append the item text to the towncity array, you could change it to:
towncity.push( $(this).text() );
But you probably also want to clear this array before running the loop (is
that right?), so just before the $(xml).find(...) you should add:
towncity = []; // note: no "var" here
which gives you this code:
success: function(xml) {
towncity = [];
$(xml).find(...).map(function(){
towncity.push( $(this).text() );
});
}
Given that, you could simplify the code to:
success: function(xml) {
towncity = $(xml).find(...).map(function(){
return $(this).text();
});
}
BTW, do you have control over the XML file that the server generates? If you
do, you could use JSON instead of XML to make the code simpler. If you're
stuck with XML, this code should do the trick.
-Mike
> From: Mat
>
> Hi there,
>
> I'm sorry this is a pretty newbie question....
>
>
> I am using JQuery with an xml file and autocomplete. What I am trying
> to achieve is to use an xml file as my data source to autocomplete
> cities in a form once a user selects their province. When a user
> selects a particular province then only the cities in that province
> will be listed by the autocomplete script as the user starts to type
> in the 'city' form field.
>
> My problem here is that I am trying to use the array 'towncity' as my
> data source for autocomplete and change the contents of the array when
> the province select box #province is changed. However, I can not get
> my $('#province').change(function().... to affect the array 'towncity'
> that I have declared outside of the function....
>
> <script type="text/javascript">
> $(document).ready(function() {
> var towncity = window.towncity = new Array();
> $("#city").autocomplete(towncity);
> $.preloadCssImages();
> $('div.jshide').show();
> $("#tenantForm").validate({
> rules: {
> name: {
> required: true,
> minlength: 2
> },
> province:"required",
> ccom:"required",
> occupied: "required",
> rented:"required",
> condo:"required",
> payment:"required"
>
> }
> });
>
>
> $("#renewdate").datepicker({
> dateFormat: "d M, yy",
> showOn: "both",
> buttonImage: "images/calendar.gif",
> buttonImageOnly: true
> });
>
> $('#province').change(function() {
> var currprov = $('option:selected',
> this).text();
>
> $(function() {
> $.ajax({
> type: "GET",
> url: "xml/location.xml",
> dataType: "xml",
> success: function(xml) {
>
>
> $(xml).find("[EMAIL PROTECTED]'"+ currprov +"'] >
> TOWN_CITY_NAME").each(function(){
>
> towncity = $(this).text();
> });
> }
> });
> });
> });
> });
> </script>
>
>
> Anyone have any ideas?
>
> Thanks,
> Mat
>
