jQuery Forum

The documentation for the showErrors option in the Validation plug-in has a line that puts the output into something that has id=summary.  What is that something in HTML? I have tried an empty div with id=summary, but I get no display.  What's the matching HTML that I need for the following jQuery with the selector id=summary?

$(".selector").validate({ showErrors: function(errorMap, errorList) 
      { $("#summary").html("Your form contains " + this.numberOfInvalids() 
      + " errors, see details below."); this.defaultShowErrors(); }

The Validation plug-in works when submit is clicked, and the error messages display by each input box.  I copied the errorContainer demo code that is in the options documentation.  In addition to the individual error messages,  I'd like to have a listing and message appear under or next to the submit button like that demo.  In the jQuery below, the first alert fires, Validation runs and puts error messages on input boxes, but the second alert does not fire, and no bullet point listing appears by the submit button.  What do I need to change? Any tips would be appreciated.

jQuery:

    $('#submitAndConfirm').click( function ()
        { alert("|" + 'click' + "|1st-submit");
                $("#DataInput").validate({
                    errorContainer: "#messageBox1, #messageBox2",
                    errorLabelContainer: "#messageBox1 ul",
                    wrapper: "li", debug:true,
                    submitHandler: function() { alert("Submitted!") }
                })
        });


HTML:

            <p>
                    <label for="submitAndConfirm">I'm done. </label>
                    <input type="submit" name="submitAndConfirm" id="submitAndConfirm" />
            </p>
  
        </div>  <!-- to close the closeOutSection div -->
    </div> <!-- End of sections -->
</form>         
</div> <!-- End ui-widget -->

            <style>#messageBox1, #messageBox2 { display: none }</style>
            <div id="messageBox1" name="messageBox1" style="display:none;">
                <ul></ul>
            </div>
           
            <div id="messageBox2" name="messageBox2" style="display:none;">
                <h3>There are errors in your form, see details above!</h3>
            </div>

I am validating user input in Accordion sections when the user clicks a button at the end of each section - this all works. If a section validates, I want to get the number of the section, and activate the next section.  The getter command seems to return an object - per my alert. The Accordion documentation says something about its response type being 'first child', as I interpret (or misinterpret) it. How do I get the number of the Accordion section that just completed validation?  The problem part of the code is below.

jQuery:

        else
        //if all fields validate OK,
            {
            var activeSectionNumber=$( ".causesValidation" ).accordion( "option", "active" );
            alert("|" + activeSectionNumber + "|3d");   //returns [object,Object]
            var nextSectionNumber=activeSectionNumber+1;  // does not compute because of the object
            $('#sections').accordion('activate', nextSectionNumber );
            }

HTML:

        <h4><a href = "#location">Location</a></h4>  <!--start of an Accordion section -->
        <div id = "locationSection" class="validationGroup">

      <!--input boxes in divs -->

      <button type="button" id="toPriceSection" name="toPriceSection" class="causesValidation" title="Done       here.">I'm done here. Next Section</button>

I have an Accordion working. To advance from section to section, I want to use both click on the Accordion bar or click a button in the section. This works so long as it is a straight pass through. (section=section+1). If the user goes back, out of sequence, to change a field in a prior section, things 'get out of whack'.  I need some way to have a variable in the HTML (that does not show to the user) that identifies the Accordion section and pass it to the Accordion activate method.

I currently have this in the HTML of each Accordion section.

        <h4><a href = "#location">Location</a></h4>       
        <div id = "locationSection" class="validationGroup">
        <a href="javascript:number_in_link('0')"></a>  <!--use number to advance Accordion programmatically-->

and my javascript is

        function number_in_link(number)
        {
        var sectionNumber=number;
        }

I got this from a tutorial, but it does not work. I've checked with alerts and no number passes.

How do I fix this? -- or what is a good way to pass a section number in the HTML to a jQuery method?

Over the past couple weeks, I have noticed several problem reports / questions with code samples that run off the page to the right and become unreadable.  I don't see it in every case, but it seems new.  Has some change caused a format problem?

Here's an example

https://forum.jquery.com/topic/this-nested-tabs-works-for-me-i-had-to-make-sure-i-included-content

I have an Accordion working. In addition to clicking on the headers, I have buttons to advance to the next section because some users don't know Accordion. When Accordion advances to the next section, either via the button or the header, the next header does not go to the top of the page. It goes beyond the top - putting some content off the screen.  How do I get Accordion to advance so each header is at the top of the screen? Is there some setting in Accordion to do this? Or is it necessary to create destination anchors in jQuery, and if so, how is that done?  Here's the code.

HTML:

<div id = "sections" style='display: none;' >  <!-- div to define the Accordion -->
    <h4><a href = "#">Location</a></h4>  <!-- Accordion header -->
        <div id = "locationSection">
            <!-- stuff -->
        <button type="button" id="toPriceSection" name="toPriceSection" >Next Section</button>
    </div> <!-- End locationSection -->

    <h4><a id = "priceAndDescription" href = "#priceAndDescription">Price and Description</a></h4>
    <div id = "priceSection">  
            <!-- stuff -->
        <button type="button" id="toPhotoSection" name="toPhotoSection" >Next Section</button> 
    </div> <!-- End priceSection -->

    <h4><a id = "photoUpload" href="#photoUpload">Photo uploads</a></h4>
    <div id="photoSection">  <!-- Accordion header -->
            <!-- stuff -->
        <button type="button" id="toSearchSection" name="toSearchWordSection" >Next Section</button>
    </div>  <!-- to close the photoSection div -->

JQuery:

 $( "#sections" ).accordion({
 autoHeight: false,
 navigation: true,
 }).show();

</div> <!-- End of Accordion sections -->

I'm currently using about 30 of the rules() form of Validation, rather than the key-value pairs.  Most of them work fine and display the default message. The first problem is a pair of inputs for existing email and password - the first 14 lines of html below.  They do not validate and the 6th and 7th lines of jQuery below break the Accordion widget.  All elements display, but not in an Accordion. Further down on the page, I have input boxes for new email and password.  These work and do not break Accordion. !  I've compared a lot and moved a lot around, but I can't find the problem.

The second problem is in a text area box. It does not validate and the rules() for it - line 8 of the jQuery below - break Accordion.  When I remove all the rules() code (but it has to be all of it) and use key-value pairs, this text area box validates. Code is below.

JQuery:

        $("#DataInput").validate();
        //the next 2 lines set input validation only for 3Step countries
        $("#stateProvince").rules("add", {required:true, validCharsCheck: true});
        $("#city3").rules("add", {required: true, validCharsCheck: true});
        //these lines set up validation for both 2Step and 3Step countries
        $("#contactEmailAddress").rules("add", {email: true});      //breaks Accordion - why?
        $("#contactPassword").rules("add", {validCharsCheck: true, rangelength: [6, 12]});  //breaks Accordion - why?

        $("#rentalDescription").rules("add", {required: true, validCharsCheck: true});  //breaks Accordion - why?

      //this Validation code works on a different set of email and password input boxes, and is OK
        $("#contactPassword1").rules("add", {required: true, rangelength: [6, 12], validCharsCheck: true});
        $("#contactPassword2").rules("add", {required: true, rangelength: [6, 12], validCharsCheck: true, equalTo: "#contactPassword1"});
        $("#rentalPhoneNumber").rules("add", {validCharsCheck: true});
        $("#rentalContactName").rules("add", {validCharsCheck: true});

HTML:

<div class="ui-widget">
<form action = "InputProcessor.php" method="POST" id = "DataInput" name = "DataInput" accept-charset = "utf-8" enctype = "form/multipart">

<button type="button" id="editPosting" name="editPosting" title="creates a dialog box to begin editing an existing posting">Edit an existing posting</button>
<div id="editEntryItems">   <!-- used to create the dialog box for editing existing postings -->
<label for="contactEmailAddress"></label>
<p>My E-Mail Address Is:</p>
<input type="text" name="contactEmailAddress" id="contactEmailAddress" size="50" maxlength="50" />

<p>My Password Is:</p>
<label for="contactPassword"></label> 
<input type="password" name="contactPassword" id="contactPassword" size="12" maxlength="12" />
</div> <!-- End editEntryItems -->

<!-- this text area input does not validate via rules(), but does validate with key-value pairs -->
<p id="DescriptionMessage1">Optional: Extended description (1,000 characters)</p>
<textarea name="Description" cols="120" rows="9" maxlength="1024"></textarea>
</div>



<!-- these email and password inputs validate OK as opposed to the ones above that do not -->

<div id="emailEntry">
<!--ACCEPT UNSTRUCTURED E-MAIL ADDRESS TWICE -->
<p>
<label for="contactEmailAddress1"><span class="required">Enter your e-mail address:</span> </label>
<input type="text" name="contactEmailAddress1" id="contactEmailAddress1" size="36" maxlength="50" />
</p>
<p>
<label for="contactEmailAddress2"><span class="required">Re-enter the e-mail address:</span></label>
<input type="text" name="contactEmailAddress2" id="contactEmailAddress2" size="36" maxlength="50" />
</p>
</div>  <!-- to close the emailEntry div-->

<div id="passwordEntry">
<!--ACCEPT UNSTRUCTURED PASSWORD TWICE -->
<p>
<label for="contactPassword1"><span class="required">Enter a password (6 to 12 characters):</span></label>
<input type="password" name="contactPassword1" id="contactPassword1" size="12" maxlength="12" />
</p>
<p>
<label for="contactPassword2"><span class="required">Re-enter your password to confirm it :</span></label>
<input type="password" name="contactPassword2" id="contactPassword2" size="12" maxlength="12" />
</p>
</div>  <!--to close the passwordEntry div -->

The Validation plug-in is very cool. I have a lot working, but I can't get required with dependency to work. I have 2 different ways of Autocompleting a city name depending on the country previously selected via radio buttons. City is  required input, but there are 2 input fields, so one field is required for some countries and the other city field is required for all other countries.  I have tried the 5th line below with == and with quotes around the abbreviations - no luck. But I think you can see the logic I'm trying to create.  Maybe I don't understand the validate() method. Also, I'm wondering if the x||y logic will work.  I've had trouble with that in other places.  Here's my code for this element in Validation

jQuery:

    $("#DataInput").validate({
        rules: {
            city3: {
            required: function(element) {
                return $('input[name=country]').val() = US||GB;  //and a few other countries
                }  //if country selected is US or GB, the input with id="city3" is required.
            },    // For all other countries, city3 is hidden and a completed form does not require it

            city2: {
            required: function(element) {
                return $('input[name=country]').val() = CA||AU; //and many other countries
                }  //if country selected is CA or AU, the input with id="city2" is required.
            },    // For all other countries, city2 is hidden and a completed form does not require it
      }

        //sets city3 as required, depending on user clicks
        $('input[name=country]').click(function() {
        $("#city3").valid();
        });

HTML:

<input type="text" id="city3" name="city3" />

The Validation plug-in is very cool. I have a lot working, but I can't get required with dependency to work. I have 2 different ways of Autocompleting a city name depending on the country previously selected via radio buttons. City is  required input, but there are 2 input fields, so one field is required for some countries and the other city field is required for all other countries.  I have tried the 5th line below with == and with quotes around the abbreviations - no luck. But I think you can see the logic I'm trying to create.  Maybe I don't understand the validate() method. Also, I'm wondering if the x||y logic will work.  I've had trouble with that in other places.  Here's my code for this element in Validation

jQuery:

    $("#DataInput").validate({
        rules: {
            city3: {
            required: function(element) {
                return $('input[name=country]').val() = US||GB;  //and a few other countries
                }  //if country selected is US or GB, the input with id="city3" is required.
            },    // For all other countries, city3 is hidden and a completed form does not require it

            city2: {
            required: function(element) {
                return $('input[name=country]').val() = CA||AU; //and many other countries
                }  //if country selected is CA or AU, the input with id="city2" is required.
            },    // For all other countries, city2 is hidden and a completed form does not require it
      }

        //sets city3 as required, depending on user clicks
        $('input[name=country]').click(function() {
        $("#city3").valid();
        });

HTML:

<input type="text" id="city3" name="city3" />

My accordion works. Since some folks are not familiar with the accordion, I also want a button in Section 1 to open accordion Section 2. The button shows in Section 1, but I can't get the button to fire the accordion separator/header to open Section 2.  I tried to  follow Dan Wellman's tutorial at  http://www.packtpub.com/article/jquery-ui-accordion-widget-part1  What am I doing wrong ?

jQuery:

    $(function ()
    {
    $('#sectionsOfAccordion').accordion();
    $('#toPriceSection').click( function ()
        {
        $('#sectionsOfAccordion').accordion('activate',1);
        });
    });

HTML:

<div id = "sectionsOfAccordion">

<div id = "section1">
<h4><a href = "#">Location</a></h4>
<div id = "locationSection">
// stuff
</div>
</div> //end section1

<div id = "section2">
<h4 id = "priceAndDescription" ><a href = "#"> Price and Description </a></h4>
<div id = "priceSection">
//stuff
</div>
</div> //end section1

// and so forth
</div> //end sectionsOfAccordion

<button type="button" id="toPriceSection" name="toPriceSection" >I'm done here. Next Section</button>

I just reviewed several jQuery plug-ins for validation on my web page, and found 3 questionable plug-ins listed.

Form Validation gives a server not found message for home page, documentation, and demo.
jValidate gives 404 messages for home page, documentation, and demo.
jqValidate shows a demo, but it does not work.

If someone is in charge of the quality of the plug-in listings, they should check these out, and possibly delete them.  They serve no value to the jQuery community that I can see.

My Dialog widget is working and all the radio buttons in it drive changes in the underlying page.  The Tabs also show up, but all the radio buttons display on the first tab.  Though all tabs are visible, nothing happens when they are clicked/hovered.  I've read a lot of Google searches on this problem, but I can't figure it out for my situation.  Firefox says "uncaught exception: jQuery UI Tabs: Mismatching fragment identifier.a" whenever a tab is hovered or clicked. I've checked the 'fragments' and see no mismatches.  What am I missing?  Here's the code.

jQuery:

    var countryChooser=$('#countryChoices').dialog(
    {
    autoOpen: false,
    bgiframe: true,
    height: 500,
    width: 850,
    resizable: false,
    draggable: true,
    title: "Click to select another country",
    open: function()
        {
        $('#regions').tabs(
            {
            event: "mouseover"
            })
        },
    buttons: {
            'Close / continue location input': function()
                {
                $(this).dialog('close');
                }
            }
 
    });

HTML:

<div id="countryChoices">   <!-- used to create the dialog box for country choices -->
<div id="regions">  <!-- used to create organizing tabs inside the dialog box -->
    <ul>
        <li><a href="#tabs-1">North America</a></li>
        <li><a href="#tabs-2">Caribbean</a></li>
        <li><a href="#tabs-3">Europe</a></li>
        <li><a href="#tabs-4">Australia/Oceania</a></li>
        <li><a href="#tabs-5">Asia</a></li>
        <li><a href="#tabs-6">Africa</a></li>
    </ul>
    <div id="#tabs-1">                        
    <label><input type="radio" id="unitedStates"  name="country" value="US">United States</label>
    <label><input type="radio" id="canada"  name="country" value="CA">Canada</label>
    </div> <!-- end for #tabs-1 -->
   
    <div id="#tabs-2">
    <label><input type="radio" id="bermuda"  name="country" value="BM">Bermuda</label>
    <label><input type="radio" id="bahamas"  name="country" value="BS">Bahamas</label>
    <label><input type="radio" id="jamaica"  name="country" value="JM">Jamaica</p></label>
    </div> <!-- end for #tabs-2 -->

. . . and so forth.  I can post all the HTML, if it helps, but its more of the same.

</div>  <!-- end of regions -->   
</div>  <!-- end of countryChoices -->

I've tried using merge and extend to combine arrays inside an ajax option.  They both work, but neither as they are supposed to.  In the code below using extend(), only the contents of objectB display in the dropdown box. When I change it to merge( objectA, objectB ), only the contents of objectA display. How do I get the combined contents of both arrays to display?  (to be more precise, it is the single object in the argument position that displays - if I reverse the argument order, in either function, I get reversed results in the dropdown display.)

                $.ajax(
                {
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: geonamesData,
                    success: function( data )
                    {   var objectA=null;
                        var objectB=null;
                        var objectC=null;
                        response( $.map( data.geonames, function( item )
                        { objectA={
                                    label: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                    value: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : ""),
                                    name: item.name   
                                  };
                          objectB={
                                    label: item.name + (item.adminName2 ? ", " + item.adminName2 : ""),
                                    value: item.name + (item.adminName2 ? ", " + item.adminName2 : ""),
                                    name: item.name
                                   };
                          objectC=$.extend({},objectA, objectB);
                          return objectC;
                        }));
                    }
                });

I want to add and eventually modify some of the response data that I get from geonames.org in an Autocomplete. Currently, I just want to get a proof of concept working.  I tried adding label: 'test', in the success: function below.  It does not work - no matter where I place it. I tried the jQuery add() function to add some text, as in .add('test'), but it does not work - I get a Firebug undefined error.  I tried .add() with arbitrary data, as a test, and I get the same error.  This code is below.  How can I add other response elements inside the success: function.  Basically, I want to merge 2 sources of data - one from geonames - say 8 response lines, and one from my own code - say another 3 response lines in the drop down, and it seemed like success: was the place to do it.

                $.ajax(
                {
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: geonamesData,
                    success: function( data )
                    {
                        response( $.map( data.geonames, function( item )
                        {
                            return{
                                    label: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                    value: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : ""),
                                    name: item.name 
                                   }
                        })).add($("#hiddenState").val());
                    }
                });

I have some radio buttons, for example
<label><input type="radio" id="unitedStates"  name="country" value="US">United States</label>
They show the selected value, e.g., United States, with the radio button, but elsewhere on the page, I want to state the selected country in a paragraph statement.

The following jQuery statement
$('#selectedCountry').text("Selected country was:"+ $('input[name=country]:checked').html());
puts Selected country was: on the page, but it does not concatenate in the innerHTML of the selected radio button.

How do I get    Selected country was: United States     to appear?

My multiple tier Autocomplete works for geography like country, state, city.  For some cities, I have neighborhood data to autocomplete; for other cities, there is no data and the input box should take whatever the user types in as a neighborhood - that is, autocomplete should be turned off in that input case for the neighborhood tier.  The function below, inside the select: option,  works if the neighborhood data exists, but it fails to turn off Autocomplete for neighborhood if the data does not exist.  I suspect the if statement is not the proper test. What should I change?

            select: function( event, ui )
                {
                    $(this).val(ui.item.value); //set input box value of selected city
                    $("#hiddenCity3").val(ui.item.name);  //put the city name in the hidden input box id=hiddenCity3
                    //check if neighborhood data exists for this city, if not turn off autocomplete for neighborhood input
                    jQuery.ajax(
                        {
                        url: "getNeighborhood.php",
                        data: {
                            country: countryPick, // or $('input[name=country]:checked').val(),
                            adminCode1: $("#hiddenState").val(),
                            city: $("#hiddenCity3").val()
                            },
                        type: "POST",
                        dataType: "json",
                        success: function (data)
                            {
                            response ($.map(data, function (item)
                                {
                                return {
                                        label: item.name,
                                        value: item.name
                                        }
                                if (data==="")
                                $("#neighborhood3").autocomplete("destroy");
                                //if data exists, leave neighborhood autocomplete enabled and proceed
                                }));
                            }
                        });                   
                },
            minLength: 2,


When a city with no data is entered, the response from the server is 

[]

I presume that means null.
More recently, I presume it means undefined, and I tried
if (typeof data=="undefined")
It does not work either,and gives the error message

The neighborhood Autocomplete tier continues to work after the autocomplete("destroy") line, but returns a null or undefined object, as would be expected with no data for that case. Autocomplete is not turned off.  Maybe the if statement is incorrect.  How do I test for null / undefined JSON objects returned from the server?

I'm looking for general directions about; 1. how to put functions inside an ajax Autocomplete, and 2. how to turn Autocomplete on and off.  I haven't started yet.  I want to get the approach right, and if it exists, I'd like to know about tutorials that cover this specific subject.  I've read several times the Autocomplete documentation on the jQuery site and still have many questions.

In a tiered Autocomplete (e.g. country / state), I want a function to trigger in the first selection that will look in a database for the existance of certain data.  If data exists, the 2d tier Autocomplete will function, if the data does not exist, Autocomplete in the second tier should be turned off, and the input box should accept the user input as a normal input box.

Questions:
1. Do I just put a function in the select:  like

            select: function( event, ui )
                {
                    $(this).val(ui.item.value);
                    $("#hidden").val(ui.item.name); 
                    function (state)
                    {
                        //do stuff with an if statement looking for null in the json returned data
                    }
                },
In this example, does state have to be a ui.item or can it (hopefully) be any variable in the code?

2. If the returned data is null, how do I turn off Autocomplete in the next stage, e.g., state, not the country where the select occurs?  There are several possible commands, including - destroy, disable, and close. Which should be used?  Do I use the selector of the next tier to indicate that is the Autocomplete to turn off, and will it still be turned off when the user gets to that input box?

Thanks for directional advice and/or references to tutorials and examples of this type of thing.

My change function allows users to switch from country to country and get different text and features. It works when changing country selections. But at initial page load, it does not fire jQuery change to set the text for the default / initial country. When I change away and then back to the default/initial country, change fires and shows the proper information and features. I have tried document.ready with a change function both inside the switch selections and outside the change function. Neither work - they don't fire the hide, show and other jQuery in the switch cases at doc ready.  Its not clear to me what function will fire the jQuery change function at doc ready.  Here's the code.  The country selection below is just 2 countries to keep it simple, but actually, there are many.

    $(document).ready(function()
    {
    //1st tier - select country:           
    //Initialize country
    $('input[name=country]:first').attr('checked', true);   //Set first radio button (United States)
    $('input[name=country]').change(function ()
    {                                                                               
    // change user instructions to be country specific
        switch ($('input[name=country]:checked').val())
        {
            case 'US':
            $('#stateMessage1').text('2. Select a state or territory of the United States.');
            $('#stateMessage2').text('Start typing a state of the United States, then click on it in the dropdown box.');
            $('#threeSelects').show();
            $('#twoSelects').hide();
            //select via 3 steps                        
            break;           
            case 'CA':
            $('#stateMessage1').text('2. Select a province or territory of Canada.');
            $('#stateMessage2').text('Start typing a province of Canada, then click on it in the dropdown box.');
            $('#twoSelects').show();
            $('#threeSelects').hide();
            //select town via 2 steps - country, town           
            break;         
        }
    });
    });

The page does 2 strange things. First, the countrySelected alert fires 25 times. After that initial burst, whenever the user changes the country, it fires only once.  Second, both branches of the if/else function are identical (for testing purposes) except for the jQuery input box selector, but the function executes for the city3 if branch and not for the city2 else branch. The show and hide functions work to change divs in both branches.  I'm suspecting a problem in my change function, or maybe in the function statement format, but I can't find it.  What should I change - or test?  Here's the summarized code:

jQuery
    //Enable changes to the country selection and change page text as the user selections change     
    $('input[name=country]').change(function ()
    {                                                                                     
    // change user instructions to be country specific
        switch ($('input[name=country]:checked').val())
        { 
            case 'US':
            $('#stateMessage1').text('2. Select state in US ');
            $('#threeSelects').show();
            $('#twoSelects').hide();
            var countrySelected=$('input[name=country]:checked').val();
            getCityFromGeonames(countrySelected); //select town via 3 steps - country, state, town
            alert("|" + countrySelected + "|1st");
            break;
            case 'CA':
            $('#stateMessage1').text('2. Select a province of Canada.');
            $('#twoSelects').show();
            $('#threeSelects').hide();
            var countrySelected=$('input[name=country]:checked').val();
            getCityFromGeonames(countrySelected ); //select town via 2 steps - country, town
            break;
            default:
            $('#stateMessage1').text('Click ');
            $('#stateMessage2').text('Only the countries . . . '); break;
        };
    }).change();

        //3d tier - city: autocomplete selection
        // city2 refers to the city input in the 2 part div; city3 refers to the 3 part div
             
        function getCityFromGeonames(countryPick)
        {
        if(countryPick==="US" )
        {
        $("#city3").autocomplete
        ({           
            // an Autocomplete function that works
        });
        }
        else
        {
        $("#city2").autocomplete
        ({           
            // an identical Autocomplete function, for testing. It does not work
        });
        };
        }

HTML
<div id=threeSelects>
<input type="text" id="city3" name="city3" size="75" maxlength="75" />
</div>  <!-- for threeSelects -->

<div id=twoSelects>
<input type="text" id="city2" name="city2" size="75" maxlength="75" />
</div>    <!-- for twoSelects -->

I have an Autocomplete widget inside a function that works slightly differently depending on the country. It works. I want the user to be able to switch from country to country to country. I started with

        getCityFromGeonames("#city2"); //select town via 2 steps - country, town
        getCityFromGeonames("#city3"); //select town via 3 steps - country, stateProvince, town

This will select in the city2 input, then in the city3 input, then no further action is possible until you reload the page.  So I put a change function around it.

        $("#city2").change(function ()
        {   
        getCityFromGeonames("#city2"); //select town via 2 steps - country, town
        getCityFromGeonames("#city3"); //select town via 3 steps - country, stateProvince, town
        ).change();
        };

Now the page will not load.  All of this is inside a document.ready function with other functions and jQuery.

What do I need to change?

I use a fairly complicated Autocomplete in 2 different input boxes. A single if statement in the Autocomplete code takes care of the differences for the 2 boxes.  It would be really sweet to have a selector something like   $( "#city3" || "city2" ).autocomplete  When I try it, the first input box autocompletes, but the second does not.  Is there a way to put "or" logic in a selector so it works with both id's, or do I have to construct a function with the code inside?

My ajax data option in an Autocomplete works. The whole code section works. Then when I put an if statement into the data: option, I get a Firebug error saying - missing: after property id - and the page fails.  I have tried a lot of changes in syntax - with no success. The code section is below. The intent is that when the statement is false, the last line should not execute.  Document ready sets country so that the test is true, but I doubt the script executes that far.  The jQuery seems to fail on load.  When the if statement line is removed, the code works. The if statement selector is the same as the country: selector above it, which works.  What change is necessary?

        $( "#city" ).autocomplete
        ({                  
            source: function( request, response )
            {             
                $.ajax(
                {
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data:
                    {                       
                        featureClass: "P",
                        country: $('input[name=country]:checked').val(),                                                  
                        style: "full",
                        maxRows: 10,
                        name_startsWith: request.term,
                        if($('input[name=country]:checked').val()==="US")
                            adminCode1: $("#hiddenState").val()
                    },

. . . other stuff follows

I have an Autocomplete for state and province names running.  I want to pass the state abbreviation to the next cascade of Autocomplete.  I created a hidden input and I want to set it to the abbreviation when the state name is selected, then I'll select it for use in the next tier Autocomplete.  I've tried several things, done a lot of Google searching and reading jQuery books, but I need some help. The stateProvince input box autocompletes and selects the full state name.  The hidden input does not get set with the abbreviation. The alert is empty. Here is the relevant code.

HTML:

<input type="text" id="stateProvince" name="stateProvince" size="50" maxlength="50" /><input type="hidden" id="hiddenState" name="hiddenState" />

Autocomplete source ajax;

        $("#stateProvince").autocomplete
        ({
            source: function( request, response )
            {                           
                //Pass the selected country to the php to limit the stateProvince selection to just that country  
                $.ajax(
                {
                    url: "getStateProvince.php",
                    data: {
                            term: request.term, 
                            country: $('input[name=country]:checked').val()    //Pass the selected country to php
                          },       
                    type: "POST", 
                    dataType: "json",
                    success: function( data )
                    {                                          
                        response( $.map( data, function( item )
                        {
                            return{                                   
                                    label: item.stateName,
                                    value: item.name,
                                    abbrev: item.stateAbbrev                                                                   
                                   }
                        }));
                    },
                    select: function( event,ui )
                    {
                    $(this).val(ui.item.value);
                    $("#hiddenState").$(this).val(ui.item.abbrev);
                    }
                });
                alert('|' + $("#hiddenState").val() + '|2nd');  //shows no content               
            },           
            minLength: 2
        });

JSON example returned from php:

[{"stateName":"Alabama","name":"Alabama","stateAbbrev":"AL"},{"stateName":"Alaska","name":"Alaska","stateAbbrev":"AK"}] 




I'm having trouble creating an alert to see the data inside the success function.  The code is below and does not create a drop down table, though other things work.  I'm trying to look at the returned data in the success function and at the values of the label and value items. The alerts I've tried do not trigger, or create syntax errors. What alert(s) should I use?

jQuery Autocomplete ajax:

        $("#stateProvince").autocomplete
        ({
            source: function( request, response )
            {            
                //Pass the selected country to the query to limit the selection to just that country
                $.ajax(
                {
                    url: "getStateProvince.php",
                    data: {
                            term: request.term,
                            country: $('input[name=country]:checked').val(),    //Pass the selected country to php
                          },       
                    type: "POST",  // a jQuery ajax POST transmits in querystring format in utf-8
                    dataType: "json",   //return data in json format                                                                        
                    success: function( data )
                    {                      
                        response( $.map( data, function( item )
                        {
                            return{                                   
                                    label: item.stateName,
                                    value: item.stateAbbrev                                
                                   }
                        }));
                    }
                });               
            },
            minLength: 2
        });

example of array of JSON objects created by the php:

[{"stateName":"Alabama","stateAbbrev":"AL"},{"stateName":"Alaska","stateAbbrev":"AK"}]