Send data to XML via AJAX jquery

Question

I have a small script, where on change I am getting the ID of a select, I then want to take that ID and send it via "data:" through the jQuery AJAX call. I am using XML for my data and I am sending this ID for it only returns results with that specific ID?

I understand how to do this with PHP, but never worked with XML and jQuery before.

Thoughts?

Thanks,

Ryan

UPDATE:

Here is a piece of my code, sorry I didnt post it before.

function populateDropDown(){
    console.log("populateDropDown is called");
    $(".user-selection").show();
    $.ajax({
     type: "GET",
     url: "employee.xml",
     dataType: "xml",
     data: "access_info.level"+ type_id,
     success: function(xml) {
      console.log("success!");
      var select = $('#select-user');
      $(xml).find('employee').each(function(){
       var fn = $(this).find('first_name').text();
       var ln = $(this).find('last_name').text();
       //var value = $(this).find('access_level').text();
       select.append("<option class='ddindent' value='"+ fn +"'>"+fn +" "+ ln +"</option>");
      });
      select.children(":first").text("Please make a selection").attr("selected",true);
     }
    });
    console.log("from popdrop"+type_id)
}

That is an exmaple, I need to send a parameter to only return X results, in this case its an ID that I grabbed from the drop-down.

Answer 1

Using the AJAX call in jQuery you can accomplish something like this:

$('#yourselect').change(function(){ 
$.ajax({
 type: "GET",
 url: "employee.xml",
 dataType: "xml",
 data: "id=" + $(this).val,
 success: function(xml){
    //code to handle the successful return from the server
    //your existing handler should work here
  }
 });
});

However, it may be easier to use one of the higher level functions as found in the forms plugin for submitting a form via AJAX.

UPDATE: OK. Now I see your update. I think this may still help.

Answer 2

If you are interested in parsing the AJAX response, here is a quick and dirty XML parser example block for jQuery:

  $(request.responseXML).find("marker").each(function() {
      var marker = $(this);
      var point = {
          marker.attr("lat"),
          marker.attr("lng")
      };
  });

Answer 3

Here is some code i had for working with Google maps, Jquery and XML. Should show you how to get a file and parse it, as well as execute any new methods.

$(".map-overlay-left").click(function () {  
    var map = new GMap2(document.getElementById('map-holder'));
    $("#map-holder").hide('slow');         
    var gmarkers = [];
    var side_bar_html = "";
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    var Africa = new GLatLng(-2.767478,23.730469);
    map.setCenter(Africa, 4); 

    $.get("http://xx.xxx.xxxx.xxx/xml-feed-google-maps",{},function(xml) {
     $('marker',xml).each(function(i) {
      html = $(this).text();
      lat = $(this).attr("lat");
      lng = $(this).attr("lng");
      label = $(this).attr("label");
      var point = new GLatLng(lat,lng);
      var marker = createMarker(point,label,html);
      map.addOverlay(marker);
     });
    });

    $("#map-holder").show('slow');
});

The XML File looks like this:

<markers> 
    <marker lat="11.547812" lng="104.915957" label="foo"> 
     <infowindow><![CDATA[><div class="infobox"><h2><a href="link">Anchor Text</a></h2><p>HTML Content</p></div>]]></infowindow> 
    </marker> 
    <marker lat="11.547812" lng="104.915957" label="foo"> 
     <infowindow><![CDATA[><div class="infobox"><h2><a href="link">Anchor Text</a></h2><p>HTML Content</p></div>]]></infowindow> 
    </marker> 
    <marker lat="11.547812" lng="104.915957" label="foo"> 
     <infowindow><![CDATA[><div class="infobox"><h2><a href="link">Anchor Text</a></h2><p>HTML Content</p></div>]]></infowindow> 
    </marker> 
<markers>