I need to retrive value of the variable to which has been assign value on click event. The value is dynamicaly read from xml. I know that correct value is assign to propertyNum as I tried command document.write(propertyNum); after value assign to just check it.

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<html>
<head>
<title>Preview</title>

<script type="text/javascript">
(document.getElementById ? DOMCapable = true : DOMCapable = false);

var propertyNum = '';

function show(property)
{	
	if(DOMCapable)
	{
		if(property == "group")
		{
			document.getElementById("group").style.display="block";
			document.getElementById("group").style.visibility="visible";
			
			document.getElementById("single").style.display="none";
			document.getElementById("single").style.visibility="hidden";
			propertyNum = "";
		}
		else
		{			
			propertyNum = property;
			//document.write(propertyNum);
			document.getElementById("single").style.display="block";
			document.getElementById("single").style.visibility="visible";
			
			document.getElementById("group").style.display="none";
			document.getElementById("group").style.visibility="hidden";					
		}		
	}
}

function getPropertyNum()
{
	return propertyNum;
}

</script>
</head>

<body>
<div id="group" onClick="show('single');">
            <p style="cursor: pointer;"> <xsl:attribute name="onClick">show('<xsl:value-of select='id/num'/>');</xsl:attribute>
            More details <xsl:value-of select='system/address1'/></p>

</div>

<div id="single" onClick="show('group');" style="display:none; visibility: hidden;">
	<p id="propertyNum" name="propertyNum">Selected property ID is :<script type="text/javascript"> getPropertyNum();</script>
	</p>
</div>
</body>
</html>

</xsl:template>
</xsl:stylesheet>

The red marked part however does not return any value. Can somebody advice?

> <script type="text/javascript"> getPropertyNum();</script> This just means that you are executing the function getPropertyNum() and ignoring the return value, nothing else. To make sure the value is reflected in the DOM tree, you need to either do document.write(getPropertyNum()) (not recommended) or use the HTML DOM.

A few other things:

  • Don't use tabs for indentation, at least while pasting the code. It makes it harder to read the code. Use 2/4 spaces or use an IDE / Editor which can convert from tabs to spaces.
  • Also paste the accompanying XML file / response so that the people who want to help you out can try running the snippet without having to create their own test cases / sample input.

Revert back in case of more queries.

Can you please elaborate on HTML DOM, I'm not too much familiar with it. What would be the command to retrive the variable?

Do you want to output the value of propertyNum once the <p> element is clicked? If so, then try this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Preview</title>
<script type="text/javascript">
    var DOMCapable = !!document.getElementById;
    var propertyNum = null;
    function show(property)
    {
        if(!DOMCapable) {
            return;
        }
        var grpStyle = document.getElementById("group").style;
        var sngStyle = document.getElementById("single").style;
        if(!grpStyle || !sngStyle) return;
        
        if(property == "group") {
            grpStyle.display = "block";
            grpStyle.visibility = "visible";
            sngStyle.display="none";
            sngStyle.visibility="hidden";
            propertyNum = "";
        } else {
            propertyNum = property;
            sngStyle.display = "block";
            sngStyle.visibility = "visible";
            grpStyle.display="none";
            grpStyle.visibility="hidden";					
		}
        var e = document.getElementById("txt");
        e.innerHTML = propertyNum;
        /*
        OR
        e.appendChild(document.createTextNode(String(propertyNum)));
        */
	}
</script>
</head>
<body>
<div id="group" onClick="show('single');">
<p style="cursor: pointer;">
    <xsl:attribute name="onclick">show('<xsl:value-of select='id/num'/>');</xsl:attribute>
    More details <xsl:value-of select='system/address1'/>
</p>
</div>
<div id="single" onclick="show('group');" style="display:none; visibility: hidden;">
<p id="propertyNum" name="propertyNum">Selected property ID is <span id="txt"></span></p>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Also it would be better if you create a style classes instead of changing individual style properties.

This command work for me partialy e.appendChild(document.createTextNode(String(propertyNum))); it returns integer picked from the pressed link that I expect, however followed by String single. How this string got there? I expected only integer...
The other command e.innerHTML = propertyNum; return only string single

The functions which I just posted would just output the value which was passed to them. So if propertyNum was "single" followed by a number, it would show the same. Did you try to alert the value of propertyNum by using window.alert(propertyNum) before using it?

Like I said, you need to paste the XML file which you are using for me to reproduce the problems you are facing.

