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?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
0
 
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
 
sh0eConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.