OK, here's my situation. I have modal region with a chart. There are checkboxes corresponding to each line on the chart. I want the end user to be able to click a checkbox and have the corresponding line on the chart appear/disappear. Here's where I am:
User opens page two
There is a button "open chart" at the top of the page
When that is pressed, chart opens
User hits a checkbox, the page is submitted with a dynamic action
The modal region disappears
When I open the modal region back up, the line has indeed disappeared like it was supposed to.
My problem is number 5 above. I need that modal region to stay open after the dynamic action on the checkbox submits the page.
So far, I have tried another action (under the submit page on checkbox change action) that opens the modal region. But, that isn't working. Any help is greatly appreciated.
If you used the wizard to build the page then it's likely that when you submit the page the close dialog process is being triggered. In that case, to stop that from happening either delete the process or put a condition on it (request contained in value) and select the buttons you want to close it.
Found my answer. The solution was to forget about the modal region and make a modal page. Now, when I check/uncheck a box, I can call a dynamic action to resubmit the modal page without it disappearing. Thank you for your help!
Related
This is more of an architectural question, so in a webpage I have a edit button when allows me to edit a record. As soon as I press the edit button a modal opens up I change some of the records info and I hit save.
The focus returns to the (X) close button of the toast(save confirmation) for a second and even before the toast disappears focus returns to the browser since the save refreshes the page and the dom is destroyed and created again.
What we expect to do is once we hit the save button in the modal, focus should go to the toast (x) close button and wait till the confirmation dialog(toast) disappears and then return to the edit button again.
So there is 2 problems to be solved
How to set focus on the edit button(trigger) when the dom is destroyed and created again once we hit save button in the modal, coz there are a few buttons before that like new, view and then edit. how to specifically set focus on the trigger element?
How to create focus stack where we can specify that the focus should go to toast first and the n to the trigger even if the dom is destroyed and created again (is that possible)?
When I say "the dom is destroyed and created again" is it about replacing DOM content partially? Or the whole page is reloaded?
Just the header panel in which these trigger buttons (New, Edit, View) are destroyed and created again. So only partially the dom is destroyed and created again
A toast message is typically temporary and goes away on its own. It should be unobtrusive so that it can be easily ignored. If you have an X close button and you want to user to click on it (or hit ESC) to dismiss the toast message, then you really have a modal dialog instead of a toast message.
On sites that I've used that allow editing and saving, I've found that just a simple save message right on the page is sufficient. The save message can be an aria-live region so that the message is read for screen reader users. The save message usually goes away if I start editing other fields.
If you have to force focus to go back somewhere after a DOM is recreated, you'll have to save where you were (cookie) and then get the save point and just call the focus() method on it.
We have an Asp.net mvc website with credit card processing view. The view basically has a Chase Orbitel paymentech Iframe. We want to display confirmation modal pop up before user click the button in the Iframe to submit the payment. Our problem is that as soon as we click the submit button inside the chase Iframe , we don't know how to display the modal using jquery/JavaScript. We are still new with callbacks. Any suggestions and help is greatly appreciated.
I am working on a project which uses AngularJS/Breeze framework using HotTowel Template.
I have a requirement where, in a parent.html page I have a button/link as "Add" and on click of this button, I need to display a popup page by hiding the parent page(i.e.parent.html).
Add page will have input controls and Save button where user will enter the details in the respective control and on click of Save button data from input controls will be saved to the database table.
I am new to this AngularJS style coding, please advise me or provide me a link on how I should implement the display a child popup page by hiding the parent page(i.e.parent.html) as explained above.
From what I understood from your question is that you need to use modals.
You can try using angular ui modals
This creates a pop up by fading the primary page. You can create input controls and save buttons in the modal
I'm using twitter-bootstrap and am using the Modal JS plugin. I have a modal which is open and want to open another modal from the original modal that is open.
The reasoning, is the user can select an option from the dropdown list. If the item they want to select isn't in the list, they can click a button and add a new one.
I've tried to hide the original modal, then show the new one, but I get stuck with just showing the backdrop. When I try and open them together, the backdrop gets dark (since I've now placed another backdrop on top of the one already existing and I can still see the original modal.
Ideally I could open a modal, then open another just as easy as doing it today with one modal.
My problem was the 2nd modal was inside the file of the first, so when I hid the first, I couldn't show the 2nd one (which is why I was left with just the backdrop). I ended up just calling modal.('hide') on the first modal, then modal('show') on the 2nd.
How do I get the "back" button seen in my demo to NOT close the modal window?
If this can't be prevented, then at least provide them with a confirmation box alerting them the window is trying to close and ask them if they want to continue.
I'm using a javascript back button link and forward button link to control the user's history inside a modal/lightbox window.
Here's a demo of what is happening... When you begin, the second page will have a link to the modal window, so click that, then click the "back" button in the window as it will take you BACK to the start page. That's the issue I'm having as I don't want this to happen.
http://www.apus.edu/_test/evan/modal/start.htm
Back Button
Foward Button
If you can see where they are in the page (ie: the start page having a static back / forward button ) why not just make the back button a javascript:void(0)? If you aren't going to have a defined front location, use server side to store their start place, and once they have reached it, disable the back option.