Hmmm, looks like that I'm complicating my life with this xml and javascript exercise but now this problem get hold of me and I want to sort it. Bellow are attached the files as I have them in current stage. However now I realized I can't pass directly the value of javascript to xml. Would you know how to do this?
Many of the links point to microsoft msdn library and msxml but links are dead :(
PS: view.txt need change of extension to xsl. As daniweb does not support xsl format I changed to txt

> looks like that I'm complicating my life with this xml and javascript exercise but now this
> problem get hold of me and I want to sort it

Frankly I don't know what exactly are you trying to achieve here. It seems more like the case of using the wrong tools for the job here. Why bother with the complications involved with rendering XML using XSL and that too involving a hefty amount of Javascript. Debugging in your case will be nothing short of hell.

Coming back to the problem I don't think this is correct:

<xsl:for-each select="propertyList/property">
	<xsl:if test="id/num = 1">
    	<xsl:value-of select="general/bedrooms"/>Bedrooms,<xsl:value-of select="general/type"/>, <xsl:value-of select="general/tenure"/>
    </xsl:if>
</xsl:for-each>

If you try the code which I have fixed, you will see that clicking on the "div" opens up a new page. From this we can conclude that the XSL processing of the XML document is one pass and if you need any sort of dynamic behavior *after* the rendering is complete, you would have to resort to some other means. What you have done just won't work.

Here is something which works (in a broken sense, of course):

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Preview</title>

<style type="text/css">
table { width:800px; border:solid; border-bottom-style:groove; border-width:thick; border-color:#DCF3F5;border-collapse:collapse; margin-top:20px;}
td {padding-top:8px; padding-bottom:8px; padding-left: 10px; padding-right: 10px;}
th {padding-top:8px; padding-bottom:8px; padding-left: 10px;}
td.just {text-align:justify;}
td.empty {padding-top:0px; padding-bottom:0px; padding-left: 0px; padding-right: 0px;}
</style>

<script type="text/javascript">
    var DOMCapable = !!document.getElementById;
    var propertyNum = null;
    function show(property)
    {
        if(!DOMCapable) {
            return;
        }
        var grpStyle = document.getElementById("group").style;
        var sngStyle = document.getElementById("single").style;
        if(!grpStyle || !sngStyle) return;
        
        if(property == "group") {
            grpStyle.display = "block";
            grpStyle.visibility = "visible";
            sngStyle.display="none";
            sngStyle.visibility="hidden";
            propertyNum = "";
            window.alert("Alert inside if " +propertyNum);
        } else {
            propertyNum = property;
            sngStyle.display = "block";
            sngStyle.visibility = "visible";
            grpStyle.display="none";
            grpStyle.visibility="hidden";
	    	window.alert("Alert inside else " +propertyNum);
            var e = document.getElementById("txt");
            window.alert("Alert before innerHTML " +propertyNum);
        }
	}
</script>
</head>
<body>
<div id="group" onClick="show('single');">
<table align="center" border="1" width="800">
	<tr>
    	<td width="200" class="empty" />
        <td width="200" class="empty" />
        <td width="200" class="empty" />
        <td width="200" class="empty" />
    </tr>
	<xsl:for-each select="propertyList/property">
    	<tr>        
        	<td><xsl:value-of select="general/sale_status"/></td>
            <td colspan="2"><xsl:value-of select="general/bedrooms"/> Bedrooms, <xsl:value-of select="general/type"/>, <xsl:value-of select="general/tenure"/></td>
            <td>Add to selection: <input type="checkbox" /></td>
        </tr>
        <tr>
            <td colspan="3"><xsl:value-of select="system/address1"/>, <xsl:value-of select="system/address2"/>, <xsl:value-of select="system/town"/>, <xsl:value-of select="system/post_code"/></td>
            <td><xsl:value-of select="general/price"/></td>
        </tr>
        <tr>
        	<td colspan="2" width="400" class="just"><xsl:value-of select="notes/full_description"/></td>
            <td colspan="2">
            <img><xsl:attribute name="src"><xsl:value-of select='photos/image/image_src'/></xsl:attribute></img>
            </td>
        </tr>
        <tr>
        	<td colspan="4">            
            <p style="cursor: pointer;"> <xsl:attribute name="onClick">show('<xsl:value-of select='id/num'/>');</xsl:attribute>
            More details <xsl:value-of select='system/address1'/></p>
            </td>
        </tr>
	</xsl:for-each>
    <tr>
    	<td colspan="4"><input type="submit" value="Save Selection" /></td>
    </tr>
</table>
</div>
<br /><br />
<div id="single" onclick="show('group');" style="display:none; visibility: hidden;">
<xsl:for-each select="propertyList/property">
	<xsl:if test="id/num = 2">
    	<xsl:value-of select="general/bedrooms"/>Bedrooms,<xsl:value-of select="general/type"/>, <xsl:value-of select="general/tenure"/>
    </xsl:if>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

That being said, if you need the functionality of "div" being shown / hidden at the click of a button, you would need to render / display each and every record / block which are initially hidden and are shown when the click event occurs i.e. no XPATH, just a lot of hidden div's.

commented: Thank you for going trough the mess of my code and helping me find the solution. +7

I think I know what you mean, I will try to implement it...
I hope it will get alright. Thank you for your help and time

OK, job done. From multiple option I'm able to select one and display full details for it, then return back.
Thank you for your help ~s.o.s~

> OK, job done.
Good to hear that. :-)

> From multiple option I'm able to select one and display full details for it, then return back.
Maybe you should consider posting the code in case if you have made any significant changes so that everyone can benefit from it.

> Thank you for your help ~s.o.s~
You are welcome.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.