How get reference element with JavaScript?

Question

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!

You need to read the documentation instead of randomly calling functions. — SLaks, Feb 03 '14 at 13:37
Looks like you use fancy id for your element `#tab-view:template-form:testEl`. In this case you will have to escape colons with `\\\`. — dfsq, Feb 03 '14 at 13:42
You are missing quotes. Should be `onclick="test(this, '#testEl')"` — dfsq, Feb 03 '14 at 13:59
This all is easier if you realize and understand that JSF is merely a HTML code generator (it runs on webserver and produces some HTML output which get sent to webbrowser by webserver) and that JS/jQuery merely works on the HTML DOM tree (it runs in webbrowser on the retrieved HTML output). Open the page in browser, rightclick and *View Source*. Look closer. *That* is exactly what JS/jQuery is actually seeing. In other words, you shouldn't base off your JS/jQuery code on JSF source code, but on its generated HTML output. — BalusC, Feb 03 '14 at 14:50
Possible duplicate of [How can I know the id of a JSF component so I can use in Javascript](https://stackoverflow.com/questions/6045307/how-can-i-know-the-id-of-a-jsf-component-so-i-can-use-in-javascript) — Kukeltje, Mar 23 '18 at 09:18

Kuba · Answer 1 · 2014-03-01T18:53:41.897

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

Pengun · Answer 2 · 2014-02-03T13:50:41.177

1

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

edited Feb 03 '14 at 13:50

answered Feb 03 '14 at 13:43

Pengun

734
1
7
18

i edited my answer it should only be `element.show()` hope that should work – Pengun Feb 03 '14 at 13:51

score 1 · Accepted Answer · answered Feb 03 '14 at 14:15

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

}

score 0 · Answer 4 · answered Feb 03 '14 at 13:38

0

try this

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

and in Your html

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

answered Feb 03 '14 at 13:38

Sergey Semenov

369
2
7

score 0 · Answer 5 · edited Feb 03 '14 at 13:54

0

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

edited Feb 03 '14 at 13:54

isherwood

58,414
16
114
157

answered Feb 03 '14 at 13:42

Aakash Dhoundiyal

3
7

score 0 · Answer 6 · answered Feb 03 '14 at 13:46

0

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.

answered Feb 03 '14 at 13:46

Jai

74,255
12
74
103

I really want to. How exactly I should pass it? like: onclick="test(this, #testEl)" ?? – karla Feb 03 '14 at 13:47

How get reference element with JavaScript?

6 Answers6

Linked