Link to home
Start Free TrialLog in
Avatar of Ashley Bryant
Ashley BryantFlag for United States of America

asked on

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

Avatar of Ashley Bryant
Ashley Bryant
Flag of United States of America image

ASKER

If no one knows how to do this with XML, then I'll entertain switching the output from XML to JSON.
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Not condescending, just needed to know what you already had tried.
Perhaps there was just a syntax issue in what you had already done
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

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

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.
Great :)
Avatar of sh0e
sh0e

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.