I have a simple modal popup which can be closed by a button. On the page where modal is going to be displayed there is a placeholder with an id. When the page first loads i addOrReplace an empty Panel. Then, in response to proper action I swap this panel with the modal panel. Then I close the panel and swap it again with another empty panel. Everything works fine. But here's the strange thing - when I do this the second time, the modal panel opens normally, but when I press close it does not close even if it is replaced by the new empty panel and added to the target - but it worked before! When I press same button again, everything crashes not being able to find component for markup for the modal (but there should be no markup for it anymore!)
I have thought about it all day yet I still haven't found the reason for all this. Any help would be much appreciated.
private void swapToDummyPopupContainer() {
currentPopupContainer = new DummyPanel("popupContainer");
addOrReplace(currentPopupContainer);
}
private void swapToCreationPopupContainer(final FCalendarEvent event) {
EventCreationPopup popup = new EventCreationPopup("popupContainer", event) {
private static final long serialVersionUID = 965466080498078142L;
#Override
public void onDataSubmit(AjaxRequestTarget target) {
AvailabilityDTO model = getModel();
event.setTitle(model.getDescription());
pushNewEventToModel(model);
availabilityMapping.put(event.getId(), model);
FCalendarEventActions.addEvent(target, fcalendar, event);
swapToDummyPopupContainer();
target.add(currentPopupContainer);
}
#Override
public void onCancel(AjaxRequestTarget target) {
swapToDummyPopupContainer();
target.add(currentPopupContainer);
}
};
currentPopupContainer = popup;
addOrReplace(currentPopupContainer);
}
#Override
protected void onRangeSelection(AjaxRequestTarget target, Date startDate, Date endDate,
boolean isAllDay) {
final FCalendarEvent event = new FCalendarEvent();
swapToCreationPopupContainer(event);
target.add(currentPopupContainer);
}
As for the markup there's
<wicket:container wicket:id="popupContainer" />
in the parent panel and both panels to be swapped are defined like this
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<wicket:panel>
</wicket:panel>
</html>
at the end of the modal markup (before closing tag) there is javascript, but I don't believe it has anything to do with it:
<script type="text/javascript">
var $modal = $('#eventCreationPopup');
$modal.modal('setting', {
selector : {
close : '',
approve : '',
deny : ''
}
});
$modal.modal("show");
</script>
You cannot attach an JavaScript event to
<wicket:container wicket:id="popupContainer" />
because wicket:container has no real tag in the final markup you generate by Wicket. setOutputMarkupPlaceholderTag(true) has no effect in this case.
Change it to the DIV tag:
<div wicket:id="popupContainer"></div>
Related
I use jquery datepicker and it not display after I click ajax button.
Is there any way to show datepicker again after click? I use wicket 8.
BasePage.java
public class BasePage extends WebPage {
...
}
BasePage.html
<body>
...
<script src="/js/jquery.min.js"></script>
<script src="/js/jqueryui.min.js"></script>
<script src="/js/main.js"></script>
</body>
HomePage.java
public class HomePage extends BasePage {
public HomePage() {
SearchForm searchForm = new SearchForm();
Form<SearchForm> form = new Form<>(new CompoundPropertyModel<SearchForm>(searchForm))
AjaxButton btn = new AjaxButton() {
protected void onSubmit(AjaxRequest target) {
// Handle search data
...
target.add(form);
}
};
TextField<String> date = new TextField<>("searchDate");
form.add(date);
form.add(btn);
}
}
HomePage.html
<wicket:extend>
<form wicket:id="form">
<input wicket:id="searchDate" class="datepicker" />
<button wicket:id="btn">Search</button>
</form>
</wicket:extend>
main.js
$(function() {
$(".datepicker").datepicker();
...
});
After click ajax button all script in file main.js not working
Please help me.
when you update form via AJAX you replace each element inside it, which includes the input field you use with datepicker. But doing so you loose the javascript setting done by main.js when page was first loaded.
You can solve this in two ways. First, you could update only those elements that need to be refreshed, for example the component that you use to show search result (I suppose there must be such an element in your code).
The second solution, more heavier and complicated, is to make a custom TextField component that execute the datepicker javascript code each time is rendered.
An example of such solution can be found is in the user guide: https://wicket-guide.herokuapp.com/wicket/bookmarkable/org.wicketTutorial.ajaxdatepicker.HomePage
I would recommend to follow the first solution as it's more natural and simpler and requires less code.
UPDATE:
If you want to refresh the textfield another simple solution is to use target.appendJavaScript​ to reapply the datepicker plugin:
target.add("$('#" + date.getMarkupId() + "').datepicker();");
this should add the datepicker to the fresh new field.
I'm trying to add an external web widget from a weather website. It gives me somethink like this:
<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>
I've tried creating a HTML widget with that code and adding it to my panel, but it doesn't show.
The embed code you have been given only works when it is included in the HTML file. It doesn't work when added dynamically. For example, if you open an empty HTML file in a web browser and run:
document.body.innerHTML += "<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>";
in the developer (F12) console, you will see that the external content doesn't get loaded. This is because scripts will not automatically be executed when added in this way.
You don't need to execute this external script, however. All it does is create and insert an iframe, and set some attributes and styling. If we look at the source code of the script, we can translate it into a GWT equivalent.
Embed JS script:
conte = document.getElementById("cont_5caab8f298a3d34d53973f2d8906d1f7");
if (conte) {
conte.style.cssText = "width: 176px; color: #868686; background-color:#FFFFFF; border:1px solid #D6D6D6; margin: 0 auto; font-family: Roboto;";
elem = document.createElement("iframe");
elem.style.cssText = "width:176px; color:#868686; height:200px;";
elem.id = "5caab8f298a3d34d53973f2d8906d1f7";
elem.src = "https://www.tiempo.com/getwid/5caab8f298a3d34d53973f2d8906d1f7";
elem.frameBorder = 0;
elem.allowTransparency = true;
elem.scrolling = "no";
elem.name = "flipe";
conte.appendChild(elem);
}
GWT equivalent:
public class Hello implements EntryPoint {
public void onModuleLoad() {
Panel root = RootPanel.get("main"); // replace with your Panel
//This doesn't work:
//HTML embed = new HTML("<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>");
//This does:
Frame embed = new Frame("https://www.tiempo.com/getwid/5caab8f298a3d34d53973f2d8906d1f7");
embed.setStyleName(""); // remove GWT styling. You could add your own CSS class here.
embed.getElement().setAttribute("style", "width:176px; color:#868686; height:200px;");
embed.getElement().setAttribute("frameborder", "0");
embed.getElement().setAttribute("scrolling", "no");
root.add(embed);
}
}
You can use an IFrame element to load external content.
final Frame frame = new Frame("url");
frame.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
// do stuff here
}
});
RootPanel.get("mydiv").add(frame);
Note though, that you won't be able to interact with the external content due to Cross site scripting.
I have a ModalWindow which has a form, which has a TabbedPanel, which has two AbstractTabs which, on which there is a DataTable on each of them, with input elements.
So: ModalWindow > Form > TabbedPanel --> Tab1 (Panel) > DataTable (there are two tabs)
Within the ModalWindow, I added to the form 3 buttons, like the following:
// save button
final GbAjaxButton save = new GbAjaxButton("save") {
private static final long serialVersionUID = 1L;
#Override
public void onSubmit(final AjaxRequestTarget target, final Form<?> form) {
System.out.println("Saving something... ");
}
};
I can see the data being sent via POST to the backend, but I can't seem to be able to access any of the fields in the DataTables.
Some parts for the code are:
tabA = new AbstractTab("Tab Name") {
public Panel getPanel() {
return new SomeNewPanel(panelId,<somedata>); // <-- this has the DataTable with inputs
}
}
Form form = new Form("formNameInHtml");
form.add(new TabbedPanel("htmlName", tabs);
I would really appreciate some insight on this problem.
Thanks.
From ModalWindow javadoc, "If you want to use form in modal window component make sure that you put the modal window itself in another form (nesting forms is legal in Wicket) and that the form on modal window is submitted before the window get closed."
Wicket automatically adds a form outside the modal window, so if you want to use a second form inside you should override org.apache.wicket.markup.html.form.Form#isRootForm() and have it return true.
We are using 1.4.9 for our current webapp. But we want to upgrade to higher 1.4.x version preferably 1.4.22(latest 1.4). The problem is that the page won't submit if AjaxButton is clicked. This is working in 1.4.9. I put breakpoint on the onSubmit of that button but it is not going there. Any insights on this? Thanks!
Here is the code:
For the button:
public abstract class SXIButton extends AjaxButton {
public SXIButton(String id, Form form) {
super(id, form);
initialize();
add(new SimpleAttributeModifier("validating", "false"));
}
}
In the java:
searchForm.add(new SXIButton("searchButton", searchForm) {
private static final long serialVersionUID = -4366670520053224476L;
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
LOG.info("Searching Users");
target.addComponent(userContainer);
userSearchModel.setUserCurrentUserFilter(getSessionBOUser().getCd());
UserDataProvider udp = new UserDataProvider(userSearchModel,isForSearch);
udp.setSort("cd", true);
userContainer.addOrReplace(getResultPanel(udp));
}
});
add(portlet);
portlet.add(searchForm);
in html
<input type = "submit" wicket:id = "searchButton" wicket:message="value:button.search" />
Without any code it's hard to help you out. I would first check the changelog to see if anything was changed in a later version that might causes you trouble (e.g. this ticket). If you cannot find anything obvious you might want to update first to another version which is not the latest one, to narrow down in which version your code breaks for the first time.
But those are just shots in the dark.
I have a question regarding the integration of CodeMirror UI in a smartGWT tab.
Basically, I can't display the CodeMirror-UI editor inside the textarea element I attached to a smartGWT tab. Here's what I did:
I installed CodeMirror-UI as described on its page, correcting the paths to match my project's directory hierarchy
I wrote a js script in my project's main html (at head) :
<head>
...
<script>
function fireEditor()
{
var textarea = window.document.getElementById('tab_editor' );
var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
var codeMirrorOptions = { mode: 'javascript' };
var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
}
</script>
</head>
I invoked the script while opening a (smartGWT) tab:
// create a smartGWT tab
Tab tab = new Tab("tab");
tab.setID("tab");
tab.setCanClose(true);
// put the CodeMirror UI inside the smartGWT tab
// create a smartGWT canvas
Canvas tabContent = new Canvas();
tabContent.setID("tabc");
tabContent.setWidth100();
tabContent.setHeight100();
// use a GWT HTMLPanel to attach new html elements to the smartGWT canvas
// and invoke the fireEditor() function to load the CodeMirror UI
HTMLPanel editorContainer = new HTMLPanel(
"<div id=\"editor_container\">"
+ "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
+ "</textarea>"
+ "</div>");
editorContainer.setWidth("100%");
editorContainer.setHeight("100%");
running from a browser (I'm using firefox - iceweasel 10.0.10), this results in a smartGWT tab that shows an empty textarea element.
Checking with firebug, the area within the smartGWT tab contains the HTML I specified in the HTMLPanel, but no CodeMirror UI is shown.
What am I missing?
I'm using Eclipse Indigo, with gwt 2.4.0, smartgwt 3.0p, and codemirror ui 0.0.19 from its git repo (which itself uses CodeMirror 2.3).
Thank you
Found the solution.
First of all, there is no "onload" event for an html textarea element, so the code
HTMLPanel editorContainer = new HTMLPanel(
"<div id=\"editor_container\">"
+ "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
+ "</textarea>"
+ "</div>");
will just place a textarea in the HTMLPanel, without calling "fireEditor()".
Replacing "onload" with "onclick" does the trick: once the textarea element shows up, click on it, and the CodeMirrorUI will show up as well.
Problem: I need to visualize the CodeMirrorUI interface automatically, ergo the "onclick" approach is useless.
To accomplish this task, I need to somehow modify the DOM of the smartGWT tab, replacing its inner html with CodeMirrorUI's html.
I found this documentation very helpful: http://www.smartclient.com/smartgwtee-latest/javadoc/com/smartgwt/client/docs/DomIntegration.html
this is the resulting code:
1) I kept the js script in my project's main html (at head) :
<head>
...
<script>
function fireEditor()
{
var textarea = window.document.getElementById('tab_editor' );
var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
var codeMirrorOptions = { mode: 'javascript' };
var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
}
</script>
</head>
2) I created a new class -"MyEditor", following the example found in the documentation link I mentioned above :
public class MyEditor extends Canvas {
private String editor_id = null;
private static native void replace(String editor) /*-{
$wnd.fireEditor(editor);
}-*/;
public MyEditor(Integer num) {
editor_id = "editor_" + num;
setRedrawOnResize(false);
}
#Override
public String getInnerHTML() {
return "<textarea id=\"" + editor_id + "\"" + "style=\"width:100%;height:100%\"></textarea>";
}
#Override
protected void onDraw() {
MyEditor.replace(editor_id);
}
}
3) finally, I filled the smartGWT tab with an instance of MyEditor:
// create a smartGWT tab
Tab tab = new Tab("tab");
tab.setID("tab");
tab.setCanClose(true);
MyEditor editor = new MyEditor(tabNumber); // an integer number
tab.setPane(editor);
Tested. Working.