I have problem with resize window. I use chart from primefaces jsf library and when window is resize chart is not resize and I want to ajax refresh chart with new size window.
Do you want to know how catch resize event in p:panel or p:outputPanel??
Perhaps you can combine some operations using HTML onresize event and p:remoteCommand.
Event in HTML would be:
<body onresize="updatechartpanel">
...
</body>
...but it's very likely that JSF woudn't validate the above, so you can bind the event from JavaScript:
<script type="text/javascript">
window.onresize = function(event) {
updatechartpanel();
}
</script>
Where updatechartpanel() is simplified PrimeFaces remote command defined as following:
<p:remoteCommand name="updatechartpanel" update=":myform:mychartpanel" />
To be precise, there's nothing executed remotely because we don't call any bean action from this command. But it force update given components.
Nevertheless, be aware that this event is called almost every single resized pixel (also during mouse manipulations), so it would be worth to protect from too exhausting operations as it was proposed here: JQuery: How to call RESIZE event only once it's FINISHED resizing?
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>
In my Wicket application I have a few lines of code that take some time to execute. It would be nice, if I could show a loading icon or popup, during the time the logic is being excecuted. The problem is that I have no idea how to implement something like this. Can someone help me with this?
And the Goal is
Class.java
// Show popup or icon
this.getData();
// Hide popup
Look at this wicket wiki:
Generic Busy Indicator (for both Ajax and non-Ajax submits)
If you are using ajax button/link you can use IndicatingAjaxLink and IndicatingAjaxButton both comes from wicket-extensions
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket-extensions</artifactId>
<version>${wicket.version}</version>
</dependency>
Links about custom indicators:
Customizing IndicatingAjaxLink in wicket
Is it possible to change the color of Wicket's activity indicator?
And you can also override the css class:
span.wicket-ajax-indicator img {
margin: 0;
padding: 0;
padding-left: 2px;
display: inline;
white-space: nowrap;
}
Have a look at AjaxLazyLoadPanel. Put the display of the stuff that takes long into an Panel and wrap it with AjaxLazyLoadPanel.
If you want to load a pop up that you would want to customize, then you can use a modal
window. Follow the tutorial to load a modal window on click.
Have whatever text you please on the destination panel.
In onConfigure() of modalPanel1 (destination panel), in the end add the following code:
Thread.sleep(//time average);
window.close(target);
Where target is passed as a parameter to the constructor from the ModalWindowPage.java as an object for the constructor.
So ideally this is the change in instantiating:
modal2.setContent(new ModalPanel1(modal2.getContentId(),target);
where target is the ajax link/button target.
You can also activate it on the load of page (Click here to view the discussion)
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.
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();">