We Keep Coding

EL expression of JSF in JavaScript [duplicate]

Here is what I did:
var a = $(document.getElementById("panelForm:tableId01"));
$("<p:outputLabel value='Testing'/>").appendTo(a);
It does not show the label but if I did this, for example, it works:
$("<font color='red'>Red</font>").appendTo(a);

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?

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

CakePHP form validation against javascript code

I am developing a cakephp (2.5.6) application where user can entry comments, blog posts and more. The users can use html markup (h1, h2.., quote, ..).
How can i add security to the form inputs so a user can not add javascript code like <script>alert('foo');</script> or anything else.
I have tested it with a simple $this->Form->input('description');. Now if i display the description with echo $data['Post']['description'] the alert is displayed on page refresh.
What is the common way to prevent this? Does cakephp provide any helpers or functions?

Well, you should push all output on a webpage through h() which is the Cake shortcut for htmlspecialchars. Even output you've fetched from an API or a hardware sensor. Who tells you they can't give you malicious data? Most fundamental security rule: Don't trust any data input in your system.
If you need a more detailed sanitizer HTML Purifier which is a lib and CakePHP plugin for it that allows you to come up with specific filtering. For example disallow <script> but allow <b> and <a>. It can even filter allowed HTML attributes. Read the documentation.

Web page URL link with JS onclick relative path?

I have an old web app developed in ASP.Net with the old type code behind style. I am eventually going to re-do the complete web app in ASP.Net MVC 3 - just starting to complete the first sections and integrate them. I am having some problems with a menu that appears along the top. So there is a home button it looks like the below in code:
onclick='document.location.href=\"Home.aspx\"'>
However I am getting the url in the new mvc part of web were I have the menu and i try to hit the home icon I get a page not found:
/MyWeb.Web.App/mvc/Controller/Home.aspx
The actual home aspx page exists in the location \MyWeb.Web.App\mvc\Home.aspx
I am currently stumped as to what I can edit in the JS href to get it to point to this location so the icons will work in the existing implementation and the new MVC one.
Thanks.

Use urls helpers. For example if you are using Razor and this code is inside an MVC view:
onclick='document.location.href="#Url.Content("~/mvc/home.aspx")"'>
or if you are using the WebForms view engine:
onclick='document.location.href="<%= Url.Content("~/mvc/home.aspx") %>"'>
UPDATE:
If this is in a separate javascript file then you could declare a global variable inside your Razor view that will point to the base url:
<script type="text/javascript">
var baseUrl = '#Url.Content("~/mvc")';
</script>
and then inside your javascript file:
onclick='document.location.href=\"" + baseUrl + "/home.aspx\"'
There are of course much better ways to achieve that but since you haven't provided enough details about your scenario it's difficult to suggest what might be best. For example you could use HTML5 data-* attributes in your DOM or some other elements to generate properly this url and access it in your javascript file.

SharePoint 2010 - Content Editor Web Part Duplicating Entries

I'm using Javascript inside of a SharePoint 2010 Content Editor Web Part to insert a Silverlight object. I need to do it this way instead of use a Silverlight Web Part because Silverlight Web Parts are not currently enabled. This is done entirely using Javascript.
The problem occurs when I go later to edit the Javascript inside of the CEWP - I can see the orginal Javascript requesting generation of Silverlight object and I can, this is the strange part, the CEWP has all of the generated HTML of the Silverlight object right there appended to the scrept.
So now, when I save, I save the script to generate the Silverlight object AND the HTML that was previously generated effectively duplicating the Silverlight object. If I edit again then I will now have three Silverlight objects and so on.
You can see this in action for yourself with the following sample code:
Add a new Content Editor Web Part to a page in SharePoint 2010
Edit the source HTML
Add the following code:
<script type="text/javascript">document.write("Hello<br/>");</script>
Save the web part and you're done. Now, just keep editing the CEWP. Every time you click "Edit Web Part", "Hello" will be appended to your script.
How can I use Javascript to insert DOM elements and not have the generated HTML appear in the CEWP?

It's not working because SharePoint 2010 doesn't want you copying and pasting scripts into the editor. Instead, you should be putting your scripts inside a txt file (yes, that's right a txt file) stored in SharePoint and then pointing the CEWP to use that file as the source.
First, create a file with all of your code (both Javascript and HTML - basically everything you would have normally pasted into the content editor.) Make sure to wrap your Javascript in the <script type="text/javascript"> tag and save the file with a .txt extension like "scripts.txt".
Next, add a CEWP to your page and select "Edit Web Part." In the content editor pane on the right, under "Content Link", add the URL to your txt file and click "Apply" and you're done.
Take a look at the following URL for a full description of this change in SharePoint 2010: http://sptwentyten.wordpress.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/

Use jQuery - probably far safer than a document.write which can break javascript further down the page.
Or use the code in this link to put pure HTML in the CEWP instead of dabbling with JavaScript:
http://karinebosch.wordpress.com/silverlight-meets-sharepoint/walkthrough-2-hosting-silverlight-3-in-a-content-query-web-part/

Another option is to the HTML Form Web Part (in the Forms category). This can be used to connect to other web parts, but more simply it can used to edit JavaScript directly in the web part. It seems that the rules for Content Editor Web Parts do not apply to the HTML Form Web Parts so it allows more flexibility.
More information from Microsoft is here:
http://office.microsoft.com/en-us/sharepoint-server-help/use-the-html-form-web-part-to-filter-and-display-data-in-another-web-part-HA101791813.aspx#_Toc274731120

What is the best approach for handling a complex form in html?

I need to implement a webform (JSP, struts) featuring loads of checkboxes and textfields. Basically I have a tree made of checkboxes which has to be extendable (like adding a new node). On another page the same data is used, but refined. So you add again child nodes to the mentioned data structure using textboxes etc. I can describe the datastructure in XML:
But contains about 100 rows in reality.
I found 3 approaches:
1. Do a webform in JSP which lowers the user experience because lots of postbacks are necessary (every time i add/edit/delete a node, subnode...)
2. do it in async fashion. -> loads of javascript to handle the structure of the data (keep the XML data in a hidden div and update ui)
3. go for a RIA like OpenLaszlo
What do you suggest?

If you already know OpenLaszlo, go for it. You will end up with a better user experience with less work.
You should target user interface and performance when developing an app. So IMO, plain JSP will be my last approach.

You can consider client side rendering.It allows to build very responsive web apps:
build your JSP pages to deliver JSON data, no HTML here
use a javascript templating engine in the browser to convert the data in HTML client side. I'm the author of PURE but there are plenty of others on the web that may suit better your style
when the user types or press submit, parse the form using a common technique found in many frameworks. i.e: the "name" attribute is the path to set the value in the JSON<input name="employee.name" type="text" ... />
When the form is parsed, post back the JSON to a JSP page that will read it and do the backend work.
You can use XML instead of JSON and XSLT instead of a JS templating engine, but if you target the web browser only, it adds an extra layer of complexity and trouble to parse the XML.