Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The <code>&lt;f:ajax&gt;</code> can only be attached to a <a href="http://docs.oracle.com/javaee/6/api/javax/faces/component/behavior/ClientBehaviorHolder.html" rel="nofollow noreferrer"><code>ClientBehaviorHolder</code></a> such as <code>&lt;h:inputText&gt;</code>. A plain HTML <code>&lt;div&gt;</code> isn't such one component. You basically need to have a HTML <code>&lt;input&gt;</code> element, not a <code>&lt;div&gt;</code> element. Even more, how would you otherwise set the submitted value in the bean?</p> <pre><code>&lt;cc:interface&gt; ... &lt;cc:clientBehavior name="customEvent" targets="input" event="valueChange" /&gt; &lt;/cc:interface&gt; &lt;cc:implementation&gt; ... &lt;h:inputText id="input" value="#{cc.attrs.value}" /&gt; &lt;h:outputScript&gt; jQuery("[id='#{cc.clientId}:input']").ColorPicker({ // ... }); &lt;/h:outputScript&gt; &lt;/cc:implementation&gt; </code></pre> <p><em>(please note that I fixed the jQuery selector as well; this way the JSF client ID separator <code>:</code> will be taken into account properly instead of malforming the CSS selector)</em></p> <hr> <p><strong>Unrelated</strong> to the concrete problem, your usage of <code>&lt;f:ajax onevent&gt;</code> is wrong. It should point to a function reference, it should not contain some function calls. The proper usage is</p> <pre><code>&lt;f:ajax ... onevent="functionName" /&gt; ... &lt;h:outputScript&gt; function functionName(data) { alert("Event " + data.status + " raised"); } &lt;/h:outputScript&gt; </code></pre> <h3>See also:</h3> <ul> <li><a href="https://stackoverflow.com/questions/11350769/ajax-call-in-jsf-2-0-myfaces-the-onevent-javascipt-function-in-the-ajax-tag-g/11351236#11351236">ajax call in jsf 2.0 (myfaces), the onevent Javascript function in the ajax tag gets called before the rendering is complete</a></li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload