How can I make h:inputText appear only after button clicked in JSF2.0? - ajax

In jSF2.0 How can I make an <h:inputText> appear only after a specific button is clicked? I want the <h:inputText> be hidden, and only appear after I click a button

Could you simply use CSS "display: none" attribute on inputText and, in button onclick attribute, to change this for "display: block". This is the more simple solution.

Related

Can multiple BlueprintJS Popovers have the same target? (e.g. one for click and another for hover)

Let's say I have a Button component, and I'd like Popover A to appear upon hovering over the Button, and Popover B to appear when clicking on the button. Is this possible?
You can do this by nesting the popovers like this:
<Popover content={<div>Hover</div>} interactionKind={PopoverInteractionKind.HOVER}>
<Popover content={<div>Click</div>} interactionKind={PopoverInteractionKind.CLICK}>
<Button text="Button with two popovers"/>
</Popover>
</Popover>
There's a working example here.
In the case you don't want the hover popover to appear whenever a user clicks on the button, you can achieve this by switching to controlled usage by setting the isOpen prop. See the BP docs for more info on this.

Kendo UI treelist hide button

I am using Kendo UI TreeList & Grid for jquery. I want to hide a command button based on row values. In grid, I attached dataBound event to evaluate the model value and show/hide command button, below codes works fine
dataBound:function(e){
var delButton = e.container.find(".k-grid-Delete");
if (...) delButton.hide();
}
For TreeList, the same code seems also fine. However, when I add inline edit featrue, the same codes works differently.
When click "Edit" or "Add", the grid stay the original visible status, but treelist show all the button.
When click "Cancel", I triggered dataBound event in cancel event so the UI can be refreshed, then the grid show correctly but treelist still show all the buttons even if the dataBound is executed with correct logic.
Does anybody know how to resolve this issue?
Thanks,
Ziff Dai

How to hide/show JQGrid inline navigation button from javascript

Hide and show Add and Cancel button programmatically in JQGrid
You can make Add and Cancel button hidden of visible in the same way like any other elements on the HTML page. You can use jQuery.show, jQuery.hide or jQuery.css with "display", "none" or "display", "" parameters. Thus the only thing which you need is to get DOM elements which represent the buttons. You can get the elements by id for example.
jqGrid assigns ids to all standard buttons. The ids of buttons added by inlineNav will be build from grid id as prefix and strings "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button). So if you have the grid with id="mygrid" then $("#mygrid_iladd").hide() can be used to hide the Add button and $("#mygrid_ilcancel").hide() to hide the Cancel button. To hide both buttons you can use $("#mygrid_iladd,#mygrid_ilcancel").hide().

How to use ajax in JSF inputtextbox to update h:selectOneRadio?

I was usinig JSF 2.0, richfaces, and a4j in my development. I have a radio button group that consist of 3 radio button, and there is a inputtextbox next to each of the radio button, just like the layout shown below:
radio button A | input textbox A
radio button B | input textbox B
radio button C | input textbox C
Whenever there is a focus on textbox, can this be done using ajax to update on radio button selection? E.g. when focus on input textbox B, then radio button B will be selected. May I know how this can be done?
There are many ways to this, first using plain javascript and using ajax on jsf or richfaces components.
You can try using a4j:ajax nested inside your h:inputText and fire it whenever there is focus on your textbox.
<h:selectOneRadio value="#{bean.value}" id="radio" />
<h:inputText id="input" value="#{bean.textValue}" >
<a4j:ajax event="onfocus" render="radio" action="{bean.setRadioSelected}"/>
</h:inputText>
On the action method set the value of selected radio to true.
Hope this helps.

Uncheck radio button custom control in ASP MVC

I want to create a radio button custom control in my ASP MVC application. I am using HTML Helpers for this (I hope it is the right way). I want to know if there is a way to make the radio button unchecked when clicked.
Any ideas ?
Thanks
I want to know if there is a way to make the radio button unchecked when clicked.
That's a very weird requirement and you probably should be using checkboxes instead of radio buttons, but anyway, it is possible with javascript. If we suppose that the radio button is checked initially and you want to uncheck it when clicked:
$(function() {
$('#id_of_radio_button').click(function() {
$(this).removeAttr('checked');
});
});
But really, that's very weird. Radio buttons normally work by having them in groups: you have a couple of radio buttons and you can check only one in the group. So by selecting a different radio button in the group you are unchecking the current one.
Checkboxes on the other hand are not grouped. You can check/uncheck their values by clicking on them.

Resources