Search code examples
jqueryjsfhint

Using a hint with jQuery on h:inputText in JSF

I am having a problem getting a hint to work on h:inputText using jQuery. I am pretty sure the problem boils down to selectors but I cannot figure out how to fix it.

The base code I was using can be found here: http://www.techtricky.com/jquery-textbox-hint/

The most relevant questions I have found for help (but no fix) can be found here:

Binding events based on ID with JSF and jQuery

Write data on a JSF inputText control through JQuery

The relevant portion of my code:

function textboxHint(id) {
    var o = {
        selector : 'input:text[title]',
        blurClass : 'blur'
    };
    $e = $("input[id$='"+id+"']");

    if ($e.is('input:text')) {
        if (!$e.attr('title'))
            $e = null;
    } else {
        $e = $e.find(o.selector);
    }
    if ($e) {
        alert($e.size());
        $e.each(function() {
            var $t = $(this);
            alert($t);
            alert($t.attr('title'));
            if ($.trim($t.val()).length == 0) {
                $t.val($t.attr('title'));
            }
            if ($t.val() == $t.attr('title')) {
                $t.addClass(o.blurClass);
            } else {
                $t.removeClass(o.blurClass);
            }

Before, with $e = $('#'+id); I am pretty sure $e contained something not right. Using this way, it would make it to $e = $e.find(o.selector);, but the $e.size() alerts 0, as well as with the way I am currently trying.

Here is the relevant portion of my JSF page:

<h:form>
    <div id="greyText">
        <h:inputText accesskey="s" alt="Search" id="searchBox" valueChangeListener="#{peopleBean.simplePersonQuery}" size="25" >
            <f:ajax execute="searchBox" render="peopleDataTable" event="keyup" title="Search plebeians..." />
        </h:inputText>
        <h:outputText id="advancedText" value="&#x25be;More" />
    </div>

and... if you can read through this (much easier with Inspect Element, sorry), here is the horrible generated HTML:

<div id="greyText"><script type="text/javascript" src="/MotherOfAll/javax.faces.resource/jsf.js.html?ln=javax.faces"><!--

//--></script><input id="j_id1847166489_6e198658:searchBox" name="j_id1847166489_6e198658:searchBox" type="text" value="" onkeyup="jsf.ajax.request('j_id1847166489_6e198658:searchBox',event,{execute:'j_id1847166489_6e198658:searchBox',render:'j_id1847166489_6e198658:peopleDataTable','javax.faces.behavior.event':'keyup'})" alt="Search" size="25" accesskey="s" /><span id="j_id1847166489_6e198658:advancedText">▾More</span>
            </div>

I wish I could post more info on clues that I have to solve this, but I can't. I've been looking around at how selectors work (not my forte) and at how to extract what's currently what in jQuery, but I have nothing.

Any help would be much appreciated, thank you.

Solution

  • Your concrete mistake is that you've put title on the <f:ajax>, not on the <h:inputText>. The title has got to be set on the <h:inputText>.

    Further, I suggest to use class names, it's much easier to select and it also allows you to select multiple elements on which the same behavior should be applied.

    E.g.

    <h:inputText styleClass="hintable" title="Hint for input field 1" />
<h:inputText styleClass="hintable" title="Hint for input field 2" />
<h:inputText styleClass="hintable" title="Hint for input field 3" />

    with

    var $e = $(".hintable");
// ...

    The class name does not necessarily need to be specified in the CSS file.

    Or, if you want to apply this on all input text elements having a title attribute, then rather use

    var $e = $("input:text[title]");
// ...