Использование подсказки с jQuery для h: inputText в JSF - PullRequest
Новая
       13

Использование подсказки с jQuery для h: inputText в JSF

0 голосов
/ 23 марта 2012

У меня проблема с получением подсказки для работы с h: inputText с использованием jQuery. Я почти уверен, что проблема сводится к селекторам, но я не могу понять, как это исправить.

Базовый код, который я использовал, можно найти здесь: http://www.techtricky.com/jquery-textbox-hint/

Наиболее важные вопросы, которые я нашел для помощи (но не исправили), можно найти здесь:

Связывание событий на основе ID с JSF и jQuery

Запись данных в элемент управления JSF inputText через JQuery

Соответствующая часть моего кода: 

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);
            }

До того, как $ e = $ ('#' + id); Я почти уверен, что в нем было что-то не так. Используя этот способ, он получит $ e = $ e.find (o.selector); но $ e.size () предупреждает 0, а также то, как я сейчас пытаюсь.

Вот соответствующая часть моей страницы JSF: 

<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>

и ... если вы можете прочитать это (намного проще с Inspect Element, извините), вот ужасный сгенерированный 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>

Я бы хотел опубликовать больше информации о подсказках, которые мне нужно решить, но я не могу. Я смотрел вокруг на то, как работают селекторы (не моя сильная сторона) и как извлечь то, что сейчас есть в jQuery, но у меня ничего нет.

Любая помощь будет высоко ценится, спасибо.

1 Ответ

3 голосов
/ 23 марта 2012

Ваша конкретная ошибка в том, что вы поставили title на <f:ajax>, а не на <h:inputText>. title должен быть установлен на <h:inputText>.

Кроме того, я предлагаю использовать имена классов, их гораздо проще выбирать, а также вы можете выбрать несколько элементов, к которым должно применяться одинаковое поведение.

1010 * Е.Г. * 

<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" />

с 

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

Имя класса не обязательно должно быть указано в файле CSS.

Или, если вы хотите применить это к всем элементам ввода текста, имеющим атрибут title, тогда лучше использовать 

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