jQuery Forum

I have some Google Maps V3 working. I want to change one of them to a Google static map. The documentation says to just put an image <img> with their 'special sauce' on the page. As a test, I copy and paste a Google example (that starts as shown below) into an jQuery html function:

$("#map_canvas").html( <img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn . . . etc >);

I want to put this into a div as follows and replace the text:

        <div id="map_canvas" ><h1>Some text</h1> </div>

When I use the html() expression above, the page will not load and I get a Firebug error:  unexpected identifier   at the html() line.

I can't figure it out. What's wrong?

I posted this recently on the Getting Started forum. If anyone here has suggestions, I'd like to hear them. But I'm also wondering if this should be viewed as an Autocomplete bug, or is this "normal" behavior for UI widgets to be a lot slower than core jQuery functions. Let me know if it is a bug and I'll report it.

The change() function seems to act more quickly than the Autocomplete function, so the term fragment in the input box was being used to create a map, instead of the full selection from the Autocomplete dropdown. I have "solved" the problem with a setTimeout to delay the processing 500 msec until Autocomplete populates the input value with the full city text, but this feels like a cludge. At one point I used blur() instead of change(), but it executes only once and the user can't change cities several times. Also, I use the same map creation code for a street address input box that does not have Autocomplete. It uses blur() instead of change(), but is otherwise the same and there is no timing problem. Whatever the issue, it is associated with Autocomplete.

