I am working on a ASP.NET website and I need to get XML from an external url. It works great using ASP.NET MVC’s XmlDocument but now I need to parse the XML without going to the server again, so client-side. An example of what I want to do:
Presume we have 3 <select> dropdownlists, the first one contains all carmakes, the second one contains all car models and the third one all types. So, when the page loads, we have the first dropdown with all carmakes and the other two are disabled. When I select a make, I want to load all models of the selected make (dropdown nr. 3 still disabled). Then when I select a car model, I want to load all types of the selected model.
All makes can be loaded by ASP.NET’s XmlDocument which works fine already, but the other data needs to be parsed client-side. I tried this using jQuery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "-- hidden --",
dataType: "xml",
success: parseXml
});
function parseXml(xml){
$(xml).find("Make").each(function(){
$("#output").append($(this).find("carmake").text() + "<br />");
});
}
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
But that doesn’t work. I read a lot of questions where the sulution was to use crossDomain: true and dataType: jsonp but that doesn’t work either. I also read the server I’m getting the XML from needs to support jsonp, but there is no way I can do something about that, because it is not my server but a webservice.
As you may have already seen, the sample-url to get all makes is -- hidden --/make.alx. Then when the user selected a make, I can get the models of the make by sending the carcode in the url, for example: -- hidden --/model.alx?carcode=2
So in short the question is: How can I get this working with jQuery if possible and if not, how can I get this working another way? I there a nice way to do this using ASP.NET MVC but without having the whole page reloaded?
This website is a nice example of what I want. As you can see here just under the header you can select a car make, model and type.
Thanks in advance!
Not possible through jQuery, but you can create a proxy page for this in your website.