Could someone guide me in the right direction on how to implement a modal system in angular2 having a lot of modal windows? Right now a modal containing a component to search customers looks something like this:
<modal #searchModal title="Search">
<search-customer (complete)="searchModal.hide()">
</search-customer>
</modal>
Basically modal is a simple component fixed on the middle of the screen, I close the modal when the component inside the modal emits an event. On each show() and close() the modal gets a Z-index from a service and applies/removes some styles.
So far the problems are:
On pressing Esc I have to close the last opened modal, how can I access that component from the service ? Can I somehow pass a reference to the service on modal.show() ?
If an exception occurs in the service, how can I access a modal to show my problem? Have a modal component in the root component of my app(If so, then again I have the first problem, how can I access it from inside the service)?
I can easily open and close a modal from template like in the previous example (complete)="searchModal.hide()" but how can I do this from inside the class methods?
Can someone tell me the right way to do this, or how to solve the existing problems ?
Related
I'm building an app to manage some users, where i have a page to list them. On each user i have some buttons to make some actions on them, like edit them or delete them.
When the delete button is pressed, i would like to have a modal to show up and ask if you really wawnt to delete the user. As i may be using this modal in other places, i thought i should make it kind of generic to receive the different messages i want to show, so i built a component for it.
I've searched through some examples, but i couldn't find one similar to mine.
I've made the template for the modal and the component to back it up, but i don't know how to show it, for example, on a button click.
Any help is appretiated :)
Thanks
EDIT: i'm trying to use bootstrap modals
use bootbox instead of making a modal from scratch. they can be perfectly used for delete confirm or alerts. I use them. http://bootboxjs.com/. It is also available for angularjs.
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've been trying to find a solution but I can't find any.
I'll use basic examples so anyone who knows ionic can understand my problem well.
ionic start myApp tabs will create a new project with tabs ready to go.
Those tabs are Dashboard, Chat and Settings.
When you go to the Chat Tab you will then select a person to view its chat content (which directs you to the Chat-Detail Page in actuallity)
I wanted to hide the ion-tabs directive when I go to the chat-detail page so I can force the user to use the Back button instead of clicking anything on the ion-tabs.
Simply put : you will have a hard time doing that. At best it will not look good, IF you succeed to hide using css (I did it, and really, it's not pretty). Basically you would need to define a variable on the parent scope, that changes when entering the chat-detail state, and bind it to ng-class directives on multiple elements (the ion-tabs to hide it, the ion-content to translate it up to cover the area where the tabs were, and add some transition to make it not too brutal).
The logical thing to do would be to have the chat-detail state not being a child of the state containing the tabs. The problem you will have, though, is that there is a huge bug going to / from tabbed state. See details here : https://github.com/driftyco/ionic/issues/2997
At the end of this discussion you can find some posts by Jason and Jerrybels (that would be me), that could lead you on the right way to do it. Basically, you will have to get rid of the ion-tabs directive, and use Ionic's CSS for tabs instead, doing all the states manipulations yourself.
Good luck !
You can use "hidden" attribute of ion-tab like this -
<ion-tab hidden={{condition}}" />
Using this we can show/hide tab.
Should Also have specified, I am developing this using Titanium Mobile.
I have a tabbed application. I have the need to open a "modal" like window for the purpose of allowing the user to enter some settings.
For example, you click the 3rd tab in the tabGroup. Some logic runs to see if a setting is set before continuing to create the view. The setting is not in place, so a new window animates in asking you to create this setting. After you create the setting, it closes and the view continues to render, or refreshes.
I cannot for the life of me figure this out. I have created the window, animated it into the current tab, and I have even successfully closed it. Getting the view to refresh or re-load is what is difficult. Also, the navigation bar offers the user the ability to navigate back to the window to change the setting, which I also do not want.
Any way to accomplish this?
I have the same need for logging the user into the application.
Use this code:
windowbject.open({modal:true});
This will only works in iOS.
And you want to refresh view which is behind this modal window then you have to add "focus" eventlistener to the window and write code in it.This code will execute when ever window got focus.
So when you close "modal" view then window behind it will get focus.
I hope this will help you.
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/