JSFiddle - React, Tailwind, and code Playground

by Sandeep Neela

HTML

<div>
  <p> Observe the XML section simply displays:</p>
  <xml id="XMLClientEvents">
    <clientevents>
      <openmodalevent id="openModal1" setpgmode="Mode1">
        <height>200</height>
        <width>400</width>
        <arguments>
          <argument required="true" name="GUID"></argument>
        </arguments>
      </openmodalevent>
      <openmodalevent id="openModal2" setpgmode="Mode2">
        <height>300</height>
        <width>500</width>
      </openmodalevent>
      <openmodalevent id="openModal3" setpgmode="Mode3">
        <height>600</height>
        <width>800</width>
        <arguments>
          <argument required="true" name="GUID">
          </argument>
        </arguments>
      </openmodalevent>
    </clientevents>
  </xml>
</div>
<button id="btnTest">Test</button>
<div id="results">
</div>

JavaScript

function ProcessXML() {
  //call function to get the node object for eventId
  var $targetNode = getTargetNode('openModal1');
  //use find() to navigate the node
  var height = $targetNode.find('height').text();
  var width = $targetNode.find('width').text();
  var newPageMode = $targetNode.attr('setpgmode');
  $("#results").append("<br><br>modal 1: " + height + " x " + width + " " + newPageMode);
  $targetNode = getTargetNode('openModal2');
  //use find() to navigate the node
  height = $targetNode.find('height').text();
  width = $targetNode.find('width').text();
  newPageMode = $targetNode.attr('setpgmode');
  $("#results").append("<br>modal 2: " + height + " x " + width + " " + newPageMode);
  $targetNode = getTargetNode('openModal3');
  //use find() to navigate the node
  height = $targetNode.find('height').text();
  width = $targetNode.find('width').text();
  newPageMode = $targetNode.attr('setpgmode');
  $("#results").append("<br>modal 3: " + height + " x " + width + " " + newPageMode);
}

function getTargetNode(eventId) {
  //parse() the innerHTML
  var xmlDoc = $.parseXML(document.getElementById("XMLClientEvents").innerHTML);
  //Convert to jQuery object
  var $xmlObject = $(xmlDoc);
  //find the node based on argument
  return $xmlObject.find('clientevents').find('openmodalevent[id=' + eventId + ']');
}

$(document).ready(function() {
  $("#btnTest").click(function() {
    ProcessXML();
  });
});