I have written an panel which supports file / image uploads. So the panel is a simple plain form. The panel works in a normal Wicket page.
What I would like to do now:
I would like to use the panel in a modal window. The panel is displayed correctly. However, when I submit it / upload a new file, my browser prompts whether or not I would like to leave the page. The page which contains the DIV of the modal window is a form itself.
My research didn't turn up any interesting information about forms in a modal window expect it has to be self contained (nested form). I think this prerequisit is met.
Is there any information available, what I have done wrong? Any tutorials?
You need to use an AjaxSubmitButton (or AjaxSubmitLink) to submit your form. The problem is that the modal window requires Ajax communication. If you use the window to just reprocess a whole page and don't care about the Ajax'ness, then you can override the ModalWindow#getCloseJavaScript() method.
As Martijn pointed out, the modal window relies on AJAX communication. So use AjaxSubmitButton or equivalents. When components in the main window need to be updated after the submit of the modal window, this can be done by adding them to the AjaxRequestTarget.
However when it comes to multi part forms (file uploads) this does not work quite. Apparently multi part doesn't play nicely with AJAX. One has to do an IFrame trick as pointed out e.g. here: http://www.dooriented.com/blog/2008/04/23/wicket-ajax-like-file-upload-on-a-modal-window/
Related
I have a multistep Drupal 7 form. I'd like to show it in a Bootstrap Popup.
This form works fine on a normal page however when I put it into a Bootstrap popup it closes the popup when the first button is pressed.
I use drupal_render(drupal_get_form('MYFORMNAME_form')) to put the form into the popup body.
How can I make this multistep form work properly in the popup?
when you say bootstrap popup, do you mean a modal window (http://getbootstrap.com/javascript/#modals)? Modals in bootstrap are defined inside the body of the page and just hidden/shown as needed. If you want one to act as its own window, you need an iframe in it, because submitting the form will not trigger whatever mechanism you put in place to show the modal dialog in the first place.
Another option is to use code to re-show the modal, with the form at whatever stage it is at, with each page load (next button, etc.)
A last option is to do all of the form navigation via AJAX. Then you don't ever need to put the form inside an iframe nor include code to re-show the modal with each submission of the form, since the page never gets refreshed.
IMHO the iframe is easiest, and a decent option if you don't have any qualms about iframes. You just need to place the form in a separate page and include it inside the iframe. Some theming work will enable you to turn off the normal page chrome that will make your modal look like a miniature version of your site -- you probably don't want your header, navbar, footer, etc. inside the modal.
You could use the Popup forms module. It claims:
Works well with multi-step forms. Just don't add [the] "Next" button id to
[the] 'close_buttons' array to keep [the] popup open [when navigating between steps].
This solution is not using a Boostrap Modal ("Bootstrap popup") though rather a jQuery UI dialog. It requires a bit of custom coding to use this module. Example code is provided on the project page.
I have a custom control that contains a dynamic content control. The dynamic content displays one of several custom controls. This control is then added to the middle facet (callback1). A Navigator then controls which panel in the dynamic control displays. To this point everything works as it should.
One of the pages that is displayed in the dynamic content has a button that calls a dialog. When the button is clicked it looks like it it is trying to display the dialog but it does not (no errors reported).
If I put the dynamic content control in a simple XPage and load this XPage and have the panel with the control that contains the button to display the dialog open by default it works fine.
So it would appear that the Extension Library Application Layout is blocking the dialog from displaying. I'm at a loss I have the whole application working but not in the ext Library application layout. Wasting an awful lot of time, and not using the ext library app layout is not a good option either.
Found the problem. On the Application Layout custom Control I had some code in the onClientLoad with a try{}catch. If this code failed it 'blocked' the dialog box from displaying properly but the other functions of the window seems to work OK. So I'm not sure what exactly was going wrong in the inner workings of the Application Layout but I moved the code to the BeforePageLoad event and everything now works fine.
This is the code that I moved from onClientLoad to beforePageLoad :
if (!sessionScope.containsKey("ssHelpRepID")){
try{
sessionScope.put("WFSRulesRepID",database.getProfileDocument("frmConfigProfile","").getItemValue("WFSRulesRepID")[0]);
sessionScope.put("WFSRulesRepID_formula",database.getProfileDocument("frmConfigProfile","").getItemValue("WFSRulesRepID_formula")[0]);
sessionScope.put("WFSHelpRepID",database.getProfileDocument("frmConfigProfile","").getItemValue("WFSHelpRepID")[0]);
sessionScope.put("WFSHelpRepID_formula",database.getProfileDocument("frmConfigProfile","").getItemValue("WFSHelpRepID_formula")[0]);
}catch(e){
sessionScope.put("ssError","Error in setting Rep IDs");
}
}
Once I did that the original Application Layout started allowing the dialog to be displayed. Very strange, wish I could bill the time to someone :-)
I've just started on a new project of my own.
What I would like to do is, on large screens, having a button activating a modal window BUT, on smaller screen (mobiles), I would like that modal window to become an off canvas section and when the button is clicked, the off canvas slides in from the side. Within that modal/off canvas part, there will be a form to fill out. (there will actually be multiple buttons that will need to activate the feature. Think something like multiple thumbnails with each a button to let viewers add comments)
I'm using Bootstrap 3 as my base framework. I would like to minimise the javascript (jQuery) functionalities but I understand I can't completely.
Questions I have,
do I have to create two HTML sections, one for the modal and one for the off canvas and then programatically hide/show according screen size?
Would it be best to create the form and then thru javascript, add the proper HTML around it according screen size? (though I think this option would be a tough to implement as my javascript skills are "advance beginner" at best)
How would I make the same button switch activation of the modal window or the off canvas form?
It seems to me that I need to detect screen size, no matter how I do the above, what would be the best way to detect the screen size, the safest and surest way?
Thanks for any insights you guys might have on this.
You will have to show code in your questions here, so i also vote to close your question.
I'm using Bootstrap 3 as my base framework. I would like to minimise
the javascript (jQuery) functionalities but I understand I can't
completely.
Angular JS decouples Twitter's Bootstrap from javascript. See: http://angular-ui.github.io/bootstrap/
Questions I have, do I have to create two HTML sections, one for the
modal and one for the off canvas and then programatically hide/show
according screen size?
Take a look to the Responsive Utilities: http://getbootstrap.com/css/#responsive-utilities
The screen detection of Twitter's Bootstrap is based on CSS media queries.
How would I make the same button switch activation of the modal window or the off canvas >form?
To give the same button different function based on sceensize you will need javascript / jQuery. See: Get the size of the screen, current web page and browser window you also could consider to use something like enquire.js, see also http://bassjobsen.weblogs.fm/responsive-banner-ads-2/
Or create two buttons and hide / show them with the the Responsive Utilities.
In JavaScript when I open a popup I can disable the adressbar, so the user can't enter something.
Is there a similar option to disable the adressbar in gwt?
Short of doing exactly that same thing and loading your GWT app within that popup window, no. You could potentially have a page that is NOT part of your GWT application open a new window with whatever options, then set the URL of that window to your GWT app's address. There's no way (AFAIK) to hide the address bar in the current window.
I have not worked in this area much. Actually I could not understand whether you are trying to disable the popup's address bar or current parent window's address bar.
But what ever is possible in javascript that can be done in gwt. So if you know what to do using javascript for your requirement then you can go for JSNI. No need to look for GWT based solution.
Between I like your stackoverflow display name :-)
Thanks
When to use HyperLink and when to use Anchor?
When using HyperLink how to handle clicks?
com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) is deprecated
com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) is deprecated as well.
Doc suggests to use Anchor#addClickHandler, but how to use Anchor#addClickHandler when using HyperLink
Does it mean that if I need to handle click I should always use Anchor and never use HyperLink?
Great question, because it is so simple, and yet opens up what might be a whole new area for a lot of GWT programmers. I've up-voted the question just because it can be a great lead-in for people exploring what GWT can do.
Anchor is a widget for storing and displaying a hyperlink -- essentially the <a> tag. Really not much more exciting than that. If you want your page to link to some external site, use anchor.
Links are also used for internal navigation. Let's say I have a GWT app that requires the user to login, so on my first panel I put a login button. When the user clicks it, I would display a new panel with widgets to collect the user's information, code to validate it, and then if validated successfully, reconstruct that first panel the user was on.
Buttons are nice, but this is a browser, and I want my user's experience to be more like a web page, not a desktop app, so I want to use links instead of buttons. Hyperlink does that. The documentation for hyperlink describes it well:
A widget that serves as an "internal" hyperlink. That is, it is a link
to another state of the running application. When clicked, it will
create a new history frame using History.newItem(java.lang.String),
but without reloading the page.
Being a true hyperlink, it is also possible for the user to
"right-click, open link in new window", which will cause the
application to be loaded in a new window at the state specified by the
hyperlink.
That second sentence should help clear it up. The hyperlink is not changing the page in a URL sense (the way anchor does), though the URL will reflect the state of the program by displaying the "token" associated with the hyperlink appended to the base URL after a slash. You define the token. It would be something descriptive like "login" or "help" or "about". But this isn't a new page. There is no additional HTML file you've had to construct to display a help page, for example. It is the state of the current GWT app that is changing. Even if you "open in a new window" you are just running the same app in a particular state.
It looks like a link, but it is really a widget that manipulates the history frame, which in turn allows you to move the state of your GWT application. You don't write a click handler for the hyperlink widget, but a value change handler for the history stack. When you see that the "help" token has been put on the history stack, your handler will execute GWT code to attach to the RootPanel a FlowPanel with embedded HTML text with your help information. This is perceived by the user as a "new page", which is what he expects when he clicks on a hyperlink. The URL will be something.html/help. Now pretend he returns to this URL via the back button, not your hyperlink. No problem. You don't care about the hyperlink click. You only care that, somehow, the history stack changes. Your value change handler fires again, and does the same thing as before to display the help panel. The user still enjoys the experience of navigating through web pages, even though you and I know that there is only one web page and that you are attaching and detaching panels to the RootPanel (or whatever scheme you are using to display your GWT panels).
And this leads to a bonus topic.
This bonus is a bit more complicated, but ironically, it could help better understand hyperlinks. I say more complicated, but really, it helps solidify this notion that a GWT application is made up of a series of states, and that the web page on the screen is just the user's perception of those state changes. And that is Activities and Places. Activities and Places abstracts away this history frame manipulation, handling it in the background once you've set up a mapper with a GWT-provided class designed for this purpose, allowing you to break down your app into a series of activities, and as the user interacts through these activities he is put into different places, and each place has a view. Moreover, the user can move from place to place using browser controls like the address bar, bookmarks, history, and the backward/forward buttons, giving the user a real web-like experience. If you really want to get a grip on the conceptual difference between hyperlinks and anchors, you should try to learn this GWT topic. It can really make you change the way you see your apps, and for the better.
Hyperlink (or InlineHyperlink) is basically no more than a kind of Anchor with a ClickHandler that calls History.newItem and preventDefault() the event (so that the link is not actually followed).
Actually, Hyperlink won't do that if it thinks (and yes, it's only a guess) you right-clicked or middle-clicked (or ctrl-clicked) on the link (depending on the browser), to open the link in a new window or tab.
If you need any other behavior, then don't use Hyperlink and use Anchor instead. And if you want to add some behavior to an Hyperlink, then use an Anchor and mimic what the Hyperlink does. And you can reuse the HyperlinkImpl to have the right-click/ctrl-click handling (see links below).
But actually, if you need something that looks like a link and do something on click, but does not have a "target URL" (i.e. it shouldn't be right-clicked/ctrl-clicked to open in a new window/tab, or it wouldn't mean anything to do so), then do not use either an ANchor or Hyperlink, use a Label of whatever instead, and make it look like a link (but well, maybe you should use a Button and have it look like a button then; Google used to have link-alike buttons –such as the "refresh" link/button in GMail– and changed them to look like buttons when they really aren't links).
See also https://groups.google.com/d/msg/google-web-toolkit/P7vwRztO6bA/wTshqYs6NM0J and https://groups.google.com/d/msg/google-web-toolkit/CzOvgVsOfTo/IBNaG631-2QJ