CommandLink onclick JavaScript

How to add onclick JavaScript to commandLink ?
Why commandButton has onclick method, but commandLink hasn't ?

When you use <h:commandLink>, the JSF implementation must write the "onclick" event handler so that the form it belongs to is submitted with enough info to tell which link was clicked. If you could add your own code for "onclick", it could potentially disable the main functionality of the <h:commandLink>. Use <h:outputLink> instead if you want to override the "onclick" behavior.

Similar Messages

t:commandLink onclick event issue

Hi All,
Thanks to all of you for your previous valuable suggestions. Currently iam working on JSF1.1 where i need to implement a javascript window.confirm(...) when the user clicks on 'Delete' command link. The problem is when i click on 'Ok' button in the confirm window my javascript function returning true and the row gets deleted. And when i click on 'Cancel' button my javascript function returning false but still the row get deleted. Could you please suggest me on this.
My code is as follows.
<script type="text/javascript">
          function deleteConfirm() {
                    var response = window.confirm("Are you sure you want to Delete");
                    if(response) {
                         alert(response);
                         return true;
                    } else {
                         alert(response);
                         return false;
</script>
And my <t:commandLink> is as follows
<t:commandLink onclick="javascript:deleteConfirm(this);" actionListener="#{additionalInterestBean.deleteInterest}" action="additional_interest_list">
<h:outputText value="#{PolicyLabels['AdditionalInterestList.Delete']}" />
</t:commandLink>
Any help or suggestions will be highly appreciated.
Thanks
Krishna

Hi Niki,
Thanks for your suggestion. I tried the way as you suggested but didn't work. I am getting a javascript error on the status bar....done,with errors on page.
<t:commandLink onclick="return confirm('Are you sure you want to Delete');" actionListener="#{additionalInterestBean.deleteInterest}" >
<h:outputText value="#{PolicyLabels['AdditionalInterestList.Delete']}" />
</t:commandLink>

H:commandLink and Javascript

Hi All,
I have a commandLink in which I pass parameter using <f:param>. This commnadLink is enclosed under <h:form>
This <h:form> is calling javascript function on its onSubmit event.
<h:form onSubmit="return validateForm()" >
   <h:commandLink action="#{bean.action}" >
       <f:param name="action" value ="settings"/>
   </h:commandLink>
</h:form>Now my problem is when I click commandlink my javascript function is not executed. And there is no onclick available in commandLink tag.
I saw the html output of this code. h:commandLink puts its own onclick so it makes sense that it doesnot have onClick support. But in generated code commandLink forcefully submits the form. So ideally any function in form's onsubmit() should be called but in this case it is not.
Any suggestions ? What is going wrong here ?
Thanks

We have a similar problem here. Strictly speaking, it seems like Faces isn't really oriented toward javascript validation -- it's expected that'll happen server side.
If you have to have it client-side (and, yes, I know the arguments), you could try the approach I came up w/here. (I'd actually appreciate some comments on it -- it's a hack, but i'm wondering how bad it is. :)
Put the h:commandLink in a hidden div, with just a wee bit of extra javascript:
<div style="display:none;">
<h:commandLink id="okCmd" ....>....</h:commandLink>
<h:outputFormat escape="false" value="
<script> var okCmd = \"{0}\"; </script>
">
<yourExtremelyShortTaglibNamespacePrefix:clientIdParam componentId="okCmd" />
<h:outputFormat>
</div>write your own link whose onclick handler calls validateForm() and then calls the h:commandLink's onclick:
function okeyDokey() {
if (validateForm())
    clickLink( okCmd); // okCmd var defined elsewhere (see above)
}So, then we need the clientIdParam custom tag, and the clickLink() javascript function.
public class ClientIdParam extends UIParameter
   public static final String COMPONENT_TYPE = "canopy.ClientIdParam";
    * Returns the clientId of the component indicated by the 'componentId'
    * property. {@link UIComponent#findComponent(String)} will be used to
    * find the component.
   public Object getValue()
      return findComponent( getComponentId())
         .getClientId( FacesContext.getCurrentInstance());
   // getComponentId() (omitted) is straightforward....
}javascript clickLink():
* Simulate a user clicking a link. Originally written for simulating clicks
* on JSF commandLinks, so if you change it, make sure it still works for
* that purpose.
function clickLink( aLinkId)
   var link = document.getElementById( aLinkId);
   link.onclick();
}So... am I insane? Did I miss a simple one-line solution as plain as the nose on my face? (I wouldn't mind finding out there's something better.)
John.

JSF t:commandLink onclick event

Hi All,
First of all i would like to thank you all for your previous valuable suggestions. Currently i am working on a requirement where i have a <t:commandLink..>
when i click on command Link...i need to call a backing bean method and once that method execution is completed i need to open a new popup window. How can i do this. Any help will be highly appreciated.
Please let me know if my requirement is not clear or in complete.

Hi Niki,
Thanks for your suggestion. I tried the way as you suggested but didn't work. I am getting a javascript error on the status bar....done,with errors on page.
<t:commandLink onclick="return confirm('Are you sure you want to Delete');" actionListener="#{additionalInterestBean.deleteInterest}" >
<h:outputText value="#{PolicyLabels['AdditionalInterestList.Delete']}" />
</t:commandLink>

Nav onclick=\"JavaScript:GoNav with Filter in the target

Hi together,
I defined two requests. In the first request I call the secong with the following command:
@[html]"<font class=Nav onclick=\"JavaScript:GoNav(event, '/shared/Entwicklung/Validierung/KNE/KNEB', '- KNE Gesamt Person', 'Person Kurzbezeichnung','"@"'); \"> "@" </font>" ;;@
The second Reqest is prompted by 'Person Kurzbezeichnung'.
BUT! the filter isn't populated :-(
What I did wrong?
Regards,
Stefan

a blank to much in the ' "@" ' and it will not work :-)
I found it.
Regards,
Stefan

Onclick javascript throws addtional characters

HI,
I tried below
In column properties>>data format>>custom text format
[html] {span class=\"Nav\" onClick=\"javascript:PortalPageNav(event,'/shared/report/DASHBOARD','page 1','Param PL','"Pl Line"','@')\">@ {SPAN>
</span>
when i try to export report in excel i can find addtional special characters-@ ';">
my result comes like this
@ ';">name1
@ ';">name2
can i know what is wrong in above code

but when I click the add button on a particular item all 3 of the
items are added to my shopping list. Can anyone tell me why? and if so how > > can I resolve this problem?I don't think that clicking the button is what is causing your problem. The following line of code is the problem:
<td><a href="#"><img src="images/add.gif" width="47" height="19"
border="0" name="addButton<%=product.getItemId()%>" id="<%=product.getItemId()%>"
onMouseOver="MM_swapImage('addButton<%=product.getItemId()%>','','images/add_hover.gif',1)"
onMouseOut="MM_swapImgRestore()"
onclick="<%/*addNewItem(product.getItemId());*/ list.addItem(new Integer (product.getItemId()));%>
window.parent.location.reload(false);"></a></td> When you are trying to create the onClick, you are invoking list.addItem. You are doing this for each item. By the way, I don't think the resulting onClick will actually do anything. It will evaluate to the item id and nothing will happen. You need to trigger a request to the server here (e.g. by submitting a form and including the correct item id).

Navigation Bar OnClick JavaScript Problem

I tried to create a Navigation Bar to pop up a online help documentation. The sample application can be seen at
http://apex.oracle.com/pls/otn/f?p=27294:1
When I debugged the application, I found that the link of Help Navigation Bar points to "http://apex.oracle.com/pls/otn/f?p=27294:#:432121301146634::NO:::"
not as what I defined on OnClick JavaScript for the navigation bar. The Help Window won't pop up.
Please help. Thanks.

Have a look at the following post:
how to create a popup help page in html db

OnClick javascript.

L.S.
I implemented a master-detail relationship in my app using the following lines of code in the onClick Javascript property of a hyperlink in a table:
window.open(�/Fitwise/faces/OnderneminDetails.jsp?idBedrijf=#{currentRow.value[�bedrijf.idBedrijf�]}�, �_blank�, �height=432, resizable=yes, scrollbars=yes, toolbar=yes, width=576�); return false;
This works fine. In the details page I get the idBedrijf from the parameter and set it as the value of a private property idBedrijf with its own getter and setter methods.
Now I would like to open another window when the user clicks an ImageHyperlink in the detailspage. For this to work properly I have to transfer the idBedrijf to that page. I used the following lines of code in the onClick Javascript property of the ImageHyperlink:
window.open(�/Fitwise/faces/ODLesrooster.jsp?idBedrijf=#{getIdBedrijf()]}�, �_blank�, �height=600, resizable=yes, scrollbars=yes, toolbar=yes, width=800�); return false;
This does not work. I suppose it is the getIdBedrijf() bit of code that is wrong, what do I have to replace it with to get the onClick thing working.
Thanks,
Annet.

Thanks for your reply yossarian,
I replaced the Image Hyperlink with a Hyperlink and got the code working. However I cannot figure out why it does not work when I use an Image Hyperlink. I replaced the code with the simple window.close(); return false; bit of code,of which I am sure it works fine with a Hyperlink, but when I run the project, clicking on the Image Hyperlink does not have any effect at all. I did use an Image Hyperlink with an action event on another occassion, but, since I would like to open a new window, I would rather use the onClick javascript option to implement this behaviour.
Any ideas what the problem is?
Thanks,
Annet.

HTML DB OnClick Javascript

Hi everybody,
At the end of my link, I add "TARGET=BLANK" to open a new window and
With OnClick Javascript, I have window.blur() window.print()
Is it possible to combine those window ?
Thank you. Bye.

Thanks Vikas,
I will explain to you. I work with version 1.6. I have a navigation bar entry name "Print Version". When I click on this entry: I want a new window appears and get the focus on this new page. Also, I want to get the printer options popup. On my link, I put a TARGET=BLANK at the end to open a new window. Also on "OnClick Javascript'', I wrote window.blur() window.print(). Window.blur() to get off the focus on the current page and give it to the new window. After this, with window.print(), I want the printer options to popup. My question is: Is it possible to combine many window.xxxxxx.
Thank you. Bye.

Onclick javascript confirm for commandlinks

Pre JSF 1.2, there was no onclick for commandLinks. Below is some javascript I wrote to dynamically pre-pend a confirm javascript call before the onclick submit event is called. I use this so that my delete links in my application pop up confirm dialogs before actually doing the submit. (I am unable to upgrade to JSF 1.2) I hope this helps someone else experiencing the same problem.
Comments and suggestions are always welcome!
You need to wrap your commandLink components with some kind of tag:
Example: <span name="deleteButton" confirm="#{itemTitle}"><commandLink... /></span>
Also, you need to add pageConfirmLoader as a function to be executed on window load.
var ConfirmLoader = {
     init : function(tag, tagName) {
          this.tag = tag;
          this.tagName = tagName;
     load : function() {
         if(this.tag != null && this.tagName != null) {
               var spans = document.getElementsByTagName(this.tag);
               var spansLength = spans.length;
               var confirmHelper = {
                    functs: [ ],
                    descs: [ ],
                    confirmDelete: function(event) {
                         var loc = event.target.parentNode.parentNode.id;
                         var confirmText = "Are you sure you want to delete this item?";
                         if(this.descs[loc] != null) {
                              confirmText = "Are you sure you want to delete '" + this.descs[loc] + "' ?"
                         if(confirm(confirmText) ) {
                              eval(this.functs[loc](event));
               for (i = 0; i < spansLength; i++) {
                    if (spans.getAttribute('name') == this.tagName) {
                         confirmHelper.functs[spans[i].id] = spans[i].childNodes[0].onclick;
                         confirmHelper.descs[spans[i].id] = spans[i].getAttribute('confirm');
                         spans[i].childNodes[0].onclick = function(event){ confirmHelper.confirmDelete(event); };
function pageConfirmLoader() {
     ConfirmLoader.load();
ConfirmLoader.init('span', 'deleteButton');

I have one missed attribute: the wrapping span tag also needs some kind of id assigned to it, so the javascript ConfirmLoader can insert the values into the correct locations.
<span name="deleteButton" confirm="#{itemTitle}" id="#{iter.nextId}" ><commandLink... /></span>

h:commandLink - 'onclick' encoding

I've noticed a deficiency in the JSF specification regarding the encoding of the 'onclick' attribute of the <h:commandLink> component:
[http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs/h/commandLink.html]
[http://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/jsp/h/commandLink.html]
[http://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/h/commandLink.html]
All of these state:
Encode Behavior
If an "onclick" attribute was specified by the user, render this JavaScript in a function, and render the user's JavaScript in a function. Render both functions in a choice function as follows:
var a=function(){#USER_FUNCTION#}; var b=function(){#JSF_FUNCTION#}; return (a()==false) ? false : b();
where #USER_FUNCTION# is the user's JavaScript and #JSF_FUNCTION# is the JavaScript rendered by JSF. The choice function should operate such that if the user's JavaScript returns true, then the rendered JavaScript will also execute.Anyone familiar with JavaScript executed in a browser knows the event handlers are executed a bit differently than normal functions. So the 'this' reference in event handlers refers to the element the handler has been registered on, like:
<a href="..." onclick="window.alert(this.href);">...</a>Invoking a function in the normal way "resets" the 'this' reference to the global object, i.e. the 'window', so:
<script type="text/javascript">
function testAlert() {
alert(this.href);
<a href="..." onclick="testAlert();">...</a>no longer works as expected. The same happens with the JSF specified way of handling user specified 'onclick' script:
<h:commandLink value="Try me!" action="..." onclick="window.alert(this.href);" />would render:
<a href="#" onclick="var a=function(){window.alert(this.href);}; var b=function(){#JSF_FUNCTION#}; return (a()==false) ? false : b();">Try me!</a>The user code in the above example would 'alert' an undefined value and not the expected 'href' of the link element. The problem is when one wants to pass the original 'this' reference to the element to a function for additional processing but this reference gets lost because of the JSF specification. It is really trivial to have this done correctly and causing no confusion to newcomers (like me), as:
var a=function(){#USER_FUNCTION#}; var b=function(){#JSF_FUNCTION#}; return (a.call(this)==false) ? false : b();Note the a.call(this) vs. a() call. This would preserve the 'this' reference in the #USER_FUNCTION# code, would be more natural to everyone (no difference between writing the code in a plain HTML link element or JSF h:commandLink) and would be just better. I hope someone will address this issue in next JSF revision. It is currently very irritating if not a buggy behavior.

You have raised a very interesting and valid point. However, this is probably not the best venue to get the message to the people that need to hear it. I would suggest bringing it up on the Mojarra developers mailing list ( [https://javaserverfaces.dev.java.net/mailinglists.html|https://javaserverfaces.dev.java.net/mailinglists.html] ).

OnClick JavaScript error

I have made several changes to my nav bar through Fireworks
and exported, which I have done a million times, but this time when
I inser Fireworkd HTML image it gives me the following message:
While executing onClick in Fireworks HTML.htm, the following
JavaScript error occurred:
At line 438 of File C:\Program Files\Macromedia\Dreamweaver
MX 2004\Configuration\Shared\MM\Scripts\InsertFireworksHTML.js":
TypeError: menuFn.match(searchPatt)has no properties.
I should tell you we have two sites we are putting this in.
One to test pages and one that is live.
Any help would be great!
BigD

Don't use FW menus.
You can try this simple fix -
Quit DW.
Find this folder -
C:\Documents and Settings\<username>\Application
Data\Macromedia\Dreamweaver
8\Configuration\WinFileCache-*.dat
(these folders are normally hidden - you may have to use
Explorer > Tools >
Folder Options to unhide them)
or on Mac -
Library/Application Support/Macromedia/Dreamweaver
8/Configuration/MacFileCache-*.dat
and delete it.
Restart DW. Works better?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"BigD05" <[email protected]> wrote in
message
news:es6jpt$551$[email protected]..
>I have made several changes to my nav bar through
Fireworks and exported,
>which
> I have done a million times, but this time when I inser
Fireworkd HTML
> image it
> gives me the following message:
>
> While executing onClick in Fireworks HTML.htm, the
following JavaScript
> error
> occurred:
> At line 438 of File C:\Program
Files\Macromedia\Dreamweaver MX
>
2004\Configuration\Shared\MM\Scripts\InsertFireworksHTML.js":
TypeError:
> menuFn.match(searchPatt)has no properties.
>
> I should tell you we have two sites we are putting this
in. One to test
> pages
> and one that is live.
>
> Any help would be great!
>
> BigD
>
>

OnClick Javascript Error in DW CS4

Hi. I can't do roll overs. Whenever I try to select the first image, this alertbox appears with this message, "While Executing onClick in Rollover.htm, the following Javascript Error Occurred: In file "Rollover": exception thrown in native function.
What does this mean and how do I fix it?

It usually means that your site cache has become corrupted.
Troubleshooting JavaScript errors in Dreamweaver
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_19105#dat
Try #4 first.

WebHelp OnClick Javascript problem

Hello there,
I wanted to insert an email feedback link into my webhelp file.
So in my Master Page I added the following link in the header of the page:
<a href = "Send feedback" onClick="parent.location='mailto:[email protected]?Subject=blah blah'"> </a>
It works fine. THe link is displayed on all pages and when I click on it an email is generated. Problem is after I click on the link in webhelp, the page in the right of the frame i.e. the topic I'm viewing is refreshed and it says "Internet Explorer cannot display the webpage".
Any ideas how I can fix this?
Thanks

Thanks,
It doesn't work at all with that hehe
It's a bit annoying basically I've found some javascript that should in theory allow me to let a user submit feedback and it will send the title of the page they are viewing. This is how its meant to work:
<head>
<script type="text/javascript">
function getFileName() {
//this gets the full url
var url = document.location.href;
//this removes the anchor at the end, if there is one
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
//this removes the query after the file name, if there is one
url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
//this removes everything before the last slash in the path
url = url.substring(url.lastIndexOf("/") + 1, url.length);
//return
return url;
function EmailLink()
topictitle=getFileName();
document.write(topictitle);
window.location = "mailto:[email protected] "+" ?subject= Re: Web Analytics help - "+ topictitle;"sometitle"
</script>
</head>
<FORM>
<a href = "E-mail" onClick="EmailLink()">Email </a>
</FORM>
So it works fine from within a web browser...but for some reason - it won't work from within webhelp when it's embedded into my master page

Onclick javascript, catching mouse clicks

Hello Forum,
I have a page, let's say "page 1" with an interactive report and a column link.
After a onclick event a page submit will be fired and i will be redirect to a new page, let's say "page 2".
When i click now a second time at the column link on "page 1" (not a ondblclick event), before the page branches to "page 2", i will get an error.
This is because there is a unique constraint violation with the building of collections on "page 2".
As work around, i have the following idea but no solution for this idea.
If someone clicks more than once, i want to catch every mouse-click on this column link as "void(0)" means "do nothing".
In summary:
the first mouse-click should be ok, the second, third, etc should do nothing.
I guess ondblclick event is not a the right way to handle this issue.
Because when someone clicks and he will wait for two seconds and then he clicks again before the page is branching,
then we don't have a dbclick event, but the error is still coming.
Does anybody have an idea to realize this task.
Regards Stefan

You should be using the nice existing apex properties
See this http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/bldr_pg_edit_att.htm#HTMDB25159

CommandLink onclick JavaScript

Similar Messages

Maybe you are looking for