Using AlloyScript within forms

[Dirk Ulrich, geändert vor 12 Jahren.]

Hello.

I am absolutely new to Alloy and I want to know how I can set the value of a hidden field?

I have a <aui:form...> which holds a <aui:input name="parentId" type="hidden"> element as well as a <aui:button> element. When the button is clicked, the onClick event handler shall set a value into the hidden field.
How can I achieve this? I think that I can't use simple inline JavaScript since the name of the hidden field gets changed during JSP creation.

Thank you.

[jelmer kuperus, geändert vor 12 Jahren.]

Something like this ?

<aui:script use="aui-base">
	A.one('#yourButtonId').on('click', function(event) {
		A.one('#yourHiddenInputId').val('your value');
	});
</aui:script>

[Puneet Upadhyay, geändert vor 12 Jahren.]

Hi Jelmer !!!

Can you explain it in detail?? I also need this functionality.

[Dirk Ulrich, geändert vor 12 Jahren.]

Well, jelmer, I experimented with something like this but I'm just starting with Alloy etc. and thus I struggeled with no success.

Now I had success with your code assistence. Thank you.

Here's my code snippet being put right into my JSP close to the <aui:button>:

<aui:input id="parentId" name="parentId" type="hidden" value="" />
<aui:script use="aui-base">
	A.one('#<portlet:namespace />getChildButtonForCatalogEntry_${ catalogOption.id}').on('click', function(event) {	 
		A.one('#<portlet:namespace />parentId').val(${ catalogOption.id });
		alert('Hi! ' + A.one('#<portlet:namespace />parentId).get('value'));     # THIS DOESN'T WORK AND LETS THE COMPLETE SCRIPT CRASH!!!
	});
</aui:script>
<aui:button id="getChildButtonForCatalogEntry_${ catalogOption.id}" name="getChildButtonForCatalogEntry_${ catalogOption.id}" class="aui-button-input aui-button-input-submit" type="submit" value="${childButtonLabel}"></aui:button>

The alert is not being displayed and the parentId is not submitted to the controller because of the alert statement which fails. Thus, it seems as if the hidden field not gets filled then. So what am I doing wrong (with the alert statement)? Without the alert statement parentId gets filled and submitted.
Is there any good tutorial on Alloy script or YUI script respectively to learn the language?

What is the '#' standing for?Is it an abbreviation for <portlet:namespace />? Anyway I have to use both, '#' AND <portlet:namespace /> as well to make the value being set to the parentId field and subsequently being submitted to the server/controller.

[Nagendra Kumar Busam, geändert vor 12 Jahren.]

Check the AllouUI to learn more about the same

A.one('#<portlet:namespace />parentId')

>> # refers to id of a html element & <portlet:namespace /> changes dynamically w.r.to your portlet name ( & some other params) on page render

>> Let me explain what exactly mean by above statement - search for an element with Id <portlet:namespace />parentId in current page

<aui:input id="[color=#ed2525]<portlet:namespace />[/color]parentId" name="parentId" type="hidden" value="" />
<aui:script use="aui-base">
    A.one('#<portlet:namespace />getChildButtonForCatalogEntry_${ catalogOption.id}').on('click', function(event) { 
		alert('Inside click');
        A.one('#<portlet:namespace />parentId').val(${ catalogOption.id });
        alert('Hi! ' + A.one('#<portlet:namespace />parentId).get('value'));
    });
</aui:script>
<aui:button id="getChildButtonForCatalogEntry_${ catalogOption.id}" name="getChildButtonForCatalogEntry_${ catalogOption.id}" class="aui-button-input aui-button-input-submit" type="submit" value="${childButtonLabel}"></aui:button>

You missed the portion in red color for hidden field id

[Dirk Ulrich, geändert vor 12 Jahren.]

Well, thanks for your explanation.
When I reviewed the produced HTML source code I can see that <aui:input id="parentId" name="parentId" type="hidden" value=""/>'s id and name attributes get extended to the complete name including the portlet name even without using <portlet:namespace />.

In the alert statement there was a quote missing.
alert('Hi! ' + A.one('#<portlet:namespace />parentId).get('value'));
must be
alert('Hi! ' + A.one('#<portlet:namespace />parentId').get('value'));

This was the reason why the alert statement didn't work.

It is worth mentioning that the '#' seems to be important to use! If you use the alert statement this way (without using '#)':

alert('Hi! ' + A.one('<portlet:namespace />parentId').get('value'));

it is NOT working!

[jelmer kuperus, geändert vor 12 Jahren.]

[indent]It is worth mentioning that the '#' seems to be important to use![/indent]

Indeed. The expression is a css selector. # means target element with id