I have a button and textfield and a checkbox. initially checkbox is checked. when i uncheck the checkbox both button and textbox should be disabled. how to achieve this.
Well make a listener on checkbox. When the checkbox is unchecked, disable the buttonField and the textbox. See an example below:
yourCheckBox.setChangeListener(this);
add(yourCheckBox);
add(textfield);
add(buttonfield);
public void fieldChanged(Field field, int context) {
if (field == yourCheckBox) {
if (!youCheckBox.getChecked()) {
textfield.setEditable(false);
buttonfield.setEditable(false);
}
}
}
Related
Is it possible to implement an OnClick listener in a list box in ZK? The trigger when clicking on an item works fine with the following code, but I can't get to the clicked item (getSelectedItems () shows the items selected by checkbox or the topmost selected item, but I want to trigger something independent of it by clicking on it). That's why the OnSelect listener doesn't matter to me either, the checkbox element must be selected directly and is not automatically selected by clicking on the item.
Thanks for any hint.
ZUL:
<row>
<listbox id="article_output" width="100%" height=""
multiple="true" checkmark="true" nonselectableTags="*">
<listhead>
<listheader label="Article"/>
</listhead>
</listbox>
</row>
Create Model and Listener
public void fillListBoxWithArticles(final Listbox lb, List<Article> articles) {
lb.setItemRenderer(new ArticleItemRenderer());
lb.setCheckmark(true);
lb.setMultiple(true);
ListModelList<Article> lml_articles = new ListModelList<Article>(articles);
lml_articles.setMultiple(true);
lb.setModel(lml_articles);
lb.addEventListener(Events.ON_CLICK, new EventListener() {
#Override
public void onEvent(Event event) throws Exception {
logger.debug("SELECTED INDEX: " + lb.getSelectedIndex());
setArticleToInfobox(articles.get(lb.getSelectedIndex()));
}});
lb.focus();
}
ItemRenderer:
public class ArticleItemRenderer implements ListitemRenderer<Article> {
#Override
public void render(Listitem item, Article data, int index) throws Exception {
item.appendChild(new Listcell(data.getArticletitle())); }}
I have a dynamic list and it is the source of a ListView.
I have a command in the ViewModel, where I need to receive the item, which was clicked. I want to get the object that represents that item, so I can perform a change on it.
I am using MvvmCross.
That is fairly trivial. I imagine you have a ListView in your layout which looks something like:
<Mvx.MvxListView
...
local:MvxBind="ItemsSource Items" />
To be able to get the clicked item you just add a command to ItemClick:
<Mvx.MvxListView
...
local:MvxBind="ItemsSource Items; ItemClick ItemClickedCommand" />
Then in your ViewModel you should have an ItemClickedCommand:
private MvxCommand<ItemViewModel> _itemClickedCommand;
public ICommand ItemClickedCommand
{
get
{
return _itemClickedCommand = _itemClickedCommand ??
new MvxCommand<ItemViewModel>(item => {
// do something with the item here
}):
}
}
Where ItemViewModel is the type of the items in the collection you have bound to the ItemsSource.
I have an accordion panel with tabs containing name of students. I select on one of the tab and choose edit. I am calling a tab change listener and getting student object and trying to edit it works fine.
But My problem is when for the first time Accordion loads, even though I select on the tab,and click on edit, I will get not get student object. Its giving me null pointer exception. since Tab change event does not get called for the first time it loads. How do I solve this?
private StudBean formBean;
public StudBean getFormBean() {
if(formBean==null){
formBean= new StudBean();
}
return formBean;
}
public void onTabChange(TabChangeEvent event) {
formBean = (StudBean) event.getData();
}
public String edit(){
formBean = testDelegate.getDetails(formBean.getName(),formBean.getId());
return "/ui/EditStudent?faces-redirect=true";
}
<p:commandButton process="#this" value="edit" action="#{testBean.edit}" >
<p:accordionPanel value="#{testBean.students}" var="stud">
<p:ajax event="tabChange" listener="#{testBean.onTabChange}" immediate="true"/>
<p:tab title="#{stud.name}">
<p:tabView widgetVar="addSystemWizard" style="width:980px;height:400px;" dynamic="true" activeIndex="#{testBean.messagesTab.activeIndex}" >
<p:ajax event="tabChange" listener="#{testBean.onTabChange}" update=":tabview:sysMsg"/>
<p:tab id="generalInfo" title="1. General Information"> `enter code here`
private TabView messagesTab;
public TabView getMessagesTab () {
if(messagesTab==null){
messagesTab= new TabView();
}
return messagesTab;
}
public void setMessagesTab(TabView messagesTab ) {
this.messagesTab = messagesTab;
}
public void onTabChange(TabChangeEvent event){
if(test.getName()==null || test.getName().equals("")){
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, event.getTab().getId() ,"please enter all required fields");
FacesContext.getCurrentInstance().addMessage(null, msg);
int idx=0;
messagesTab= (TabView) event.getComponent();
messagesTab.setActiveIndex(idx);
}
}
I am calling a tabchange event on tabview, I have name attribute im my page,if that attribute is blank or null I have to stay on same tab, otherwise I ahve to go next tab, basically performing validation.. I have posted the above code to do that, but its not working!
I found this blog post that describes how to use a p:remoteCommand and javascript to accomplish this.
Trying various approaches to the question above (with p:ajax event="tabChange" and so on), I came up with a clean and well working solution. The code below turns on the PrimeFaces TabView into a "wizard mode". That means, the user stays on the same tab when he / she is trying to switch tabs and has validation errors within the current tab. The main idea is to use p:remoteCommand for a deferred decision about tab switching. If no validation errors were present, the switching occurs by the TabView widget's method select.
XHTML:
<p:tabView ... widgetVar="tv_widget" styleClass="tv_selector">
...
</p:tabView>
<p:remoteCommand name="tv_remoteCommand" process="#(.tv_selector)" update="#(.tv_selector)" global="false"
oncomplete="handleTabChangeTV(xhr, status, args, tv_widget)"/>
<h:panelGroup id="tv_script" styleClass="tv_selector">
<script type="text/javascript">
$(function(){
bindOnClickTV(tv_remoteCommand, tv_widget);
});
</script>
</h:panelGroup>
Javascript:
function bindOnClickTV(rc, widget) {
// unbind PrimeFaces click handler and bind our own
widget.jq.find('.ui-tabs-nav > li').unbind('click.tabview').
off('click.custom-tabview').on('click.custom-tabview', function (e) {
var element = $(this);
if ($(e.target).is(':not(.ui-icon-close)')) {
var index = element.index();
if (!element.hasClass('ui-state-disabled') && index != widget.cfg.selected) {
// buffer clicked tab
widget.clickedTab = element.index();
// call remote command
rc();
}
}
e.preventDefault();
});
}
function handleTabChangeTV(xhr, status, args, widget) {
if (!args.validationFailed) {
widget.select(widget.clickedTab);
}
}
I am working on my first ASP.NET MVC 3 project. For some of the fields on an edit page I want the user to be able to either choose a value from previously-entered values or enter a new one, so I'm using the jQuery autocomplete to accomplish this. That part seems to work just fine. Now, for some fields the user can choose to enter a value or not and if they do enter one, I want to validate it against some rules, so I created my own ValidationAttribute.
The validation piece will definitely check the given value against the rules and return the correct boolean value for the IsValid call. Great.
The first problem that I'm having is that if my validator's IsValid returns false, it displays the error message I've specified but if I enter something which is valid, the TextBox clears it's error background color but the error message does not clear. This happens in either FF or IE8.
The second problem is that for FireFox, my autocomplete values will display again when I edit the text in the textbox but in IE 8, once the error condition exists, my autocomplete stops working. Occasionally, if I enter a value which I know is in the autocomplete list, it will show up but it seems a bit flaky.
I may just be doing this validation thing wrong. Here's the relevant code I use. I'd be quite interested in any guidance one can give about either of these issues. The attribute is a test one but it exhibits the behavior on my page.
My ValidationAttribute:
public class MyAttribute : ValidationAttribute
{
...
public override bool IsValid(object value)
{
if (value == null)
{
return true;
}
var stringValue = Convert.ToString(value);
if (stringValue.Length == 0)
{
return true;
}
if (stringValue.Trim().Length == 0)
{
return false;
}
return true;
}
...
}
My autocomplete code:
$("#toppingid").autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("AvailableToppings", "IceCream")', type: "POST", dataType: "json",
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
})
},
minLength: 1
});
My controller action:
public JsonResult AvailableToppings()
{
// I actually retrieve this differently, but you get the idea
List<string> all = new List<string>() { "BerryCrush", "Caramel", "Fudge" };
return Json(all, JsonRequestBehavior.AllowGet);
}
My view snippet:
#Html.TextBoxFor(model => model.Topping, new { #id = "toppingid" })
#Html.ValidationMessageFor(model => model.Topping)
My viewmodel snippet:
[DisplayName("Topping:")]
[MyAttribute(ErrorMessage = "Can't be all blanks!")]
public string Topping { get; set; }
In my post action, I have logic something like this:
[HttpPost]
public ActionResult Create(IceCreamCreateEditViewModel viewModel)
{
if (ModelState.IsValid)
{
// stuff happens here which isn't germane
return RedirectToAction("Index");
}
// redisplay the view to the user
return Create();
}
I think that's all the relevant pieces of code. Thanks for any guidance you can provide.
Concerning your first question, it looks like the autocomplete plugin removes the input-validation-error class from the textbox when a selection is made. Because of this the textbox clears its background. One way to workaround this is to subscribe for the select event and reapply this class if there is an error (by checking whether the error label is displayed):
$("#toppingid").autocomplete({
source: function (request, response) {
...
},
select: function (event, ui) {
var topping = $('#toppingid');
// find the corresponding error label
var errorLabel = $('span[data-valmsg-for="' + topping.attr('name') + '"]');
if (errorLabel.is(':visible')) {
// if the error label is visible reapply the CSS class
// to the textbox
topping.addClass('input-validation-error');
}
},
minLength: 1
});
As far as your second question is concerned, unfortunately I am unable to reproduce it. The autocomplete doesn't stop working in IE8 if there is a validation error.