Ashley Bryant
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>
- 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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I mean google is your friend
http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/
http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/
ASKER
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.
Maybe I should just try prototype instead.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Not condescending, just needed to know what you already had tried.
Perhaps there was just a syntax issue in what you had already done
Perhaps there was just a syntax issue in what you had already done
ASKER
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:
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>
ASKER
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>
ASKER
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 :)
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.
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.
ASKER