CODEWITHSUNDEEP
jqueryxml
Katerine459
Katerine459

Reputation: 485

JQuery - look up XML property values

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".

(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. :)

Upvotes: 0

Views: 32

Answers (1)

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

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');

Upvotes: 1

Related Questions