JQuery - look up XML property values

Question

My apologies for the simple question. I'm afraid, while I understand VBA, VBScript, TSQL, and some C# and Java, JQuery is kind of Greek to me (it's so radically different!). And so, though I've found many answers to this question, I haven't been able to understand any of them, and so I can't figure out which code I should customize in each of the examples I've seen, or even if the solution I'm seeing is relevant to my question. So I was kind of hoping for a plain solution to a very specific question, which I could then customize? Many, many thanks. :)

I have the following XML file (generated from SQL Server):

<BillingRates>
    <BillingRate BillingRateID="3" BillingRateName="Name1" ChargeTypeName="Service" DefaultBillingAmt="106.0000" UnitsDisplay="Hours" ChargeTypeID="1"/>
    <BillingRate BillingRateID="1" BillingRateName="Name2" ChargeTypeName="Service" DefaultBillingAmt="106.0000" UnitsDisplay="Hours" ChargeTypeID="1"/>
    <BillingRate BillingRateID="4" BillingRateName="Name3" ChargeTypeName="Service" DefaultBillingAmt="70.0000" UnitsDisplay="Hours" ChargeTypeID="1"/>
    ...
</BillingRates>

What I want to do, is when a select control is changed, I want to get the DefaultBillingAmount that corresponds to the BillingRateID that the user picked (in the select control). We'll call the select control "cboBillingRateID".

The form is located in (from the root): Jobs/BillItemEdit.html
The XML file is located in (from the root): XML/BillingRates.xml

(It's actually an aspx file, but it's important that the form doesn't completely reload, so other items entered in the form don't go away. So no Postbacks. If you pretend this is for a regular html form for the sake of this question, I can adapt it for aspx).

Many thanks again! :)

UPDATE: Thanks for the help, Andre Figueiredo -- I've mostly gotten it working. There's just one issue that is puzzling me. Here's the code, mostly based on yours (this is from my aspx code, so controls are referenced with <%=controlname.ClientID %>, but the end result is that the right control is referenced in the resulting HTML):

$('#<%=cboBillingRateID.ClientID %>').change(getBillingRate);

function getBillingRate() {
    $.ajax({
        url: '../XML/BillingRates.xml',
        type: 'GET',
        dataType: 'xml',
        success: function (xml) {
            var id = $('#<%=cboBillingRateID.ClientID %>').val();
            var xmlDoc = $($.parseXML(xml));
            var billingRate = xmlDoc
                .find('BillingRate[BillingRateID="' + id + '"]')
                .attr('DefaultBillingAmt');
            alert("id = " + id + ", billingRate = " + billingRate.toString());
            $('#<%=BillingRate.ClientID %>').val(billingRate.toString());
        },
        error: function () {
            alert("An error occurred while processing XML file.");
        }
    }); 
}

The only issue is that nothing is going into billingRate. When I choose the "Name1" record, the alert (which I added for debugging purposes) says, "id = 1, billingRate = undefined." No errors in the Chrome console. I'm drawing a blank on what could be causing this?

Many thanks again. :)

Possible duplicate of [How to parse XML using jQuery?](https://stackoverflow.com/questions/7228141/how-to-parse-xml-using-jquery) — Andre Figueiredo, Apr 07 '18 at 00:09

score 1 · Answer 1 · answered Apr 07 '18 at 00:09

1

You can use JS libraries to parse XML into an object, ie:

var id = $('#cboBillingRateID').val();
var obj = somelib(xml);
var billingRate = obj.BillingRates.find(function(billingRate){
  return billingRate.BillingRateID == id;
})

Or you can use jQuery.parseXML:

var id = $('#cboBillingRateID').val();
var xmlDoc = $($.parseXML(xml));
var billingRate = xmlDoc
  .find('BillingRate[BillingRateID="' + id + '"]')
  .attr('DefaultBillingAmt');

answered Apr 07 '18 at 00:09

Andre Figueiredo

12,930
8
48
74

Many thanks. I managed to get this MOSTLY working: $.ajax({ url: '../XML/BillingRates.xml', type: 'GET', dataType: 'xml', success: function (xml) { var id = $('#cboBillingRateID').val(); var xmlDoc = $($.parseXML(xml)); var billingRate = xmlDoc .find('BillingRate[BillingRateID="' + id + '"]') .attr('DefaultBillingAmt'); (continued...) – Katerine459 Apr 07 '18 at 00:40
(continued) alert("id = " + id + ", billingRate = " + billingRate); $('#BillingRate').val(billingRate); }, error: function () { alert("An error occurred while processing XML file."); } }); – Katerine459 Apr 07 '18 at 00:41
...but when I run it, the output from the alert debug statement is, "id = 1, billingRate = undefined". (Apologies for the bad formatting. I tried to get formatting working, but apparently comments don't want it to work). – Katerine459 Apr 07 '18 at 00:44
Since the code in comments won't format, I updated my question so you can actually see what I'm trying to do, and read what the current problem is. :) – Katerine459 Apr 07 '18 at 05:01
Use `console.log` to debug each step, from `xml` to `billingRate` – Andre Figueiredo Apr 07 '18 at 16:26

JQuery - look up XML property values

1 Answers1