Bootstrap 5 open Modal from another Modal without closing first one - modal-dialog

I am trying to open confirmation modal from modal without closing first one but it seems Bootstrap 5 has different behaviour than 4 version.
Below Bootstrap 4 version that works as expected
https://www.codeply.com/go/NiFzSCukVl
Below Bootstrap 5.1.2 version only difference with version 4 example is attributes are now data-bs instead of data-
https://www.codeply.com/p/imDoS33VZx
Is there any work around to solve this issue or am I missing something ?

According to the Bootstrap docs:
Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.
For example, you could toggle a password reset modal from within an already open sign-in modal.
Please note that multiple modals cannot be open simultaneously —this method simply toggles between two separate models."

Related

Chat window visible even after setting minimized="true"

I am using FB Customer Chat plugin on my site and have set the minized option to true. It was working fine and now all of a sudden the chat window appears by default and I am not able to close the chat window. This is causing my content to be hidden behind the chat window.
Below is the code from my implementation:
<div class="fb-customerchat help-page" page_id=<<my-page-id>> minimized="true" logged_in_greeting="Hi! How may I help you today?"
logged_out_greeting="Thank you">
The minimized attribute has been deprecated (see the documentation). Instead, use the greeting_dialog_display attribute (applying greeting_dialog_display="hide" to the element should have the same effect as minimized=true did prior to deprecation).
remove the "" your attribute
minimized=true

Disabling Vaadin Errorindicator

I'm using validators on several TextFields, which causes to show a popup next to them. As far as I found out, this is realted to the Vaadin errorindicator.
I now want to disable this popup-message, because it creates unhandy behaviour when it comes to using the application on tablets, e.g. an iPad. I already created a separate label showing the error-message and set the errorindicator to hide using CSS as follows:
.v-errorindicator { display: none; }
The pop up keeps showing anyway. Does anyone know how to disable the popup irrevocable?
Thanks, Hendrik
You should cover the validators with try-catch blocks, in the catch block you can remove the errorstyle with yourTextfield.removeStyleName("v-textfield-error"), also the pop-up won't show.

How to close all open durandaljs modal dialogs

Currently I am working on a project that relies heavily on modal dialogs. I'm using durandal's dialog plugin. The problem I have is that within a modal, a user can click an element which displays its details in another modal.
What I would like to do is to close all open modals before I open a new modal. Can anyone give me a good idea of how I can ensure only a single dialog is open at any given time in durandaljs?
Why not use Durandal's pub/sub, or a client-side message bus such as postal.js (which is what we use)? We close all modals by sending a close message over the channel 'app' and the topic 'app/modals'. Instead of holding a reference to an observable (which could have memory implications), we just hold a reference to the message channel (which is a string). Much cleaner way to go.
Ok so the issue I was facing was that I have various Modals, where one modal could be opened from within another modal. However I wanted the modals to close when another would open. The tricky part was that I am using widgets and click events to open the modals.
Since my project is an SPA it occurred to me to simply create a ko.observable - currentModal - on my global object and each new Modal closes the previous, then replaces the old with the new in currentModal(this);
I went even further and am now using the route objects to fire the Modals open as well. Durandal is fun.

How to keep NPAPI plugins alive in ExtJS tabbed views

I'm trying to use a custom video player NPAPI plugin (view FireBreath) inside an tabbed ExtJS application. The plugin lives in one tab, and the others contain presentations of other non-video data.
When switching from tab to tab, the element that contains the plugin is destroyed, and all plugin state is lost. Is there any way to configure an ExtJS tabbed panel so that the html contained in it is not altered when switching to another tab (just hidden)? The alternative is to re-populate the plugin state when returning to the tab, but this would be associated with an unacceptable delay (mostly while waiting for video key frames).
Thanks,
O
I don't know about your ExtJS approach, if you can solve it on that side that would of course be preferrable.
However, if you can't, you can avoid the reinitialization by moving the stream handling to a helper application that is running in the background. The plugin would launch it as needed and receive the stream data from it after registering for it.
The helper would be told when to kill a stream and possibly kill it by itself after some timeout (to avoid session leaks in case of crashing plugins etc.).
I was about to consider a helper application as recommended above, or look into rewriting the plugin to be windowless. Both might be more robust solutions for other JS frameworks.
Fortunately, the solution ended up being simpler than this, at least for ExtJS. By default, ExtJS sets "display: none" on the tabbed view's div whenever it is undisplayed, which calls the plugin destructor. After doing a little more looking through their enormous API, ExtJS has a parameter hideMode as part of the Ext.panel.Panel base class:
'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.
Defaults to: "display"
Setting the parent Panel that contains the plugin to hideMode: 'offsets' fixed the problem perfectly.

JToolBarHelper won't work on IE8 and IE9 Browsers?

I'm working on joomla 1.5 and I have this form and it has a Save and Close button but it is not working on IE browsers. The conflict on MooTools.js and jQuery.js is resolved but still the buttons don't work. What is the possible cause of this?
Thanks,
Justin
Steps to trace the bug.
1. form name should be "adminForm"
all hidden variable present in the form like option, task, view, controller. whatever you are using in your component.