0

Please look this image and cross button I have a search form, that has input field using primefaces

<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />

As you can see, I am using composite:attribute. I want an action attached to this cross button(X button appears on the right side of input field).

I used firebug to see the cross button id. it shows something like this:

<a class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" href="#"></a>

So I wrote a jquery code to test and show alert

$(document).ready(function(){
    $(".ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all").click(function(){
        alert("The cross button was clicked.");
    });
});

And it fails :(

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Sandra
  • 419
  • 7
  • 17
  • What is your functional requirement? Looks weird to me trying to hook a jquery click event to a Primefaces based user interface. – Yamada Apr 26 '16 at 17:19
  • One issue is that the $ shortcut has been removed by PF: http://stackoverflow.com/questions/16166039/adding-jquery-to-primefaces-results-in-uncaught-typeerror-over-all-place – Heather92065 Apr 26 '16 at 17:58
  • @NullPtr92065: This is (as stated in your other answer) **not** the case. What is the problem here is that the OP does not know how plain css selectors work... If you have a `class="a b c"`, then the selector should be ".a.b.c" as can be read in all kinds of css totorials (I'll re-tag the question and you'll see an answer appearing' – Kukeltje Apr 26 '16 at 18:11
  • @Sandra: 'it fails' is not 'smart', (specific, measurable... etc) and it can lead to unsubstantiated comments. What you did good is to post the client-side html, but you forgot to also add the css and html tag to this question (that is where the issue is) See https://css-tricks.com/multiple-class-id-selectors/ – Kukeltje Apr 26 '16 at 18:13
  • Possible duplicate of [How can I select an element with multiple classes?](http://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes) – Kukeltje Apr 27 '16 at 16:22

1 Answers1

0

If you're selecting multiple classes with jQuery you can't do:

$(".ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all")

Spaces in a jQuery selector look for matches in descendants. In addition, because the descendants aren't prefixed with a . jQuery would actually be looking for an element with that name. That selector would be searching for something like this:

<div class='ui-input-clear'>
  <ui-btn>
    <ui-icon-delete>
      <ui-btn-icon-notext>
        <ui-corner-all> //Match here

You need to separate the classes with a . so jQuery will look for each individual class.

$(document).ready(function(){
    $(".ui-input-clear.ui-btn.ui-icon-delete.ui-btn-icon-notext.ui-corner-all").click(function(){
        alert("The cross button was clicked.");
    });
});

https://jsfiddle.net/6p1n1tta/

xCRKx TyPHooN
  • 808
  • 5
  • 18
  • 1
    The answer is good in that it solves the problem. There is a fluke in it however. The original selector does _not_ search for a single class. The second part, 'ui-btn', is is interpreted as a descendant element with that name, as are the ones after that. Which obiously do not exist (unless maybe you are styling xml instead of html). And it is a duplicate question then btw – Kukeltje Apr 27 '16 at 16:18
  • You're right, I'll update that portion of the answer. – xCRKx TyPHooN Apr 27 '16 at 16:23
  • 1
    Wrong again... it is not about classes of descendent elements but their **name**... `
    ...`
     – Kukeltje Apr 27 '16 at 18:15
  • Try putting `
    Not thisOr thisOr this But This
    ` in the html of your jsffiddle and remove all but the first `. ` in the selector. And be surprised...     – Kukeltje Apr 27 '16 at 18:56