CODEWITHSUNDEEP
javascriptjqueryjsfprimefaces
karla
karla

Reputation: 4606

How get reference element with JavaScript?

I have little experience with front-end development, needles to mention that web ui is out of my planet..

The problem I need to show and hide an element, on the onClick event of a button. The technology stack is JSF with PrimeFaces, for the script we use JavaScript.

Basically - how can I get reference to the element that I need to show/hide? And can you give me a clue why the line (below) in comment works good?

function test(id, id2){
    var element =$(document).get("#testEl");
    $(element).show(); //this doesn't work??? although I get no errors executing it..
    //  $("#tab-view\\:template-form\\:testEl").show();  // <-- however this works? Why?
    $(btn).css("display", "none");
}

The html:

 <p:commandButton widgetVar="edit" id="edit" value="Edit" onclick="test(this,    #testEl)" type="button"/>                              
      <p:panel widgetVar="opa" id="testEl" closable="false" visible="false"  >
      <h:panelGrid ..>....
</h:panelGrid>

</p:panel>

Thanks!

Upvotes: 1

Views: 767

Answers (6)

Kuba
Kuba

Reputation: 2089

First of all, check how this ID looks like in generated HTML and use it as your base. If you are trying to pass an ID from JSF naming container like formId:someId then you have to escape colons, otherwise jQuery considers them as pseudo selectors. As a rule of thumb you should always give naming containers IDs, this way you'll avoid confusion when you see JSF auto-generated IDs and have no idea where they come from. The easiest way in this case would be to escape it in JS itself. I used to have problems with passing escaped IDs to jQuery. So set your onclick:

onclick="test(this, 'formId:testEl')";

then in JS:

function test(id, id2) {
   id2 = id2.replace(/:/g, "\\:");
   $("#" + id2).show();
}

Upvotes: 2

karla
karla

Reputation: 4606

As Kuba suggested ... what caused the my confusion was that JSF compoments (naming containers as forms and composition) "nest" their names, based on an attribute prependId value..

So the client-side ID of the element of my interest is compositionID:formID:elID. And I could get it as:

function test(btn, wv){

$(PF(wv).jqId).show();

$(btn).css("display", "none");

}

Upvotes: 1

Aakash Dhoundiyal
Aakash Dhoundiyal

Reputation: 3

$("#testEl").show();//you can show and hide accordingly

Upvotes: 0

Pengun
Pengun

Reputation: 744

You just need to do $('elementid/name/class') to reference on an element

so you need to do $('#testEl')

function test(){
        var element = $("#testEl");
        element.show();
        $(btn).css("display", "none");
    }

Upvotes: 1

Jai
Jai

Reputation: 74738

try this:

$(id2).show();

you have to use the passed id2 which is referencing the elem's id.

function test(id, id2){
   $(id2).show();
    .....
}

here id2 is the #testEl.

Upvotes: 0

Sergey Semenov
Sergey Semenov

Reputation: 369

try this

function test(){
  $("#testEl").show();

and in Your html

<div id="testEl"> ... </div>

Upvotes: 0

Related Questions