I want to render using Richfaces a context menu on left click on a link-appearing text (blue text, and underline and cursor onmouseover). So, imagine a link which when clicked shows a context menu. Note that I don't care if the text is indeed a link, I just want it to appear as a link. So, even normal text would be fine, I would make it appear as a link using CSS.
I have the following conditions:
The context menu must appear on client side, without making a request.
The context menu must appear using a rich:componentControl (these "links") are inside a datatable, so the same rich:contextMenu must be re-used.
I still have not found a satisfactory solution, as each approach I have tried has caused a problem for me:
If I use h:outputText (that would be ideal), I cannot attach on it a rich:componentControl (I guess because it cannot fire an onclick event).
If I use a4j:commandLink, although I can attach a rich:componentControl, it makes a server request. I tried to add onclick="return false;" to prevent the request, but Richfaces adds the JS generated by the rich:componentControl after whatever is inside the onclick, which causes this code not to be reached at all, and of course the context menu not to appear at all.
Is there any way to do this? Please remember, no request!
You may try
<rich:componentControl disableDefault="true" ...>
According to documentation with this param componentControl should add return false; itself.
But be aware of corresponding bug: RF-5607
In case documentation lies you may use html anchors. This answer shows how to create a link with componentControl and without page refresh:
<h:outputLink value="#" id="link" onclick="return false;">
<h:outputText value="Link text"/>
<rich:componentControl attachTo="link" for="panel" operation="show" event="onclick"/>
</h:outputLink>
The onclick="return false;" prevents the anchor from scrolling the page to the clicked link.
Related
My application is managing software, and for user convenience, I want to allow them to open multiple tabs for changing parameters of more than one record at a time. But after finishing whatever they doing, the tabs stays open, and I got some complains about that. So basically my question is:
If there's any way to close browser tab that sends a request to method in my backing bean? for example:
JSF page:
<h:commandButton value="Public score"
action="#{assignmentBean.publicSelected()}">
</h:commandButton>
Bean method:
public void publicSelected() {
application.setAssignmentStatus(done);
dataAccess.mergeEntity(application);
}
is there any way to add something after merging command and close browser tab that activated method? Thanks for help
FULL CODE FOR SOLUTION I'm bad with mixing JS and JSF, so for any of you that are also bad at this I post full code solution using Tiago Vieira Dos Santos hint.
Now my button code looks like:
<h:commandButton value="Public score"
action="#{myBean.doThings}">
<f:ajax execute="#this" onevent="pop"/>
</h:commandButton>
plus on bottom of page I added code as follows:
<script type="text/javascript">
function pop(data){
if(data.status == "success"){
window.close();
}
}
</script>
now after method does what has to be done the window closes.
I think you can be use the javascript command Window.close() then you can put it on oncomplete tag or call in you managed bean using the FacesContext.
See more in this How to close current tab in a browser window?
Using an OutputLink and Javascript
<h:outputLink onclick="window.open('popup.faces', 'popupWindowName', 'dependent=yes, menubar=no, toolbar=no'); return false;" value="#">
<h:outputText value="open popup" />
</h:outputLink>
With this solution we got control over the appearance of the new browser window. And since there is no postback, there is no validation at all. This is the easiest way to open a new browser window when no model update is needed and no action has to be executed.
In order to implement a proper action handling we need to move the decision whether to open a new window to the action listener.
<h:commandLink actionListener="#{bean.openPopupClicked}" value="open popup" />
public void openPopupClicked(ActionEvent event) {
// code to open a new browser window goes here
}
I'm working with a JSF application and I'm seeing the URL that appears in the browser's navigation bar is always for the page I just left, rather than the page I'm on.
It is because you are forwarded(not redirected) to another page from server, To redirect you need to set the following param with your return
?faces-redirect=true
That will happen if you're using POST for navigation by e.g. commandlinks/commandbuttons. If it's pure page-to-page navigation and you actually don't need to submit anything to the server, then you've a bigger problem. You will indeed get exactly this nasty "side effect" and your links will not be bookmarkable nor searchbot-crawlable. PRG (Post-Redirect-Get), as suggested by other answers, will indeed solve the bookmarkability ("one URL behind") problem, but it surely won't solve the inability of searchbots to crawl/index the pages.
Just don't use POST for plain page-to-page navigation in first place. Use GET for that. Use <h:link> instead of <h:commandLink> and so on. In code, replace all
<h:form>
<h:commandLink value="Next page" action="nextpage" />
</h:form>
by
<h:link value="Next page" outcome="nextpage" />
See also:
When should I use h:outputLink instead of h:commandLink?
What is the difference between redirect and navigation/forward and when to use what?
By default, JSF performs POST operations directed to the original page's URL. If you use a <navigation-rule>, you can specify <redirect/> to let the browser perform an additional request, so the target page's URL will appear in the navigation bar.
I have the following dialog inside my .xhtml page.
<p:dialog widgetVar="exampleDialog" onShow="fillTextArea()" >
<p:tabView id="tabView">
<p:tab id="exampleTab" title="Example">
<p:inputTextarea id="someInputTextArea" autoResize="false"
value="" />
</p:tab>
</p:tabView>
</p:dialog>
The dialog is shown when a button is clicked. The fillTextArea javascript function is defined inside script tags at the head of the document.
function fillTextArea() {
console.log(jQuery("textarea[id='someInputTextArea']")); // logs empty array []
console.log($("[id='someInputTextArea']")); // logs empty array []
jQuery("textarea[id='someInputTextArea']").val('xxx'); // does nothing
}
What's the problem? Why can't I retrieve the input text area?
Instead of using the onShow event of the Dialog, I tried:
exampleDialog.show();
fillTextArea();
just in case. But this didn't work neither. I'm trying to set the contents of the inputTextArea.
Any help appreciated. Thanks.
jQuery works on the JSF-generated HTML DOM tree, not on the JSF source code. JSF components do not necessarily generate the same client ID (the HTML element ID) as you have specified in the component ID. They may be prepended with IDs of the parent NamingContainer components. The <h:form> and <p:tabView> are such components.
Open the page in webbrowser, rightclick and View Source and locate the generated HTML code of the <p:inputTextarea>. It'll look something like this:
<textarea id="formId:tabViewId:textareaId">
You need to specify exactly this ID in the jQuery selector.
$("[id='formId:tabViewId:textareaId']");
See also:
How to refer to a JSF component Id in jquery?
How to select JSF components using jQuery?
I am having trouble selecting an item from a Javascript dropdown (i.e. the items in the drop list are not hidden in DOM tree, they are not present at all until link is clicked). I have tried using the Actions class in ways like this:
Actions cursor = new Actions(driver);
cursor.moveToElement(linkThataDropsMenu).perform();
cursor.click();
I have tried using the clickAndWait() function but it apparently does not exist in the Java webDriver libraries, and I have tried many variations of pausing and clicking in my code, including clicking twice. clickAndHold() also does nothing.
Below is the DOM tree after the menu has been generated. The only thing that changes on clicking is the insertion of div class="menu"
<div id="divIdActive_2" class="data number active" style="min-height: 21px;">
<a class="opencnl" href="#">
<span id="opencnlSpan" class="active" style="background-color:
transparent;">800-852-2222</span>
</a>
<img class="tollFree" title="Display name(s) for Toll free function properly on
Verizon Wireless devices, but may be omitted by other carriers on
their devices." src="img/nil.gif">
<input id="customNum" type="hidden" value="8008522222" name="number_2">
<div class="menu">
<a class="edit" href="#">Change Custom Number</a>
<a class="copy" href="#">Copy Settings for 0 Selected Lines</a>
<a class="clear" href="#">Clear Settings For this Line</a>
</div>
</div>
Here's the strange part though - I can get the menu to drop from the IDE, using click() or clickAndWait(), and the exact same locator. From my Java code I can use my locators to gather the text of the element I want to click, but I can't click the element. I have hundreds of other click commands in my Java code that work perfectly well, but not here. Any ideas? Thanks for reading at least!
Have you tried using isDisplayed() function ? Whichever option you want to click on should be visible before it can be clicked on . So , instead of the clickAndWait() that selenium 1 had, we have element.isDisplayed(). This has an implicit wait ( which is set when the browser driver is created , check documentation ) . By default, when Selenium encounters an isDisplayed function, it waits for that much amount of time before going forward.
I got it! The trick was to mouse over the item, then click, then mouse over the item again, which leaves the cursor there, and then grab the newly rendered objects. My guess now is that before I added that second moveToElement(), as soon as the click happened the cursor was done doing everything it was asked to do and was garbage collected. Here's my code for that - hope it helps somebody!
Actions cursor = new Actions(driver);
cursor.moveToElement(customNumberLink).perform();
cursor.click();
// move to SAME element to leave cursor where it is while Javascript runs.
cursor.moveToElement(customNumberLink).perform();
// now grab newly generated elements
WebElement clearLink = customNumberCell.findElement(By.cssSelector("a.clear"));
clearLink.click();
How to make Enter Key Press behave like Submit in JSF. It works with InputBoxes; but not with inputSecret boxes
I haven't seen this issue before. The chance is little that this behaviour is browser specific. Try in different kinds of browsers to exclude the one and other (IE6/7/8, FF, Safari, Chrome, etc). The chance is bigger that this is caused by a (poor) Javascript key event listener which incorrectly suppresses the enter key (for example a JS password validator which checks the entered characters).
If still in vain, just add the following onkeypress to the h:form:
<h:form onkeypress="if (event.keyCode == 13) this.submit();">
You need to take textareas into account however. If you have them, then you need to copy all onkeypress events over the h:inputXXX elements expect of textareas yourself.
If you want to press ENTER key instead of submit in any form, what we have to do here is add defaultcommand attribute in af:form tag and give id of the submit button as value. Sample code snippet for this is
<af:form id="f1" defaultCommand="cb1">
<af:outputText value="User Name" id="usename"/>
<af:inputText value="#{BackingBean.userName}" id="uname" />
<af:outputText value="Password" id="pword"/>
<af:inputText value="#{BackingBean.password}" id="paword" secret="true"/>
<af:commandButton text="Submit" action="#{BackingBean.method}" id="cb1" />
</af:form>
I made it work by placing an additional inputBox and hiding it using javascript. Let me know if you have any other suggestions
Thanks baluC for pointing me in the right direction
Jerry
tested with jsf 2. put:
<h:commandButton id="hidden" style="visibility: hidden;" action="#{mybean.myaction()}" />
in your form
From ComputerPilot's answer I came to know that it's bug in IE which wouldn't make the parent form to submit if there's only one input element. To overcome this problem I added one more input Box with attribute style="display:none" and it worked fine.
There is an old specification that pops into my mind with this one. If you have a form that contains just one input field, the behaviour of submitting on the enter-key doesn't work in some versions of Internet Explorer. The easiest fix is to make sure you have more than one input field.
Other reasons for this problem include...
Not having an input of type submit
Having an input of type submit, but it isn't visible on the page (hidden or positioned off-page)
This behaviour is very specific to this browser.
MS Bug Report Here: connect.microsoft.com: submit button value not posted with form submission