Hi
I want to set focus on <h:inputText> element whenever rich:panelBarItem is opened.
I have:
<rich:panelBar>
<rich:panelBarItem onenter="setFocus();">
<h:inputText value="#{bean.value}"/>
</rich:panelBarItem>
</rich:panelBar>
it works fine when I open it with mouse click, but does not work first time when first panelBarItem is automatically opened.
How should I set focus on first opened panelBarItem? I really would like it to be some event(I could not find) on rich:panerBarItem or rich:panelBar.
You can call your method after page load to set focus to field. Something like
<script>
//call after page loaded
window.onload=setFocus();
</script>
or
<body onload="setFocus();">
Related
I have a wicket bootstrap DateTextField on a panel inside modal. When datepicker is shown from click, datepicker is attached to the root page, not the modal.
That causes a problem: without adding some z-index to datepicker, I cannot see it on top of modal.
When I blur from the picker, it should close. Somehow, due the fact the picker is not child of modal, clicking outside datepicker closes it only, if it is clicked outside the modal. Inside modal nothing happens.
I can tweak this by autoclose, but when you go to input and manually use backSpace to clear the value, there is no a way to close datepicker by clicking somewhere inside the modal.
Some html to make it clear:
<html>
<panel>
<modal>
<input>datefield is here</input>
</modal>
<panel>
<datepicker comes here>
</html>
How to get datepicker attached to modal, or somehow else fix the issue of blur inside the modal?
I have tried to attach the panel a click event that hides datepicker, but it hides the datepicker right away when it opens.
Edit:
Click to modal does nothing, although html is moved artificially there and is placed correctly in DOM tree. Thanks to #Gavriel about insight to moving stuff between DOM elements, though.
Edit2:
Code to reproduce situation:
class MyPanel extends Panel {
DateTextField field = new DateTextField("foo");
(...)
add(field);
}
class MyPage extends WebPage {
(...)
ModalWindow modal = new ModalWindow("modal");
modal.add(new MyPanel());
(...)
}
html for the panel, containing the dateTextField
<html>
..
<input wicket:id="foo"></input>
..
</html>
As you see from snippet, java code generates the jQuery part.
Edit3:
I speak about this creature:
[DateTextField sources] https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/DateTextField.java
Edit4:
Hmm.. I added in Javascript a blur event listener inside the input in modal and that blur even did not work. So it turns out that the real question in hand is how to get onblur work inside modal. Because that is what is broken!!
Edit5:
Sorry, cannot give fiddle. From Edit3 you see sources I use for picker and what I really call is this function:
protected CharSequence createScript(final DateTextFieldConfig config) {
return $(this).chain("datepicker", config).get();
}
which is inside java class, so not JavaScript at all although syntax is looking so similar. For my understanding fiddles take no java code inside them. Wicket needs the java part, I am sorry about it.
For fiddle askers I found similar situation on this fiddle: http://jsfiddle.net/VytfY/227/ - works 100% ok, similar technologies I mention here, no use to my problem.
Last edit:
$('html').on('click',function(e){
if(e.target.className.indexOf('datepicker') == -1 &&
e.target.className != 'next' && e.target.className != 'prev' &&
e.target.className != 'year' && e.target.className != 'month'){
if ($('.datepicker').get(0) != undefined){
$('.datepicker').get(0).remove();
}
}
});
Thanks #Mathew you made my day, above is what it ended to be. I added to input element a class datepickerContainer so clicking it does not hide picker.
Thanks folks, this is done!
One more: for IE, use:
var canvas = $('.datepicker').get(0);
canvas.parentNode.removeChild(canvas);
instead of direct remove. Remove not yet supported, even IE11.
The idea is to move the div created by datepicker.
Use http://api.jqueryui.com/datepicker/#option-beforeShow You can see an example how it is used in a slightly different use case: How to add a custom class to my JQuery UI Datepicker
When you append an element to the DOM that was already inside the DOM, it is removed from the original place, in other words if you use $("#dst").append("#src"), then src element is moved to dst.
Update: I think there's a more straightforward way: You provide the id of the div you want it to use. This way you can have this div inside your modal dialog.
$("#button").on('click', function(){
$("#datepicker").datepicker();
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button">choose date</button>
<div id="datepicker"></div>
<div>footer</div>
$("#button").on('click', function(){
var dt=$("#datepicker").show();
dt.datepicker().on('change', function (ev) {
$(dt).hide();
});
$('html').on('click',function(e){
if(e.target.id !='button'){
$(dt).hide();
}
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button">choose date</button>
<div id="datepicker"></div>
<div>footer</div>
I am trying to click on some button (which becomes enabled after all of the fields are fill in):
<div class="savCancelContainer">
<input type="button"
value="Save"
translatekey="ACTVITY_DETAILS_SAVE_BUTTON"
class="translate" id="submitActivityDetails"
style="background-color: rgb(0, 125, 195);">
The programmers of the web-page have changed it for some reason, and now my code is no longer working correctly (the button doesn't get clicked on):
driver.findElement(By.id("submitActivityDetails")).click();
I also tried finding it by xpath, with no success.
Is there any way to click the button using the Id and Value attributes together?
Any other ideas?
Similar pages and dialogs are still working fine...
You need to create a xpath which will contain both the attribute:
//input[#id='submitActivityDetails'][#value='Save']
And Click event can be triggered in the following way:
driver.findElement(By.xpath("//input[#id='submitActivityDetails'][#value='Save']")).click();
Lemme know if it helps!
Additionally you can use css seelctor to perform that action too.
[id='submitActivityDetails'][value='Save']
I need to disable the button based on the selected row of t:dataTable.
This is the javascript method I'm calling on the row selection event
(the button should be disabled if an item in the selected row has a tooltip... it's ugly, but it was the easiest thing to do):
function processUpdateButton() {
if (!$(".selectedRow").length
|| $(".selectedRow").children().find(".tooltip").length){
$(".Update").button({disabled:true});
} else {
$(".Update").button({disabled:false});
};
}
This is the JSF commandLink:
<h:commandLink id="update" styleClass="Update iconButton"
action="#{myBB.update}"
value="#{gui['button.update']}"
tabindex="301"/>
Setting disabled attribute to the button works. The button is greyed out and if I hover the mouse over it, the cursor doesn't change as it does for other links. The problem is, that I can still click it and the method in the backing bean is called. Is there some way to prevent that?
Here's the rendered disabled button:
<a id="mainForm:update"
class="iconButton ... ui-button-disabled ui-state-disabled"
onclick="return myfaces.oam.submitForm('mainForm','mainForm:update');"
href="#" role="button" aria-disabled="true" disabled="disabled">
<span class="ui-button-text">Update</span>
</a>
I should probably remove the onClick attribute, but I don't know how I would be able to reenable it again.
Of course I can check the condition on the server after clicking the Update button, but that's the last resort. It would be nice if I could completely disable the button generated by JSF only from javascript without call to the server.
So I've found the solution. I copied the onclick attribute to another attribute on disabling button and vice versa:
var onclick;
if (!$(".selectedRow").length
|| $(".selectedRow").children().find(".tooltip").length){
$(".Update").button({disabled:true});
onclick=$(".Update").attr('onclick');
$(".Update").attr('onclick2',onclick);
$(".Update").removeAttr('onclick');
} else {
$(".Update").button({disabled:false});
onclick=$(".Update").attr('onclick2');
$(".Update").attr('onclick',onclick);
$(".Update").removeAttr('onclick2');
};
As you can see the generated html code is not a button but hyperlink. So you need to remove the link from link tag. Could try follows:
$(".Update").removeAttr('href');
I have a button which opens a pop-up window and an Ajax update panel. Inside that window I have another button.
What code do I have to run if I want that update panel to be refreshed, when I press the button from the parent page, without refreshing the whole page?
I sow this code on a web which refreshes the page:
<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">
I am such a good friend with Java.
You need to utilize window.opener object.
window.opener.document.getElementById('Container').onclick();
I'd suggest using jQuery to ensure cross-browser compatibility. And also adding some null-checks of course.
Use Jquery :
If the DIV ID remains static :
$("#Container").click(function() {
// REFRESH CONTAINER HERE
});
If the Div ID is dynamic then make use of class instead of ID:
$(".Container").click(function() {
// REFRESH CONTAINER HERE
});
Is it possible to have panel popup window in JSF 1.1 ? I would like to display a popup window when I click edit button and then would like to have few components in that panel popup window.
I am not using any other JSF like icefaces or richfaces, just plain JSF 1.1.
Any help is highly appreciable.
Thanks
Yes, it's definitely possible. Just bring in some good shot of JavaScript and/or CSS to show/hide and style the popup window. That's also what the average component library like RichFaces is doing with the only difference that it's all wrapped in a simple JSF component.
At its simplest you can use JS window.open() on click of a button/link.
<h:commandButton value="Edit" onclick="window.open('edit.jsf?id=#{item.id}'); return false;" />
The window.open() allows for fine grained customization of the window, such as the size and the browser bars which are to be displayed/hidden. Read the MDN documentation to learn about them. Returning false is mandatory to prevent the button from unnecessarily submitting the form.
Then, in the constructor of the backing bean associated with edit.jsf, you can grab the item by the id which is been passed as request parameter.
private Item item;
public EditItemBean() {
String id = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");
this.item = someItemService.find(Long.valueOf(id));
}
Nasty, but that's what you get with JSF 1.1 which doesn't offer a JSF 1.2-supported #PostConstruct annotation or JSF 2.0-supported <f:viewParam> tag.
Finally, in the edit.jsf you need to bring in some conditionally rendered JavaScript piece which reloads the parent window (so that the edited data is redisplayed) and closes the popup window.
<h:form>
...
<h:commandButton value="Save" action="#{editItem.save}" />
</h:form>
<h:panelGroup rendered="#{editItem.success}">
<script type="text/javascript">
window.opener.location.reload(true);
window.close();
</script>
</h:panelGroup>
Set the success boolean in the action method when the saving is successful.
public void save() {
// ...
this.success = true;
}
There exist also solutions using a so-called "overlay window" dialog which is basically <div> which is positioned using CSS position: fixed; and spans the entire browser window with a transparent background and then therein another <div> which is centered and contains the real form. This however requires a bigger shot of JS/CSS. This is also what the average JSF component library and JavaScript framework/plugin (such as jQuery or YUI) is basically doing. It's only trickier to get it work seamlessly together with JSF as you would of course like to redisplay the popup when a validation error on the popup form occurs and that kind of things. It's much easier if you're using an ajax-enabled JSF implementation/library.