[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

xml ajax request with jquery

Posted on 2008-11-18
11
Medium Priority
?
1,293 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:Ashley Bryant
  • 5
  • 4
  • 2
11 Comments
 
LVL 12

Author Comment

by:Ashley Bryant
ID: 22989304
If no one knows how to do this with XML, then I'll entertain switching the output from XML to JSON.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1400 total points
ID: 22992767
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22992776
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 12

Author Comment

by:Ashley Bryant
ID: 22994297
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
 
LVL 16

Assisted Solution

by:sh0e
sh0e earned 600 total points
ID: 22994683
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22996298
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
 
LVL 12

Author Comment

by:Ashley Bryant
ID: 22996399
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
 
LVL 12

Author Comment

by:Ashley Bryant
ID: 22997636
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
 
LVL 12

Author Closing Comment

by:Ashley Bryant
ID: 31518016
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22998309
Great :)
0
 
LVL 16

Expert Comment

by:sh0e
ID: 23000970
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month19 days, 11 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question