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.
Related
I have <router-outlet [routes]="Routes.all"></router-outlet> set in my app component. I have a page with links at the bottom of the page. If a user clicks a link I want them to be taken to the top of the new page.
If I use RouterLink the current scroll position is retained so the user lands in the middle of the new page.
<a [routerLink]="RoutePaths.featurePage.toUrl()">...</a>
If I use a regular HTML link, I get the behavior I want, the user lands at the top of the new page.
...
What I really don't get is how they can respond differently yet compile to the exact same HTML code.
<a class="_ngcontent-zbb-0" href="/feature-page">...</a>
What am I missing here?
I understand regular non-Dart Angular has something called scrollPositionRestoration but it doesn't seem to exist for AngularDart.
The answer is really a hack to return the scroll position by utilizing the
window.scrollTo(x,y) function.
This issue was raised in here in regular angular
Equivalent to autoscroll=true: automatic scroll to top when route changes
remmeber to import dart:html
I'm creating a contact form, which I want to be pop out (and greyed) and wanted to know if fancybox could be used for this purpose. I currently use it for images but curious to see if it could work for this purpose.
You can use fancy box for a form.
You might have to make some changes to the plugin to get it work though
you can see how to do it here
Based on your comment: There are a few ways to get that done:-)
One way, is to have multiple divs within the form. Make the next button hide one div and show another in the modal. This can be done as many times as you need to do it within the same modal. Then when the form is complete, you can have a submit button now instead of a next or previous button.
I am building an application using Zend Framework and i need insert one iframe in footer this application but, when i press F5 or click link or button, all page refresh even iframe.
The layout zend is called everytime when i dispatcher an event to server, ready, the iframe too. (My iframe is in the foorter.phtml, ready, it called together layout).
Someone have an some idea how to resolve this question?
tks
You cannot refresh the whole page except for an iframe on the page. When you ask a browser to refresh a page, it will refresh the whole page, there's no way to do it any differently.
To do what you seem to want to do, without using Javascript/AJAX, you'd have to use two frames. One for the top part of your website, and one for your footer. Here is an introduction to frames and how they work (iframes are similar, they are just "internal frames"): http://www.w3.org/TR/html4/present/frames.html
Please, however, note that using frames/iframes is not a practice I personally encourage. You should ask yourself why you are trying to do this. If it's to reload only a certain part of the page, then you should probably check into Javascript/AJAX alternatives.
If you want to disable the layout for some action you can use $this->_helper->layout ()->disableLayout ();. Put it in the iframe action, which will disable the layout and will show only the view of the action.
First I created a form in Orbeon Forms with Form Builder. Next I made it a multi-page form as described in Create a wizard or multi-page form with Form Builder.
The problem I'm facing is that when submitting the form, validation only occurs on the currently visible sections. When submitting, I would like all sections to be validated even though only one section may be visible. What would be the best way to achieve this?
I would recommend you change the code of your "Next" button so it doesn't switch to the following page if there are errors on the current page. You can do so by adding an if "guard" on the <xforms:setvalue> inside the "Next" button, that reads:
if="xxforms:instance('fr-error-summary-instance')/valid = 'true'"
This will also make things easier for users: if you let them navigate to page 2 while there are errors on page 1, when they try to save while on page 2, you will somehow have to tell them that the error is on a previous page, and provide a way for them to navigate to that page.
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/