A Jquery Modal is called with two form elements. There is also an option to close the modal. One scenario is that the user would close the modal, and can come back to it.
But when the user come back, the form elements do not work, and the modal just closes upon a click.
$('#test').jqmAddClose('#test');
My assumption is that when the modal closes, it destroys the elements. Thus behaving erratically.
I tried Hiding the modal rather than closing it, but this does not remove the overlay.
The other option is to assign a unique for each instance.
Any other suggestions.
Thank you.
The issue was as I noted in the question, browser deleting the elements, and not re creating them. Assigning a new id each time modal was called solved the problem.
Related
I have a toggle switch. when i turn it off and based on a variable, a pop up modal will be displayed asking to confirm the turn off. if user clicks on turn off button , only then the toggle should turn off. if user clicks on cancel button in the modal, then the toggle should not turn off , it should be in on state only. I found solutions for this problem using jQuery. but I don't want to use jQuery. so please give solutions in angular, typescript, bootstrap. I'm new to angular. hence it would be more understandable if you could explain the solution. thanks in advance.
Have you got the modal working yet? I assume you're using event AND two way binding on the toggel to listed for changs. You should be able to pass data back from the modal - perhaps a boolean, then you can set the toggle's value based what was passed back from the modal.
This question already has answers here:
need click twice after hide a shown bootstrap popover
(8 answers)
Closed 6 years ago.
I've got a Bootstrap popover which contains an element with JS that when clicked, closes the popover using the manual method as shown on the Bootstrap website, i.e.
$('#element').popover('hide')
However, it then takes two clicks on the element the popover is opened from to re-open it. It's as if it still thinks the popover is on show and so the first click is to toggle it closed and the second click then toggles it open again. Does anyone know how to properly close a popover using JS to avoid this? I've created the following fiddle that demonstrates the problem.
http://jsfiddle.net/fxqzn4xd/1/
Thanks very much.
Update: This issue isn't a duplicate of the proposed question
Thanks as always to the SO community for keeping the place tidy and relevant. However, this isn't a duplicate of the proposed question. The problem in that question was that the popovers weren't initialised until the first click. Therefore, the first click did not open the popover, but did initialise it so the second and all subsequent clicks worked.
That is not the problem I found. Popovers are initialised on page load so my first click does open the popover. When closed using the manual .popover('hide') method, the second click then does not work. i.e. every other click works in my scenario. These are different issues caused by different problems. The issue in the linked post is to initialise popovers before the first click, which I already do.
I reported the issue I found on the twbs bootstrap project on GitHub and it turns out it is a known bug, first reported in version 3.3.5 back in July. It had a milestone fix of 3.3.6 but this slipped (3.3.6 came out recently) and now has a milestone of 3.3.7. Full details on Github here:
Calling .popover('hide') prevents popover from open on next click #18860
Good news though, there is a simple workaround that can be applied while waiting for it to be committed to 3.3.7. I'll post it as a solution.
Update 2
Agreed: this is a duplicate of the newly proposed 'duplicate of' question. Looks like the asker encountered the issue just before me! I'll leave the question here though as clearly I (and others) didn't find that one at the time of looking so hopefully it can be of help.
Thanks go to GitHub user 'julesongithub' for providing this workaround. Putting this on the same page as a popover you wish to close using .popover('hide') solves the issue. Essentially it works by resetting the 'inState.click' variable for the popover which the hide method isn't doing.
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
The workaround I use is the click() function on the element that fires the popover, because of the following rationale: You just want to 'hide' the popover when it is being shown and the element to show the popover is also the element to hide it. That being said, click() will make it disappear. Instead of
$('#element').popover('hide')
I use
$('#element').click()
It works well so far...
I fixed this by changing the trigger option when instantiating the popover.
$('#element').popover({ trigger: 'manual' });
Note that the this option requires you to both show and hide the popover.
Source Thread
More popover options
I have recently used Semantic UI to display a modal box in my app. In the modal box is a for, when the form is submitted the values of the forms feilds go on to be used in various ways. My issue is when the page posts back the form feilds are losing their values? For instance a text box that was filled out just appears as empty? However if I move the logic outside the Modal Box it all works fine? Also I have a link that when clicked fires an event in a code behind page, however when in the modal box the event does not fire?
Does anyone have any idea what might be causing these strange issue? It would seem from some things I have tried that its the javascript showing the Modal Box which is causing issues. If I manually add a class to show the modal box and disable the javascript which was causing it to show previously my logic then works fine?
Any help one this would be great im running out of things to try.
For Reference:
Heres the modal box im using http://semantic-ui.com/modules/modal.html#/definition
Here is how to show it according to the docs $('.ui.modal').modal('show'); this is what i believe to be causing the issues
EDIT:
It looks like something in the javascript is rendering the modal just below above the closing body tag regardless of where it is in the context of the website?! This certainly part of the issue, however I fell there is still something else going on
The following function to change the text of an input box works perfectly. but when I try and fire it again with a different parameter, it does not change.
function changeForm(name)
{
$("#the-input-box").val(name);
}
This also happens when I try change the selectedIndex on a select tag.
Also, the form is located on a modal box using Twitter's bootstrap, could that be the issue?
Any suggestions?
I think it's the way you are using the modal box. I've experienced the exact same thing before.
The thing about the id attribute is that there can only be ONE at any given time within the HTML DOM.
You may want to check whether you are 'destroying' your modal box after closing it. The first time you open the modal box, calling the function works without any problems. There could be a chance that after opening the modal box again, the function doesn't work anymore. This is because you are spawning multiple instances of the modal box and this causes multiple instances of #the-input-box to appear in the DOM.
Give that a try and let me know. The key is to DESTROY the modal box when it is closed (maybe closing it is fine, but I prefer the more drastic approach of destroying).
I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal).
However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.
If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.
It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.
Help!
By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:
YAHOO.widget.Overlay.prototype.bringToTop = function() { };
That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:
this.bringToTop = function() { };
If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.
The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?