Replace XML nodeValue via Javascript

Question

OK, I have an XML/XSLT pairing (inserted into my HTML via Javascript from 2 external files) that creates a button on the page with the nodeValue taken from a tag called 'JobID' (a generated GUID).

<button id="5f8294ca-fe5a-4da9-847b-da99df999000" onclick="markFinished(this.id)" type="button">Finished</button>

Thus returning the id of the button to a function...

function markFinished(clicked_id)
{
    cid = clicked_id;
    document.write(cid)
}

The XML look like this...

<?xml version="1.0" encoding="utf-8"?>
<CurrentJobs>
  <Job>
    <JobID>25657287-cc52-415b-8781-be37d5098656</JobID>
    <Status>a-current</Status>
  </Job>
  <Job>
    <JobID>5f8294ca-fe5a-4da9-847b-da99df999000</JobID>
    <Status>a-current</Status>
  </Job>
  <Job>
    <JobID>05a84779-5801-4645-a7f9-74529ea5298b</JobID>
    <Status>a-current</Status>
  </Job>
  <Job>
    <JobID>07df3deb-4935-4504-8822-a73ccea038ae</JobID>
    <Status>b-complete</Status>
  </Job>
  <Job>
    <JobID>078c496d-ac60-48e7-b9fe-a0e1f78ff2c5</JobID>
    <Status>c-upcoming</Status>
  </Job>
  <Job>
    <JobID>07ec868e-d294-4bb3-807d-00df66f5bab2</JobID>
    <Status>c-upcoming</Status>
  </Job>
  <Job>
    <JobID>8bdeee5f-2bf6-4e44-8af8-69f600048dfe</JobID>
    <Status>a-current</Status>
  </Job>
</CurrentJobs>

I need a way for my function to match the clicked_id to the JobID and replace the nextSibling (Status) with 'b-finished'. Any help here would be greatly appreciated.

Currently just using Javascript to import both the XML and XSLT files. Would this be easier to do via jQuery? — Sean Donnahoe
– Sean Donnahoe, Commented Jan 19, 2015 at 21:18

adeneo · Accepted Answer · 2015-01-16 20:31:43Z

2

You'd do that by parsing the XML and traversing it nodes.

As the value you're looking for is the text, you have to iterate and check each element until a match is found, then get the next element and replace the text content of that

var parser = new DOMParser();
var doc = parser.parseFromString(xml, "application/xml");

function markFinished(clicked_id) {
    var cid = clicked_id;

    var nodes = doc.getElementsByTagName('JobID'),
        match = null;

    for (var i=nodes.length; i--;) {
        if ( nodes[i].textContent.trim() === clicked_id ) {
            match = nodes[i];
            break;
        }
    }

    if (match) {
        match.nextSibling.textContent = 'b-finished'
    }
}

FIDDLE

answered Jan 16, 2015 at 20:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

adeneo Over a year ago

Does the Fiddle not work? Do you have an XML string, or is it already parsed etc ?

Sean Donnahoe Over a year ago

The XML and XSLT are called from an HTML file via onLoad() in the body tag, so theXML is already parsed. The XML displays a production schedule. When the production department clicks the 'finished' button, It calls the markFinished() function and that job in the XML is moved to the bottom of the displayed XML doc.

Sean Donnahoe Over a year ago

OK, the fiddle seems to work, but the live script doesn't. How do I refresh the document body after the script runs? Also, is the script only changing the result inside memory or is it actually changing my XML doc? I would prefer the latter and have it saved.

adeneo Over a year ago

The above example parses a string, if you want to update something in the DOM, you'll have to use DOM methods to access it ?

Sean Donnahoe Over a year ago

That's what I need to do, but I don't know how to do it. working with XML via Javascript is relatively new to me.

Collectives™ on Stack Overflow

Replace XML nodeValue via Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related