Re: AjaxObserveField with radioButtons
Re: AjaxObserveField with radioButtons
- Subject: Re: AjaxObserveField with radioButtons
- From: Ralf Schuchardt <email@hidden>
- Date: Thu, 15 Jun 2017 15:45:49 +0200
My simple implementation to switch the next DIV is essentially:
"use strict";
/*
* Example:
* <div>
* <wo:radiobutton value = "1" name = "rbgroup" selection = "$selection"
class = "switch-for-next-div"/> yes<br/>
* <wo:radiobutton value = "0" name = "rbgroup" selection = "$selection"
class = "switch-for-next-div"/> no
* </div>
* <div><wo:textfield value = "$input"/></div>
*/
jQuery( function() {
function changeMe( nextdiv, show ) {
if ( show ) {
nextdiv.show();
}
else {
nextdiv.hide();
}
}
jQuery( 'input.switch-for-next-div' ).on( 'change', function( event ) {
var jqThis = jQuery( this );
changeMe( jqThis.closest( 'div' ).next(), jqThis.val() == 1);
});
/* initially hide all deactivated divs */
jQuery( 'input.switch-for-next-div' ).each( function() {
var checkedInput = jQuery( 'input[name="'+this.name+'"]:checked' );
changeMe( checkedInput.closest( 'div' ).next(), checkedInput.val() == 1
);
});
});
For more complex scenarios it may be necessary to generate an ID and use it in
a data-attribute on the radiobuttons. WXRadioButtonList (WOComponentElements
framework) has an invisible wrapper element to get an elementID, that is then
used for the radiobutton group name. It should be possible to use a
WOGenericContainer in a similar way for a custom RadioButton(-list) /
InputField component.
<WEBOBJECT NAME=RadioButtonWrapper>
<WEBOBJECT NAME=RadioButtonRepetition>
<WEBOBJECT NAME=RadioButton></WEBOBJECT><WEBOBJECT
NAME=Content></WEBOBJECT>
</WEBOBJECT>
</WEBOBJECT>
RadioButtonWrapper: WOGenericContainer {
// ** Because there's no elementName, this is an invisible wrapper element.
elementID = wrapperElementID;
name = context.elementID;
formValue = selection;
elementName = nullValue;
}
RadioButton: WOGenericElement {
elementName = "input";
type = "radio";
// ** this is elementID of the wrapper so all
// ** RadioButtons in this list will have the same name.
name = wrapperElementID;
value = ^index;
otherTagString = isCurrentItemSelected;
}
Ralf
--
Ralf Schuchardt
Sent with Airmail
Am 15. Juni 2017 um 12:37:21, GILQUIN Pierre (email@hidden) schrieb:
no sure to understand, Do you have a litlle html / code ?
But anyway, I can do it as you said. I can just get rid of the conditionnal and
apply a css (display:none) with ajax
Thank for your help
Le 15.06.2017 à 12:30, Ralf Schuchardt a écrit :
Do you worry about the ID requirement? It may be derived from the component ID
like in radiobutton lists. We have also implemented this mechanism with a
positional relation of the depended field (the next sibling div of the div
surrounding the radiobuttons).
Ralf
--
Ralf Schuchardt
Sent with Airmail
Am 15. Juni 2017 um 11:39:21, GILQUIN Pierre (email@hidden) schrieb:
Thanks Ralf,
You are right that is the solution.
But I have a component used in many places. I still need to fix that in the
ajax wonder way ....
Pierre
Le 15.06.2017 à 11:30, Ralf Schuchardt a écrit :
Hi Pierre,
we do this directly in JavaScript (jQuery) and CSS without Ajax. Some
radiobuttons have a special CSS class and a data-attribute with the id of the
field (or surrounding DIV) to hide. A click handler reads the radiobuttons
value attribute and decides to either hide or display the connected field. As
this is only a display change on the client side, any value in the textfield is
still send on the next normal submit.
--
Ralf Schuchardt
Sent with Airmail
Am 15. Juni 2017 um 10:41:18, GILQUIN Pierre (email@hidden) schrieb:
Hi
I have 2 RadioButton Yes/NO. When Yes is selected a textfield is visible
and a value can be set.
When NO is selected, the texfield is hided using a conditionnal.
Selectionning YES back, the textfield become visible but the value is
lost (null is sent)
I want a way to keep the value even if the textfield was hidden.
It's work with a popup as there only one id and I can use fullSubmit =
false. But with radiobuttons, there are many id and fullSubmit = true
must be used.
With fullSubmit = true, the hidden textfield send a null value ...
Thanks for any idea/workaround ?
Pierre
The html is the following :
<wo:form>
<wo:AjaxUpdateContainer id = "globalContainerId">
<wo:AjaxObserveField observeFieldID = "popUpButton"
updateContainerID = "globalContainerId" fullSubmit = "false" />
<wo:repetition list = "$list" item = "$item">
<wo:radioButton name = "RB" id ="$item" value = "$item"
selection = "$selectedItem" />
<wo:AjaxObserveField observeFieldID = "$item"
updateContainerID = "globalContainerId" fullSubmit = "true" />
<wo:string value = "$item" />
</wo:repetition>
<wo:conditional condition = "$popupIsYes">
<wo:textField id = "hiddenField" value = "$hiddenField" />
<wo:AjaxObserveField observeFieldID = "hiddenField"
updateContainerID = "globalContainerId" fullSubmit = "false" />
</wo:conditional>
</wo:AjaxUpdateContainer>
in java :
list = new NSArray<String> (new String[]{"Yes","No"});
public boolean popupIsYes() {
if (selectedItem().equalsIgnoreCase("Yes"))
{
return true;
}
return false;
}
+ get/set for item and selectedItem
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden
Attachment:
signature.asc
Description: Message signed with OpenPGP using AMPGpg
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden