I am trying to use Bootstrap 3 radio buttons. Things seem to be working fine, other than the input elements are never selected.
I found that the click.bs.button.data-api event is triggered once, and that calls $btn.button('toggle') only once. However, $.fn.button is somehow triggered twice. As a result, Button.prototype.toggle correctly sets the input to its selected state and then deselects it.
Why may $.fn.button be run twice?
After I tried to reproduce the issue on JS Fiddle, I was able to identify the source of the issue.
This was an application that I was updating from Bootstrap 2 to Bootstrap 3. There was a big JS libraries file that contained Bootstrap 2. Running that one along with Bootstrap 3 caused the toggle method to be run twice, thus invalidating the selection.
The error went away after removing all of the Bootstrap 2 code.
Related
I am working on a projected with typescript and Angular 2 and don't know how to continue on my application. I currently have a page with several radio buttons and have applied model-based forms to my page, and have successfully made all radio buttons mandatory with the <any>Validators.required functionality. I am able to display an error message if any set of radio buttons have no been selected yet
The next thing I need to do is to check that the correct radio buttons have been 'checked' throughout the page. Is this something I should do through validation? Solving this problem could be done in the "onSubmit" function that I call, but I would rather be able to display error messages on the fly, when they user is marking off the radio buttons to let them know they chose poorly.
Any help on this topic is greatly appreciated. I don't see any reason to upload any code snippets, but if you think you need it I can very quickly get something up.
I am Using Ignite UI Control I am facing a sorting issue
Let me explain the scenario
I am opening an igDialog and in that dialog box I am opening a Grid view using igGrid which looked like below
Fig(1)
For the first time it working fine now when I click on each column is grid sorting is executed once but when I clicked on the add button the I replace the the dialog contents with the add content now this dialog box will be look like that.
Fig(2)
When click on the cancel button Above it again load the content of listing view and show Fig (1).
The problem I faced is actually when I clicked on any column it called the sorting function twice and it hit my controller action twice.
No of times I go to add view and then back to list view it called sorting multiple times.
Now I don’t know what's happening here ?
Note : I am using $(gridId).igDialog("content", html); to loaded content dynamically
It would be better if you can include the code which handles the view changes inside the dialog. What you're describing sound like grid events are attached multiple times on the same elements. If you're not disposing the grid, or attaching custom events every time it's shown, then this would be the result.
I will update the answer to be more concrete once you include the code in the question.
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'm building a site with a few different jQuery UI elements and I've run into a problem.
I'm trying to use this http://jqueryui.com/button/#radio but rather than having a radio button set that toggles through like a radio select should I just get three buttons that once selected remain selected.
I'm using local copies of the jQuery UI css and js files and I have two different jQuery UIs running side by side.
I'm also using the jQuery Select2 widget http://ivaynberg.github.io/select2/ but removing this and using the jqueryui.com hosted versions of jQuery UI doesn't fix my problem.
Has anybody else had any similar problems? I'd post my code but the jqueryui.com example doesn't even work.
The radio buttons work fine as plain html but don't once I've added the jQuery.
Thanks
To disable a jQuery widget button, you should use :
$(".button").button({ disabled: true });
Also open your console and see if you have errors that can cause problems.
I tried successfully to disable every input and select in my page:
$('input').prop('disabled',true);
$('select').prop('disabled',true);
But in my page I have two picklist, the second one is dependent from the first in SFDC.
And when I disable every select, the dependent is not disabled.
I try to hide it, but it doesn't work either!
It only works from the Console, but I need to put these controls in a Js function.
I've found that dependent picklists are not rendered on the page in time for code in a ready function to affect them. The only way I've been able to make changes to the dependent list is to do it in a setTimeout method that fires in 1000 milliseconds or so. It's not ideal, but it does seem to work.