Sandra Sandra - 7 months ago 29
Javascript Question

How to find jquery selector for p:inputText clearIcon(X button in end)

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

Answer

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. That selector would be searching for something like this:

<div class='ui-input-clear'>
  <div class='ui-btn'>
    <div class='ui-icon-delete'>
      <div class='ui-btn-icon-notext'>
        <div class='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/

Comments