What is the underlying issue here, and how should this be written? Here's relevant code.

    //change the Google Map after a user enters a new city
    $( "#city" ).change(function() {
        //setTimeout is here to let Autocomplete finish before gCity is set. W/o delay, gCity is a term fragment and Google tries to map it.
        setTimeout(function() { 
            //if state and city are present
            if ( $("#city").val().length > 0 && $("#state").val().length > 0 ) {
                var gCity = $("#city").val() + ", " + $("#state").val();
 
            // code to display a map centered on gCity

        }, 500);
    });

The change() function seems to act more quickly than the Autocomplete function, so the term fragment in the input box was being used to create a map, instead of the full selection from the Autocomplete dropdown. I have "solved" the problem with a setTimeout to delay the processing 500 msec until Autocomplete populates the input value with the full city text, but this feels like a cludge. At one point I used blur() instead of change(), but it executes only once and the user can't change cities several times. Also, I use the same map creation code for a street address input box that does not have Autocomplete. It uses blur() instead of change(), but is otherwise the same and there is no timing problem. Whatever the issue, it is associated with Autocomplete.

What is the underlying issue here, and how should this be written? Here's relevant code.

    //change the Google Map after a user enters a new city
    $( "#city" ).change(function() {
        //setTimeout is here to let Autocomplete finish before gCity is set. W/o delay, gCity is a term fragment and Google tries to map it.
        setTimeout(function() { 
            //if state and city are present
            if ( $("#city").val().length > 0 && $("#state").val().length > 0 ) {
                var gCity = $("#city").val() + ", " + $("#state").val();
 
            // code to display a map centered on gCity

        }, 500);
    });

I have a Google Map running and get the country displayed to set a radio button for that country. The code retrieves the countryCode (variable is below) from Google, but I can't get the radio button to set. I am either not selecting properly or not setting properly. I've tried several things. Here's the relevant code.

function initializeMap() {
      //do stuff to create a map and retrieve the country code for that location
      for (var j = 0; j < results[0].address_components[i].types.length; j++ ) {
            var countryCode = results[0].address_components[i].short_name; //countryCode from Google
            $('input[name=country]').val(countryCode).prop('checked', true); // does not set radio button
            return;
            }
            else {countryCode = "US"; } //default to US, if Google Geocode fails
      //do other stuff dealing with error conditions
}
window.onload = initializeMap;

//current statement, outside initializeMap(), that does set a default radio button - to be replaced by the above.
$('input[name=country]:first').attr('checked', true);

The HTML is like this sample:
<label><input type="radio" id="unitedStates"  name="country" value="US">United States</label>

I have a custom method in Validation to check for unwanted characters. It works, however if the field is left empty, Validation behaves strangely. No error message appears next to the input box (which is correct),  but Validation records an "invalid" in its numberOfInvalids() method, which I show elsewhere in the form.  Anybody seen this before?  The custom method code is below. See any reason it should trigger an invalid, but not an error message?

        // add method to valid() to check for unwanted characters
        //when an input box is empty, Validation shows no error on the box, but records it in numberOfInvalids().
        $.validator.addMethod('validCharsCheck', function (value)
        {
            var result = true;
            // unwanted characters
            var iChars = "@#$%^`&*=[]\\\;/{}|\":<>?";
            for (var i = 0; i < value.length; i++)
                {
                if (iChars.indexOf(value.charAt(i)) != -1)
                    {
                    return false;
                    }
                }
            return result;
        },
        'Use numbers and alphabetic characters');

I'm using the class=  style of setting up Validation. I have everything working except: 1. the equalTo method for email and repeat email, and 2. the rangelength method of the length of the password.  It turns out the documentation example of equalTo in the housing web page demo is incorrect.(  http://jquery.bassistance.de/validate/demo/multipart/ ) You can put 2 different email addresses in and Validation will not identify the difference and does not create an error message.

I've tried several things, but can't get the class style to validate equalTo or rangelength.  The 2 current expressions I'm using are:

class="required email equalTo:'#contactEmailAddress1' "
class="required rangelength[6, 12]"

For the email, required and email format properly validate, but equalTo does not. What should I change?

This may look like a Validation plug-in problem, but I don't think so. It seems the problem is in handling JS arrays or in jQuery selectors, or in using JS methods.

I have Validation working across a form (I fire it several times before Submit to check sections of the form), and a tinyMCE editor working in 1 textarea. I want to move the contents of the tinyMCE iframe into the textarea before (that's the key here - before) the Submit button is pressed so that the contents can be validated in the section before Submit. I've used tinyMCE.triggerSave(); in several ways to move contents and then fire Validation before Submit. None work.  I am beginning to believe that tinyMCE contents cannot be moved by any Javascript other than Submit, but I don't see that stated anywhere.  In tinyMCE, I've tried onchange_callback: and handle_node_change_callback: to fire functions with triggerSave and other saving commands. I can get the contents of tinyMCE to validate when I press Submit twice (others have noted this peculiarity), but not in any other way. Also, when errors are corrected in tinyMCE, Validation does not revalidate until Submit is pressed.

2 questions -
Anyone know how to move tinyMCE contents into the textarea without hitting Submit?
Does CKEditor allow updates other than via Submit, and if so, where's a tutorial or example?

Here's an example of code that is supposed to be triggered by tinyMCE's onchange_callback, but only triggers upon the second click on Submit.

        function tinyMCESetValue(inst)
            {
            var content = tinyMCE.activeEditor.getContent();
            if (tinyMCE.activeEditor.isDirty()) {tinyMCE.triggerSave(true, true);}
            // other save expressions that have been tried
            //$("#selector").val(content);
            //$("textarea.tinymce").val(content);
            //tinyMCE.triggerSave();
            //ed.save();
            alert("some change"); //does not fire
            }

I have a long form broken up into Accordion sections. In moving from section to section, the page ends up in random places - often with the top of the section not visible, so the user has to scroll down to get started. I tried to use an HTML destination anchor that fires on the Accordion change event. It works with any section, but only once. Then the Accordion freezes and will not move to any other section. The code is below. What needs to change?  Or is there some other way to get Accordion sections to open at a predictable spot on the screen?

    $(function() {
        $( "#sections" ).accordion({
            autoHeight: false,
            change: function(event, ui)
                { $("#topSpot").html(<a href="http://webpage.php#topSpot"></a>).change().trigger('click');
                $( "#sections" ).accordion({ event: 'click' });  //try to re-initialize. Does not work.
                },
        }).show(); 
    });


BTW, The .change().trigger('click') has no impact. The code behaves as described with or without .change().trigger('click')

I have a lengthy form that I present in sections via Accordion. I validate each section before moving to the next section, and in the last section, I validate the entire form (there is a reason for this double validation). When I include the errorLabelContainer option to list all errors after the Submit button in the last Accordion section, then the error messages do not appear next to each element while validating each section. I've looked at numerous examples and done testing on my own page, and it seems that when errorLabelContainer is present, the individual element messages do not appear. I tried using the errorPlacement option to 'over-ride' errorLabelContainer, but still, no error messages appear next to the elements. I can get one, or the other, but not both sets of error messages.

I want error messages to appear next to each element, and in a summary via errorLabelContainer.  Has anyone found a way to do that?

When certain changes occur on my page, I re-set / re-initialize most of the fields by setting them to null. Most of the re-setting works fine with jQuery statements like

$("#zipCode").val(null);
$('input:file').val(null);
$(":checkbox").prop("checked", false);

However, the single textarea box (which has no ID, only a name attribute) does not re-set. I've tried several selectors and tried .text() instead of .val(). 

$('input[name=rentalDescription]').val(null);

The HTML for the textarea is
<textarea name="rentalDescription" cols="115" rows="9"  maxlength="1000"></textarea>

What has to change to clear any text in the textarea box?

I have an Accordion and I validate each section. It works. In the last section, I run Validation on the entire form when the user clicks on Submit. It works. However, the summary message from errorContainer and errorLabelContainer do not appear.  I have copied the code from the documentation for errorContainer, but something else is preventing it from working. In prior posts, I've seen that some success: option is a problem. I use a success: option in Autocomplete, but presumably that is not the issue. Does anyone have thoughts / experience about where to look in my code for the problem - or how to use Firebug to find the problem? I'm looking at a blank wall.

Here's some code. In the jQuery, the alert fires and validate() runs, but the errorContainer does not appear.

jQuery:

    $('#submitAndConfirm').click( function ()
        {         alert("|" + 'click' + "|1st-submit");
                $("#rentDataInput").validate(
                {
                    errorContainer: "#messageBox1, #messageBox2",
                    errorLabelContainer: "#messageBox1 ul",
                    wrapper: "li", debug:true,
                    showErrors: function (errorMap, errorList)
                        {
                        $("div #messageBox1").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");                                                              
                        this.defaultShowErrors();
                        },
                    submitHandler: function() { alert("Submitted!") }
                })
        });

HTML:

            <p>
                    <label for="submitAndConfirm">I'm done. </label>
                    <input type="submit" name="submitAndConfirm" id="submitAndConfirm" value="Send me a confirmation e-mail" />
            </p>
</form>

            <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>
           
</div> <!-- End ui-widget -->

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 -->