I'm trying to use a .get and it won't work right?

I'm trying to use a .get and it won't work right?

I am relatively new to jQuery but have used it a bit and trying something new but I must be missing some very basic point of it.

.get()
My html Code (Pretty simple, just a div)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>jQuery 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="scripts/op2.js" type="text/javascript"></script>
    </head>

    <body>
    <div id="selectCountry"></div>
    </body>
    </html>













My javascript:
  1. // JavaScript Document
    $().ready(function() {
        var strCountryList = "<select id='ddlCountries'>";
        intCountUp=0;
        $.get("/jquery/data/countries.xml",  function(data){
            $(data).find('Countries').each(function() {
                var strAbbrev = $(this).find('abbreviation').text();
                var strName = $(this).find('name').text();
                strCountryList += "<option value='"+strAbbrev+"'>"+strName+"</option>";
                intCountUp++;
            })                     
        },"xml");
        alert(1);
        //alert(intCountUp); //just a count of the countries on the list (currently 129)
       
        strCountryList += "</select>";
        $('#selectCountry').after(strCountryList);
        }
    );

















(Partial) My XML:
  1. <CountryList>
    <Countries>
        <uid>6</uid>
        <abbreviation>AL</abbreviation>
        <name>Albania</name>
      </Countries>
      <Countries>
        <uid>5</uid>
        <abbreviation>AI</abbreviation>
        <name>Anguilla</name>
      </Countries>
      <Countries>
        <uid>4</uid>
        <abbreviation>AG</abbreviation>
        <name>Antigua and Barbuda</name>
      </Countries>
    ... (for full list)
    </CountryList>
















Now for the problem, when the alert(1) is there, the code appears to work fine, a select is added and is populated with all the data from the countries list.  But if you comment out just that one line (alert(1)); the select is created with NO elements in it.  That is the only change made a comment out of an alert.
It doesn't matter what the alert says, could be 1, could be the count of the list as it was generated, I alerted the strCountryList as it was building and worked fine - showed results and growing, but if I alert the same string after the closing of the $.get() it just shows the first line (<select....).  If I alert it twice, it shows up the first time as just the first line, but the 2nd alert shows the full string of what should be there.

What am I missing between the closing of the $.get() and the alert that should be there?  Or am I going about this the wrong way, this is about the 3rd way i've tried to do it and all of them have the same problem, I need that alert there to get the string to work.

Thanks in advance and any help is appreciated.

Full working (sorta) demo on my site at:

http://www.philipcutler.com/jquery/jquery2.html