Howto get subchild from xml file

hacking_mike · March 22nd, 2010, 02:55 AM

I'm stuck again and hope someone can help me out.
I have this xml file

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<wizard wizardid="Workflow1">
  <action id="Uitleg2">Uitleg</action>
  <action id="Uitleg1">Uitleg</action>
  
  <action id="IfElseActivity1">IfElseActivity
       <action id="IfElseBranchActivity1">IfElseBranchActivity
             <action id="Uitleg3">Uitleg</action>
       </action>
  
       <action id="IfElseBranchActivity2">IfElseBranchActivity
            <action id="Uitleg5">Uitleg</action>
            <action id="Uitleg6">Uitleg</action>
       </action>
  
  </action>
</wizard>

With this xml file I generate a html form. When I get an IfElseActivity I create a dropdownbox. when the user selects something from that dropdownbox (IfelseBranchActivity1 or IfelseBranchActivity2) I want to read the xml file again and add the corresponding formfields. In this example, when the user selects "IfElseBranchActivity2" I read the xml file, get "Uitleg5" and "Uitleg6" which I use to add (in this case) two textfields to the the form.

I'm not sure how to do this. I guess I need something like this? http://www.w3schools.com/ajax/ajax_xmlfile.asp I'm not very familiair with this so I hope someone can help me a bit.

Old Pedant · March 22nd, 2010, 08:21 PM

Can you give us some *REAL* examples...or at least make up some examples that are readable and understandable???

I'm somewhat mystified why you would need to re-read the XML file instead of just generating the entire code all at once.

PeterPeiGuo · March 22nd, 2010, 10:46 PM

Sounds like you are looking for a way to get the child nodes of a given node in an XML document. Take a look at the following code and try to run it. It should help you understand (the first two buttons show the jquery way, and last two show the usual javascript way): (Run it with Firefox or Opera etc., unfortunately it does not work with IE8 as it is)

Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function show(parent) {
	children = document.getElementById(parent).getElementsByTagName("action");
	for (var i = 0; i < children.length; i ++) {
		alert(children[i].id);
	}
}
function jshow(parent) {
	$.each($("#" + parent).children("action"), function() {
		alert(this.id);
	});
}
</script>
<body>
<div style="display: none">
<wizard wizardid="Workflow1">
  <action id="Uitleg2">Uitleg</action>
  <action id="Uitleg1">Uitleg</action>
  
  <action id="IfElseActivity1">IfElseActivity
       <action id="IfElseBranchActivity1">IfElseBranchActivity
             <action id="Uitleg3">Uitleg</action>
       </action>
  
       <action id="IfElseBranchActivity2">IfElseBranchActivity
            <action id="Uitleg5">Uitleg</action>
            <action id="Uitleg6">Uitleg</action>
       </action>
  
  </action>
</wizard>
</div>
<input type="button" onclick="jshow('IfElseBranchActivity1')" value="IfElseBranchActivity1" />
<input type="button" onclick="jshow('IfElseBranchActivity2')" value="IfElseBranchActivity2" />
<input type="button" onclick="show('IfElseBranchActivity1')" value="IfElseBranchActivity1" />
<input type="button" onclick="show('IfElseBranchActivity2')" value="IfElseBranchActivity2" />
</body>
</html>

hacking_mike · March 23rd, 2010, 02:33 AM

Unfortunately, I need to run it on IE
Thanks so far. With this input I will try to create a better example.

PeterPeiGuo · March 23rd, 2010, 07:46 AM

After a nice sleep, here is the solution. IE didn't like non-html tags, so replace them with div (tested and worked in IE/Firefox/Opera):

Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function show(parent) {
        $("#" + parent + " div").each(function() {
                alert(this.id);
        });
}
</script>
<body>
<div style="display: none">
       <div id="1">
             <div id="1a"></div>
       </div>
       <div id="2">
            <div id="2a"></div>
            <div id="2b"></div>
       </div>
</div>
<input type="button" onclick="show('1')" value="1" />
<input type="button" onclick="show('2')" value="2" />
</body>
</html>

PeterPeiGuo · March 23rd, 2010, 08:04 AM

Here is the non-jquery version:

Code:

<html>
<head>
<script type="text/javascript">
function show(parent) {
	children = document.getElementById(parent).getElementsByTagName("div");
	for (var i = 0; i < children.length; i ++) {
		alert(children[i].id);
	}
}
</script>
<body>
<div style="display: none">
       <div id="1">
             <div id="1a"></div>
       </div>
       <div id="2">
            <div id="2a"></div>
            <div id="2b"></div>
       </div>
</div>
<input type="button" onclick="show('1')" value="1" />
<input type="button" onclick="show('2')" value="2" />
</body>
</html>

hacking_mike · March 23rd, 2010, 08:56 AM

Looks good. I'm at work at the moment but I will try it tonight.
Thanks so far. Come back on it tonight...

hacking_mike · March 25th, 2010, 09:58 AM

Quote:

Originally Posted by Old Pedant

Can you give us some *REAL* examples...or at least make up some examples that are readable and understandable???

I'm somewhat mystified why you would need to re-read the XML file instead of just generating the entire code all at once.

With the above xml I try to create an html form like this:

Code:

<form>
<input type=text Value="uitleg2" />

<input type=text Value="uitleg1" />

<select name="IfElseActivity1" OnChange="showDiv(this);" />
<option selected=""selected"" value=""> IfElseBranchActivity1</option>
<option selected=""selected"" value=""> IfElseBranchActivity2</option>
</select>

<input type=text Value="uitleg3" />

<input type=text Value="uitleg4" />


</form>

This xml can become very complicated so I need to create a routine which builds the form. What i try to do now is in ASP:

Code:

select case actionType
	
	case "Uitleg"
		if previousAction = "IfElseBranchActivity" or (previousDepth - depth = 2) then

			if previousDepth > depth then
				Response.Write "</select>"
				Response.Write "<br/>"
				
				response.write tempAction
				
				Response.Write "<div id='div" & branchId & "' class='c" & branchId  & " " & choiceId & "' style=" & visibleId & ">" & actionId & ": <input type=text Size=25 Name=uitleg2 readonly=yes Value="" Dit is de tekst van uitleg21  "" />" & "</div>" & "<br/>"
				
			end if

			tempAction = tempAction & "<div id='div" & branchId & "' class='c" & branchId & "' style=" & visibleId & ">" & actionId & ": <input type=text Size=25 Name=uitleg2 readonly=yes Value="" Dit is de tekst van uitleg22  "" />" & "</div>" & "<br/>"
		else	
			
	%>
		<div id="div<%= branchId %>" class="c<%= branchId %>" style="<%= visibleId %>" > <%= actionId %> : <input type=text Size=25 Name=uitleg2 readonly=yes Value="Dit is de tekst van uitleg23" /></div><br/>
	<%
		end if

	case "IfElseActivity"
		choiceId = actionId
		Response.Write "<select name="& chr(34) & actionId & chr(34) & "  OnChange=" & chr(34) & "showDiv(this);" & chr(34) & ">" & vbCrLf

	case "IfElseBranchActivity"
		branchId = branchId + 1
		visibleId = "'display: none;'"
		Response.Write "<option selected=""selected"" value=" & chr(34) & branchId & chr(34) & ">" & actionId & "</option>"

	case "Optie"
	
end select

This gets way to complicated.... to make it more complicated some the visibility of some fields depends on the choice the user makes in the select box. But the suggestion from peterpeiguo might do that.

I hope this clears things a bit. Maybe my approach (asp) is wrong