Export to GitHub

primefaces - issue #3423

Dynamic TabView gets validated on tabChange

Posted on Feb 1, 2012 by Massive Camel

What is the PrimeFaces forum discussion URL? http://forum.primefaces.org/viewtopic.php?f=3&t=17987

What steps will reproduce the problem? 1. Create a page with a dynamic tabview containing required inputTexts and a growl with autoupdate set to true. 2. Switch between the tabs 3. Growl shows validation errors for input fields

What is the PrimeFaces version? 3.1.RC1

What is the expected output? What do you see instead? No validation erros should be shown on tab-change.

Which JSF implementation with version are you using?(Mojarra or MyFaces) Mojarra

What is the version of your JSF implementation? 2.1.6

Which component libraries are you using in addition to PrimeFaces? none

Which application server or servlet container are you using? Tomcat 6.0

TestCase: <?xml version="1.0" encoding="UTF-8"?>

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;

&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
   xmlns:h=&quot;http://java.sun.com/jsf/html&quot;
   xmlns:f=&quot;http://java.sun.com/jsf/core&quot;
   xmlns:p=&quot;http://primefaces.org/ui&quot;&gt;

&lt;f:view contentType=&quot;text/html&quot;&gt;
   &lt;h:head&gt;
      &lt;meta content='text/html; charset=UTF-8' http-equiv=&quot;Content-Type&quot; /&gt;
   &lt;/h:head&gt;

   &lt;h:body&gt;
      &lt;h:form id=&quot;form&quot;&gt;
         &lt;p:growl autoUpdate=&quot;true&quot; /&gt;

         &lt;p:tabView dynamic=&quot;true&quot; id=&quot;tabView&quot;&gt;
            &lt;p:tab title=&quot;1&quot;&gt;
               &lt;p:inputText required=&quot;true&quot; label=&quot;val1&quot; id=&quot;val1&quot; /&gt;
               &lt;p:inputText required=&quot;true&quot; label=&quot;val2&quot; id=&quot;val2&quot; /&gt;
            &lt;/p:tab&gt;
            &lt;p:tab title=&quot;2&quot;&gt;
               &lt;p:inputText required=&quot;true&quot; label=&quot;val3&quot; id=&quot;val3&quot; /&gt;
            &lt;/p:tab&gt;
            &lt;p:tab title=&quot;3&quot;&gt;
               ...
            &lt;/p:tab&gt;
         &lt;/p:tabView&gt;
      &lt;/h:form&gt;
   &lt;/h:body&gt;
&lt;/f:view&gt;
&lt;/html&gt;

Comment #1

Posted on Feb 1, 2012 by Massive Camel

Fix: I altered the loadDynamicTab function in tabview.js so only the hidden-field with the activeIndex is processed instead of the whole tabview. from:

