Adding JSF tags/components via jQuery

Question

Here is what I did:

var a = $(document.getElementById(\"panelForm:tableId01\"));
$(\"\").appendTo(a);

I

Answer 1

You seem to have completely missed the point of JSF and the context of JavaScript.

JSF is basically a HTML code generator. To see it yourself, create a (simple and working) JSF page and open it in your favourite webbrowser. Rightclick and choose View Source. What do you see? Yes, it's one and all HTML code! If JSF has done its job right, you should not see any JSF tags, for the very simple reason that the webbrowser do not understand them. It understands only HTML.

JavaScript is a client side language which runs in webbrowser and not in webserver. As evidence, when you run webserver and webbrowser at physically different machines and you invoke JavaScript onclick="alert('peek-a-boo')", then you see it in webbrowser, not in webserver. JavaScript can see the HTML DOM tree (anything which is available via document object, such as document.getElementById("someId")). JavaScript can not see original server side source code who's responsible for generating that HTML, let alone execute it. For jQuery it is not different for the simple reason that it's a JavaScript based library.

You need to solve your concrete functional requirement differently. If you want to dynamically add JSF components, then you should be doing it via JSF itself, not via JavaScript. Here's an answer showing one of the many ways: How to dynamically add JSF components. If you however insist in using jQuery for this, then you should be specifying the JSF component's HTML output yourself, but you're basically still completely missing the point of JSF. Carefully read the below link then.

See also:

• What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?

Answer 2

You can not use "$('<p:outputLabel value='Testing'/>')". Because it is PrimeFaces tag lib. It will generate html tag (Ex: '<label class="my-class ui-outputlabel ui-widget" id="j_idt19:j_idt22">Testing</label>') when page rendered. So you should use jquery for html tag. For example like below:

<p:outputLabel value='Testing' styleClass='my-class'/>"

var a = $(document.getElementById("panelForm:tableId01"));
$("label.my-class").appendTo(a);