Jquery Country/State Json and more

Go To StackoverFlow.com

0

What I am trying to accomplish is the following:

I have a Country box.

<select class="country singleListBox" name="Country">
    <option value="UNITED STATES">UNITED STATES</option>
    <% Call GetCountry %>
</select>

All GetCountry does is populate it with the countries the client has enabled.

I have a state box.

<select class="autoship singleListBox" name="State">
    <option value="active">Utah</option>
</select>

I have a page that builds out JSON that will either contain the list of states for the selected country, or return with an empty value.

Here is what it looks like not empty:

{
    "regions": [
        {
            "region": "AK"
        },
        {
            "region": "AL"
        },
        {
            "region": "AR"
        },
        {
            "region": "AS"
        },
        {
            "region": "AZ"
        },
        {
            "region": "CA"
        },
        {
            "region": "CO"
        },
        {
            "region": "CT"
        },
        {
            "region": "DE"
        },
        {
            "region": "DC"
        },
        {
            "region": "FM"
        },
        {
            "region": "FL"
        },
        {
            "region": "GA"
        },
        {
            "region": "GU"
        },
        {
            "region": "HI"
        },
        {
            "region": "ID"
        },
        {
            "region": "IL"
        },
        {
            "region": "IN"
        },
        {
            "region": "IA"
        },
        {
            "region": "KS"
        },
        {
            "region": "KY"
        },
        {
            "region": "LA"
        },
        {
            "region": "ME"
        },
        {
            "region": "MH"
        },
        {
            "region": "MD"
        },
        {
            "region": "MA"
        },
        {
            "region": "MI"
        },
        {
            "region": "MN"
        },
        {
            "region": "MS"
        },
        {
            "region": "MO"
        },
        {
            "region": "MT"
        },
        {
            "region": "NE"
        },
        {
            "region": "NV"
        },
        {
            "region": "NH"
        },
        {
            "region": "NJ"
        },
        {
            "region": "NM"
        },
        {
            "region": "NY"
        },
        {
            "region": "NC"
        },
        {
            "region": "ND"
        },
        {
            "region": "MP"
        },
        {
            "region": "OH"
        },
        {
            "region": "OK"
        },
        {
            "region": "OR"
        },
        {
            "region": "PW"
        },
        {
            "region": "PA"
        },
        {
            "region": "PR"
        },
        {
            "region": "RI"
        },
        {
            "region": "SC"
        },
        {
            "region": "SD"
        },
        {
            "region": "TN"
        },
        {
            "region": "TX"
        },
        {
            "region": "UT"
        },
        {
            "region": "VT"
        },
        {
            "region": "VI"
        },
        {
            "region": "VA"
        },
        {
            "region": "WA"
        },
        {
            "region": "WV"
        },
        {
            "region": "WI"
        },
        {
            "region": "WY"
        },
        {
            "region": "AA"
        },
        {
            "region": "AE"
        },
        {
            "region": "AP"
        }
    ]
}

Here is what it looks like empty:

{
    "regions": [
        {
            "region": "empty"
        }
    ]
}

What I am trying to do, is when they change the value of the Country it posts to my json page, and spits back the regions found, or leaves region with a string value of empty.

The trick for me is if it returns back a list of regions I need this to be built into the above select -> option section. But if it returns empty, I then need an input box here of type text to take the place of the select -> option.

What is the best way/best practice to accomplish this? I can handle the posting of the JSON when they change the country, the part I think I will have trouble with is switching out the select for the input when the region is empty.

I am trying to parse this into a jquery object with not much success.

$('select[name=Country]').change(function () {
                console.log(this.value);
                $.getJSON('message_center_getRegions.asp', { country: this.value }, function (json) {
                var options = '';
                var obj = $.parseJSON(json);
                console.log('count' + obj.regions.count);
                console.log(json); 
            })

I console.log(json) and it shows an object with 62 different regions. When I select a country that I don't have regions for in the database it correctly shows it as being empty. I can't seem to get obj to not be null console.log('count' + obj.regions.count); says obj is null.

2012-04-03 21:59
by James Wilson
Ideally, if there are no regions, the response should not return "regions" : [ { "region" : "empty" } ]. It should just return an empty list like this "regions" : []xbonez 2012-04-03 22:01
@xbonez Thanks, I can change that. I wasn't sure how to check for empty json - James Wilson 2012-04-03 22:02
See answer belo - xbonez 2012-04-03 22:04


1

Ideally, if there are no regions, the response should not return

"regions" : [ { "region" : "empty" } ]

It should just return an empty list like this

"regions" : []

Now, when you parse the JSON into a Javascript object, regions.count will be 0.

So,

// parse response into JS object

if (regions.count > 0)
{
    //create select element here
}
else
{
    //input element here
}
2012-04-03 22:04
by xbonez
This makes perfect sense, thank you. Is it better to create the HTML elements and hide them both and use the above code to hide/show whichever is needed, or it is better to create the whole element within the jquery here? Never done the second, not sure where to begin if that is the better way - James Wilson 2012-04-03 22:09
Ideally, you should create them as needed so you don't have unnecessary elements in your DOM. However, the effect of having ONE extraneous element in your DOM wouldn't be noticeable - xbonez 2012-04-03 22:17
any idea what I am doing wrong when trying to parse this into an object - James Wilson 2012-04-03 22:24
When you do getJSON, Jquery automatically parses the JSON string as a JS object. You do not need to manually parse it - xbonez 2012-04-03 22:25
hrm when I try to do console.log(json.regions.count) it says it is undefined. I have tried json.count, json.regions.region.count all come back undefined - James Wilson 2012-04-03 22:29
Just do console.log(json) and then inspect the object - xbonez 2012-04-03 22:34
It seems I had to do json.regions.length to get the count back. That works out perfectly - James Wilson 2012-04-03 22:35
Ah, yeah...my bad - xbonez 2012-04-03 22:36