xml ajax request with jquery

OK.  for some reason I just can't seem to figure out making ajax requests with jquery and populating a select box.  Here are the parameters:

- Must use jQuery
- Simple form with the following fields (field type in parens)
     * City (text)
     * State (select)
     * ZIP (text)
     * InCity (select) - possible values are 'Y' or 'N'
     * GeoCodes (select) - will be populated by ajax call
- Request url:  GetGeoCodes.ashx
- Request data:  All fields from above minus GeoCodes
- Request method:  POST
- Data type returned:  XML (see example below)

Using the data returned in XML format, the GeoCodes select options should have the following format:

     <option value="[geocode]">[city], [county]</option>
<?xml version="1.0" encoding="utf-8" ?>
<items>
    <item>
        <city>DUBLIN</city>
        <county>DELAWARE</county>
        <geocode>360413100</geocode>
    </item>
    <item>
        <city>DUBLIN</city>
        <county>FRANKLIN</county>
        <geocode>360493100</geocode>
    </item>
    <item>
        <city>DUBLIN</city>
        <county>UNION</county>
        <geocode>361593100</geocode>
    </item>
</items>

Open in new window

LVL 12
Ashley BryantSenior Software EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ashley BryantSenior Software EngineerAuthor Commented:
If no one knows how to do this with XML, then I'll entertain switching the output from XML to JSON.
0
Michel PlungjanIT ExpertCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Ashley BryantSenior Software EngineerAuthor Commented:
I don't know if it's intentional, but your comments come across as somewhat condescending.  Of course I looked through the jquery site and did searches on google.  I have even been to the 2 year outdated blog that you linked there (yay Google).  For whatever reason, none of the examples I've managed to find work for me.

Maybe I should just try prototype instead.
0
sh0eCommented:
Do you have experience with Prototype?  It may make it easier to transition to jQuery, except for a few syntax differences.

If possible, may I see a demo site?  This way it's easier to better help you and understand;
what you are trying to do and where the problem is.

Normally, you would use
$.post(url, formData, function(data, textstatus){
  $('items',data); //select <items>
  //put your select option building code here
},'xml');

Note: The XML must be well formed, and must be in the same domain.
0
Michel PlungjanIT ExpertCommented:
Not condescending, just needed to know what you already had tried.
Perhaps there was just a syntax issue in what you had already done
0
Ashley BryantSenior Software EngineerAuthor Commented:
Nope.  I have no experience with prototype or jquery other than my seemingly futile efforts over the last day and a half.

Here's where things were left off yesterday:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>Woot</title>
	<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnSubmit").click(function() {
                $.ajax({
                    type: "POST",
                    url: "GetGeoCodes.ashx",
                    data: "c=" + $("#city") + "&s=" + $("#state") + "&z=" + $("#zip") + "&i=" + $("#in"),
                    dataType: "xml",
                    success: function(xml) {
                        alert("Data Saved: " + xml);
                    },
                    failure: function() {
                        alert("No good, homeslice.");
                    }
                });
            });
        });
    </script>
</head>
<body>
    City: <input type="text" id="city" /><br />
    State: <input type="text" id="state" /><br />
    Zip: <input type="text" id="zip" /><br />
    In City: <input type="text" id="in" /><br />
    <br />
    <input type="button" id="btnSubmit" value="Submit" />
    <br />
    <div id="result"></div>
    <br />
    <select id="geocodes">
    </select>
</body>
</html>

Open in new window

0
Ashley BryantSenior Software EngineerAuthor Commented:
So, I've had a breakthrough.  It's not really what I was looking for at first, but it works, and I think it's actually less work than I was doing before.  Since I have control over what was being output from GetGeoCodes.ashx, I changed it from XML to just spitting out the html for the options I wanted.  So, I just did things like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>Woot</title>
	<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnSubmit").click(function() {
                $("#geocodes").load("GetGeoCodes.ashx?c=" + $("#city") + "&s=" + $("#state") + "&z=" + $("#zip") + "&i=" + $("#in") + "");
            });
        });
    </script>
</head>
<body>
    City: <input type="text" id="city" /><br />
    State: <input type="text" id="state" /><br />
    Zip: <input type="text" id="zip" /><br />
    In City: <input type="text" id="in" /><br />
    <br />
    <input type="button" id="btnSubmit" value="Submit" />
    <br />
    <div id="result"></div>
    <br />
    <select id="geocodes">
    </select>
</body>
</html>

Open in new window

0
Ashley BryantSenior Software EngineerAuthor Commented:
Points split because ultimately mplungjan did give me the right place to start, but sh0e provided the vital info that I needed to request a page within the same domain.
0
Michel PlungjanIT ExpertCommented:
Great :)
0
sh0eCommented:
Feel free to ask more questions about jQuery.
I may be able to devote more attention to helping of late, and I would hate to see anyone give up on jQuery out of frustration.  It really makes things a lot easier once you get the hang of it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.