EL expression of JSF in JavaScript [duplicate] - javascript

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

Related

Why am I able to use django template variables dynamically?

My understanding of drango templates is that everything happens on server side and then it generates an html out of the templates. After, generation, it is just plain text in the html. But for some reason, I am able to use django variables dynamically in javascript.
Here is a javascript example:
$("#smth").append("<li>{{djangoObject.0.id}}</li>");
Even if I put this in an event handler, meaning, it for sure will be called after the html generation, it works just fine.
How and most importantly, WHY does django keep the variable in the client-side?
It's not being used client side, it's just being rendered directly into the Javascript string. So if djangoObject[0].id were 12, for example, the resulting code would look like
$("#smth").append("<li>12</li>");
Which, obviously, would run just fine. It's not dynamic though, and be sure to keep that in mind - it doesn't fetch id at the point of the event happening. It fetches it at template rendering, which happens before the HTML (and embedded Javascript) is sent to the client (your browser).
This code rendered to something like $("#smth").append("<li>123</li>");. Of course this work without any problem after the html generation.

Using Struts tags in Javascript

We have some widgets developed using Dojo and Javascript. The dojo code invokes some application services using io script mechanism to overcome cross browser issues. Currently the action for the io script is hard coded as follows.
var host="myhost.com";
var url = "http://"+host+"/context/service";
Every time we need to create WAR, we have to change host details. Is there a way in JS we can configure this ie., some thing like reading it from properties.
I found this s:url struts tag. I assume we can use this tag inside javascript code in a JSP. Can i use it in plain JS out side of JSP?
Sure, if you have your container set up to process *.js files as JSP files.
IMO this is a bit brittle.
You can also do things like hide data in the DOM via hidden elements or <script> tags with reasonable type attributes (e.g., not "text/javascript", the default).
You can also put the data into JavaScript variables in the JSP and access them from external JS files.

Referencing ASPX controls from an External JS file

I have a question. I have a aspx control (for e.g textbox). I reference it using document.getElementById('<%=textbox.ClientID%>').value. When I have the code in the same aspx file it works. But as soon reference it from an external file (example MyJSFunctions.js), I cannnot. I get an error saying "the object does not exist or it is null"
I have included the name of the js file like
I did this because I like having all my js functions in a seperate file nad doing this also reduces the load overhead.
Why is this happening? Can I accomplish the same using jquery?
You will need to parametise your Javascript to accept the desired argument, then pass the inline ASP.NET script within the server-side page or control as the value of such. This will allow the engine to render the inline code appropriately.
It happens because the server renders your pages (not in the sense of a browser rendering HTML, but rather the ASP.NET engine making transformations to turn your .NETified web mark-up into standard web mark-up) prior to pushing them down to the client - this will only happen for "registered" types, and that doesn't (and shouldn't) include Javascript files (although you can technically register items to handle, unless you have a bespoke module to handle compilation of inline scripting among Javascript, then it would err anyway.)
jQuery essentially being something of a Javascript framework, you're in the same boat with that, so to speak.
As an example, consider the following...
Your script file:
function doSomethingJavascripty(withThisClientID) {
//do something with...
document.getElementById(withThisClientID).value;
}
Your ASPX page:
<script type="text/javascript" src="/path/to/script.js"><script>
<script type="text/javascript">
//call your function when appropriate...
doSomethingJavascripty('<%=textbox.ClientID%>');
</script>
One thing you could do is have the following Javascript code in your ASPX page:
var myTextbox = '<%=textbox.ClientID%>';
Then, in your external JS file (make sure this is after the above line), have:
document.getElementById(myTextbox).value
Another alternative is just hardcode in the ClientID into your code, but note you'll break it if you change the ID or parent container of that textbox control in the future.

Executing JavaScript in Adobe Flex without using Browser Control

I want to add scripting functionality to my Adobe Flex application. I know it's possible to use the Browser control, and add the script packaged as a HTML file to the Browser control, and expose Flex objects. However I'd like to if it is possible to execute JavaScript without using the Browser control.
UPDATE: I guess my question hasn't been clear enough. I'll explain what I'm trying to do.
I want to make my application customizable using JavaScript ie., add scripting/plugins to my application dynamically.
I realize that it's possible to dynamically execute Javascript by inserting the JS code into the HTMLLoader control. I would like to know there is a direct way to execute JavaScript without inserting it into the HTMLLoader control.
If you are in a web application, then the following should work
var retval:int = ExternalInterface.call("myfunction", "arg1","arg2");
You can also use URLRequest to accomplish this
var req:URLRequest = new URLRequest("javascript:myfunction()");
navigateToURL(req,'_self');
If you are in a AIR application, something like this should work
var html:HTMLLoader = new HTMLLoader();
html.load(new URLRequest("...URL..."));
html.addEventListener(Event.COMPLETE, myeventhandler);
In the event handler you can do this.
html.window.document.location = "javascript:myfunction(arg1)";
If i understand what you want, you can add your Javascript code into your {nameOfApplication}.html which exists in bin-debug of your project.
Notice: with this method, the javascript code will be disappear always when you compile. It's about the HTML wrapper.

can't get html td element using javascript in jsf application

and in JavaScript
document.getElementById('myId');
This is not working in JSF application. However, the same is working if I save the generated HTML in my system and open it .
Any Help ?
When writing JavaScript code for a component based MVC framework which generates HTML, like JSF, you should not focus on the source code of the component based MVC framework, but on its generated HTML output.
If you can't tell this beforehand based on the source code, then you need to just open up the page in your favourite webbrowser and then rightclick the page and choose View Source. You'll see that the generated Client ID's are prepended by the ID's of the UINamingContainer components (like h:form, h:dataTable and f:subView). If you don't specify an ID for each of them, you will get an autogenerated ID like j_id_xxxx. To ease the work, you need to specify an ID for them. E.g.
<h:form id="form">
Also see this blog article for more information and hints. This blog article may also be useful to learn more about the wall between Java/JSP/JSF and JavaScript.

Categories