Reputation: 125
I'm creating a web page that has a dropdown list and a button. What this page does is basically updates the value of the original dropdown to a new selected one.
So I have declared a template like this:
<xsl:template name="CustType">
<xsl:param name="custTypeLbl" select="$lang.custTypeLbl"/>
<xsl:param name="valueList"/>
<xsl:param name="disable" select="'false'"/>
<xsl:param name="controlName" select="'customertype'"/>
<xsl:param name="onChange" select="''"/>
<xsl:call-template name="SelectBox">
<xsl:with-param name="selectBoxLabel" select="$custTypeLbl"/>
<xsl:with-param name="controlName" select="$controlName"/>
<xsl:with-param name="disable" select="$disable"/>
<xsl:with-param name="valueList" select="$valueList"/>
<xsl:with-param name="onChange" select="$onChange"/>
<xsl:with-param name="valueColspan" select="''"/>
</xsl:call-template>
</xsl:template>
And here is the content of my dropdown:
<xsl:template name="CustomerTypeList">
<xsl:param name="selectedCustType"/>
<xsl:call-template name="OptionElement">
<xsl:with-param name="optionValue" select="'M'"/>
<xsl:with-param name="optionDescription" select="$lang.opt.customerType.member"/>
<xsl:with-param name="selectedOptionValue" select="$selectedCustType"/>
</xsl:call-template>
<xsl:call-template name="OptionElement">
<xsl:with-param name="optionValue" select="'E'"/>
<xsl:with-param name="optionDescription" select="$lang.opt.customerType.employee"/>
<xsl:with-param name="selectedOptionValue" select="$selectedCustType"/>
</xsl:call-template>
<xsl:call-template name="OptionElement">
<xsl:with-param name="optionValue" select="'N'"/>
<xsl:with-param name="optionDescription" select="$lang.opt.customerType.nonmember"/>
<xsl:with-param name="selectedOptionValue" select="$selectedCustType"/>
</xsl:call-template>
<xsl:call-template name="OptionElement">
<xsl:with-param name="optionValue" select="'R'"/>
<xsl:with-param name="optionDescription" select="$lang.opt.customerType.returncenter"/>
<xsl:with-param name="selectedOptionValue" select="$selectedCustType"/>
</xsl:call-template>
</xsl:template>
Then I call/display the dropdown in my page something like this:
<xsl:call-template name="CustType">
<xsl:with-param name="customerType" select="$CUSTOMERTYPE"/>
<xsl:with-param name="valueList">
<xsl:call-template name="CustomerTypeList">
<xsl:with-param name="selectedCustType" select="$CUSTOMERTYPE"/>
</xsl:call-template>
</xsl:with-param>
</xsl:call-template>
Then when I click the button, it will pass these parameters:
<form name="{$customerDetailsForm}" action="{$formAction}" method="post" onSubmit="{$formOnSubmit}">
<INPUT TYPE="Hidden" NAME="groupid" VALUE="{$groupId}"/>
<INPUT TYPE="Hidden" NAME="selectedCustType" VALUE="{$CUSTOMERTYPE}"/>
<INPUT TYPE="Hidden" NAME="namechangecode" VALUE=""/>
<INPUT TYPE="Hidden" NAME="statusinfots" value="{$customerInfoNode/Status/@TimeStamp}"></INPUT>
<input type="Hidden" name="loyaltyIDPanelFlag" value="HIDDEN"/>
<input type="hidden" name="AccessScreen" value="{$AccessScreen}"/>
<xsl:call-template name="DataLayout"/>
</form>
My problem is I do not get the selected value of the customerType (Example: "M" for member, "N" for non-member, "E" for employee). What it gets is still the same as the old value. (My "No data changed" error handler is triggered)
I already had a lot of research about dropdown in XSLT, most of them uses for-each so It really didn't help. I'm also a beginner in this language, I'm just analyzing the code and tweaking it a bit for this enhancement, and I'm not yet familiar with these syntax.
My question is, "how to do it using my existing codes?" and I would really appreciate if you also attach a link / explain a bit so I can learn more about it. Thank you so much.
Upvotes: 0
Views: 116
Reputation: 163549
If you are using the XSLT 1.0 engine built in to the browser, then all it can do is generate an HTML page, potentially containing Javascript. Once the HTML page is generated (and therefore, at the time the user clicks a button) the XSLT has done its work and is no longer executing: the only way to handle user input events is within the Javascript of the HTML page.
This changes if you use Saxon-JS, which allows you to write code within the XSLT stylesheet that responds to user input events and modifies the HTML page. You can read about Saxon-JS at http://www.saxonica.com/saxon-js/index.xml
Upvotes: 1