PrimeFaces.widget.TabView.prototype.loadDynamicTab = function(newPanel) {
    var _self = this,
    options = {
        source: this.id,
        process: this.id,
        update: this.id
    },
...

to: PrimeFaces.widget.TabView.prototype.loadDynamicTab = function(newPanel) { var _self = this, options = { source: this.id, process: this.id + "_activeIndex", update: this.id }, ...

This fix works for this case. If you have a listener for tabChange you will still get the same error as without the fix.

Comment #2

Posted on Feb 1, 2012 by Swift Rhino

This will break code of people who doesn't want content to process. Use wizard if you want to use tabview as a form input.

Comment #3

Posted on Feb 1, 2012 by Massive Camel

I think there's a misunderstanding, please have a second look: The problem in the current version (PF 3.1.RC1 and Snapshot) is that the content is processed. So you get the validation erros. But the content should not be processed.

As you can see process is set to "this.id" so the whole content of the tabview is processed. In my fix i changed it so only the inputText for the activeIndex is processed.

Comment #4

Posted on Feb 1, 2012 by Swift Rhino

Oh, yes you are right. Anyway I think this behavior should be configurable, we need to brainstorm on this to make this behavior configurable.

Comment #5

Posted on Feb 1, 2012 by Quick Giraffe

Cagatay, what do you think about setting this issue to FUTURE and Accepted?

Comment #6

Posted on Apr 17, 2012 by Massive Camel

As this problem still exists - I would be really be glad if this issue was reopened so other people could find it when they're are searching for open issues.

Comment #7

Posted on Apr 17, 2012 by Quick Giraffe

@T.dot, as of today, only 7 people starred this issue. Honestly, I don't think people search issue tracker (by default or first), they search forum via forum search before issue tracker. They see issues in issue tracker while reading forum topics.

It is best to open a new issue or request this to be fixed when more people star this issue. OR, you can keep an eye on new issues, and if you see people opening 'new' issues related to this, then add a note on the 'new' issues that they are 'duplicate' issue of this issue.

What you think?

Comment #8

Posted on Apr 23, 2012 by Quick Rabbit

Comment deleted

Comment #9

Posted on May 17, 2012 by Quick Giraffe

@T.dot, I think this issue is now fixed. See below.

Related issue is now marked as 'Fixed'. http://code.google.com/p/primefaces/issues/detail?id=3284

Optimus says it's fixed. http://forum.primefaces.org/viewtopic.php?f=3&t=17477&p=67018#p67018

Comment #10

Posted on May 21, 2012 by Massive Camel

The issue still remains. The fix is for wizard, but that doesn't help tabview ;-)

Comment #11

Posted on Jul 9, 2012 by Quick Rhino

Guys, while this issue is not resolved in a future release, there is a palliative solution?

I tried a few things, but had no success:

1 -

Result:

Uncaught Error: Syntax error, unrecognized expression: #@none jquery.js.xhtml:23 by.error jquery.js.xhtml:23 by.filter jquery.js.xhtml:23 by jquery.js.xhtml:23 by jquery.js.xhtml:23 b.fn.extend.find jquery.js.xhtml:23 bF.fn.bF.init jquery.js.xhtml:16 bF jquery.js.xhtml:16 o.push.name primefaces.js.xhtml:1 bF.extend.each jquery.js.xhtml:16 PrimeFaces.ajax.AjaxUtils.send primefaces.js.xhtml:1 PrimeFaces.ajax.Queue.offer primefaces.js.xhtml:1 PrimeFaces.ajax.AjaxRequest primefaces.js.xhtml:1 PrimeFaces.ab primefaces.js.xhtml:1 PrimeFaces.cw.behaviors.tabChange insertOperatingUnit.xhtml:94 PrimeFaces.widget.TabView.PrimeFaces.widget.BaseWidget.extend.loadDynamicTab primefaces.js.xhtml:34 PrimeFaces.widget.TabView.PrimeFaces.widget.BaseWidget.extend.select primefaces.js.xhtml:34 (anonymous function) primefaces.js.xhtml:34 b.event.dispatch jquery.js.xhtml:16 b.event.add.bD.handle.bB

2 -

Result: No validation occurs and no change in tab. Probably because the TabView needs to be processed so that the tab might change.

3 - or

Result: The tabs change, but the validation messages appear.

4 -

Result: The tabs change, but the validation messages appear.

All examples were made with .

Comment #12

Posted on Jul 11, 2012 by Happy Wombat

we change the tabs by writing methods in the bean file as below

package com.vr;

import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped;

@ManagedBean @SessionScoped public class TabBean implements Serializable {

/**
 * Creates a new instance of TabBean
 */
public TabBean() {
}
public void stab1Action()

{ setActiveIndex(1); } public void stab1BackAction() { setActiveIndex(0); } public void stab2Action() { setActiveIndex(2); } public void stab2BackAction() { setActiveIndex(1); } public void stab3Action() { setActiveIndex(3); } public void stab3BackAction() { setActiveIndex(2); } public void stab4Action() { setActiveIndex(4); } public void stab4BackAction() { setActiveIndex(3); } public void stab5Action() { setActiveIndex(5); } public void stab5BackAction() { setActiveIndex(4); } public void stab6Action() { setActiveIndex(6); } public void stab6BackAction() { setActiveIndex(5); }

public void stab7Action() { setActiveIndex(7); } public void stab7BackAction() { setActiveIndex(6); }
public void stab8BackAction() { setActiveIndex(7); }

private int activeIndex = 0; public int getActiveIndex() {

    return activeIndex;
}
public void setActiveIndex(int i)
{       
     activeIndex = i;     
}

}

Comment #13

Posted on Jul 12, 2012 by Happy Kangaroo

Comment deleted

Comment #14

Posted on Aug 17, 2012 by Happy Panda

We are having the same issue (validation of whole tabview on tabChange).

Any update on when a fix might be available?

Comment #15

Posted on Aug 17, 2012 by Quick Giraffe

Response to Comment 14 by jezz...@gmail.com,

  1. If you look carefully, this issue has been marked with WontFix.
  2. Search PrimeFaces community forum, and do your best to just scan topics in PrimeFaces community forum every day.
  3. Why search that forum? I recently saw someone mention a fix/workaround for this issue, I think.

Comment #16

Posted on Aug 17, 2012 by Quick Rhino

Well, as I understand it will not be revised soon, then decided on a more radical solution and that is actually being nice to me.

Basically, I did the following: 1 - I removed all the validations of the screen (required attribute) 2 - have disabled the Bean Validation () 3 - Implemented a FormValidator (Seam Faces)

Thus, my validations occur only submit, that is exactly where I need to occur.

I explain in more detail the solution here:http://marlonpatrick.info/blog/2012/07/12/jsf-form-validation-abordagem-pratica-com-apoio-da-api-bean-validation/

The text is in Portuguese, but I think Google Translate solves.

Comment #17

Posted on Sep 5, 2012 by Happy Giraffe

Well, I simply changed the tabview.js file as mentioned before and I used a remote command to send tab changes to the server, as below:

...

It was enough for me.

Comment #18

Posted on Feb 19, 2013 by Massive Horse

A college of me fixed this issue by doing the following thing:

He changed the method processValidators(FacesContext context) as follows:

Other Sources/java-templates/org/primefaces/component/accordionpanel/AccordionPanelTemplate.java#processValidators(FacesContext context)

Before:

@Override public void processValidators(FacesContext context) { if(!isRendered()) { return; } ... }

After: @Override public void processValidators(FacesContext context) { if(!isRendered() || ("tabChange".equals(FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("javax.faces.partial.event")))) { return; } ... }

So the validation will not be made when component is not rendered or on a tabChange event. It would be fine if this would get fixed soon, because inputFields within a accordion or tabView are common issue within our application.

Comment #19

Posted on Feb 20, 2013 by Happy Panda

18, can you tell me where is the method processValidators(FacesContext context)?

thanks..

Comment #20

Posted on Feb 20, 2013 by Massive Horse

19,

We have a custom build. Its part of the java-templates contained within the primefaces maven project. The AccordionPanel is generated out of this template.

Primefaces (Maven project)/Other Sources/java-templates/org/primefaces/component/accordionpanel/AccordionPanelTemplate.java#processValidators(FacesContext context)

The sources are generated via maven. @see http://code.google.com/p/primefaces/wiki/BuildingFromSource

 Attachments

Comment #21

Posted on Feb 20, 2013 by Happy Panda

I see, but I'm not using Maven project. So I think maybe your solution doesn't work for my case :( thanks anyway..

Comment #22

Posted on Feb 20, 2013 by Massive Horse

Or you can inherit from the AccordionPanel and overwrite the processValidate Method:

public void processValidators(FacesContext context) { if(("tabChange".equals(FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("javax.faces.partial.event")))) { return; }

super.processValidators(context); }

Do not forget to register your component in the faces-config.xml:

<component>
    <component-type>org.primefaces.component.AccordionPanel</component-type>
    <component-class>your.own.Implementation</component-class>
</component>

Comment #23

Posted on Feb 20, 2013 by Happy Panda

thanks a lot, but I'm new to primefaces, I have no idea how to put processValidators into .xhtml page, tab view control there :(

Comment #24

Posted on Feb 20, 2013 by Massive Horse

You can use the accordion as expected within a form and with without any problems. The problems is the validation on the tabChange.

You only need to inherit from primefaces AccordionPanel and only overwrite the processValidators(FacesContext context) method with the check for tabChange event. If it is tabChange do nothing, if not call super.processValdidators(FAcesContext context). There is no need do anything special within the .xhtml page. Use accordionPanel as described in the Showcase.

You can do the same with the TabView where the same problem occurs on tabChange. Only inherit from the primefaces TabView and overwrtie the processValidators(FacesContext context) method

Custom Accordion:

public class AccordionPanel extends org.primefaces.component.accordionpanel.AccordionPanel {

/**
 * Added workaround to avoid process validation when a tabChange occurs.
 */
@Override
public void processValidators(FacesContext context) {
    if ("tabChange".equals(FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("javax.faces.partial.event"))) {
        return;
    } else {
        super.processValidators(context);
    }
}

}

Custom TabView:

public class TabView extends org.primefaces.component.tabview.TabView {

/**
 * Added workaround to avoid process validation when a tabChange occurs.
 */
@Override
public void processValidators(FacesContext context) {
    if ("tabChange".equals(FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("javax.faces.partial.event"))) {
        return;
    } else {
        super.processValidators(context);
    }
}

}

Register them in the faces-config.xml:

<component>
    <component-type>org.primefaces.component.TabView</component-type>
    <component-class>com.clevercure.web.base.component.TabView</component-class>
</component>
<component>
    <component-type>org.primefaces.component.AccordionPanel</component-type>
    <component-class>com.clevercure.web.base.component.AccordionPanel</component-class>
</component>

And now your custom implementation is used for the components, because you have registered them in the faces-config.xml.

All other methods are used from the original component class but processValidators(FacesContext context) not, because you have overwritten it.

Comment #25

Posted on Mar 22, 2013 by Happy Panda

hi,

I solved my problem by adding the code: FacesContext.getCurrentInstance().renderResponse(); under TabChangeEvent method in backing bean.. eg: public void onTabChange(TabChangeEvent event) {
this.setTab1("tab1.xhtml"); this.setTab2("tab2.xhtml"）; FacesContext.getCurrentInstance().renderResponse(); }

Comment #26

Posted on May 2, 2013 by Quick Kangaroo

Hi can you please share the backing bean details in loading the .xhtml file for the tab would be great if you can share the ways in reading the xhtml from backing bean and validating the two(mainform and another form inside tabview) forms on submit.

Thanks

Comment #27

Posted on Jul 3, 2013 by Helpful Kangaroo

I have the same problem, someone managed to fix it?

Comment #28

Posted on Jul 3, 2013 by Massive Horse

@see #18,#20, #22, #24 Overwritte the TabView implementation, register it in the faces-config.xml or make your own build of primefaces and change it directly in the original source.

We didi overwritte it and registered our own component

Status: WontFix

Labels:
Priority-Medium Type-NewFeature